uxui디자인 15

워밍업 - 아토믹 해빗⌜아주 작은 습관의 힘⌟

유명한 도서인 아주 작은 습관의 힘에 나오는 이야기를 정리해보면서본격적으로 새로운 지식을 배우기에 앞서 마음을 다잡으려고 한다.이전에 한 번 읽은 적이 있으나, 어느새 기억이 흐릿해져서 이 분의 영상을 참고해서 다시 한번 내용을 상기시켰다. https://youtu.be/4HnNq6XlJbw?feature=shared: 올빗 | 진짜 꼭 읽어보세요. 내 삶을 바꿔준 책 | 아주 작은 습관의 힘 매일 1%씩 성장하면 1년 뒤에는 37배 성장한 자신을 보게 될 것이라는 이야기 들으셨나요? 1. 📖⌜아주 작은 습관의 힘⌟핵심 내용 정리1️⃣ 습관은 복리로 쌓인다매일 1%씩 나아지면 1년 후에는 37배 성장할 수 있음작은 변화라도 꾸준히 쌓이면 큰 차이를 만듦2️⃣ 정체성이 습관을 만든다목표 중심이 아닌 ‘정..

동기부여 2025.02.26

워밍업 - 메타인지

우리는 대부분 처음부터 아이디어가 완벽해야한다는 착각에 빠져있다. 그렇기 때문에 그 아이디어가 반박 당했을 때 완벽하지 않다는 것을 깨닫고 이내 숨어버리는 것이다. 오늘은 몇년 전부터 핫한 키워드였던 메타인지가 뭔지, 성장하기 위해서 왜 메타인지가 필요한지 알아보려고 한다. , 등의 저서로 유명한 컬럼비아대학 심리학과 리사 손 교수님의 메타인지 강의 영상을 보면서 중요한 내용을 정리해보자.  메타인지가 우리 삶에서 어떻게 용기를 줄 수 있을까?​​"그건 아닌 것 같아"어느날 용기내서 말한 순간, 누군가가 부정적인 반응을 보였을 때. 우리는 당황하는 순간을 경험하게 된다 메타인지(meta-cognition)1. 자기 자신을 보는 거울2. 스스로를 믿는 능력3. 나의 완벽하지 않은 모습을 인정하는 것 ​..

동기부여 2025.02.25

워밍업 - 뇌 가소성

뇌 가소성 : 뇌 세포와 뇌 부위가 유동적으로 변하는 것 우린 왜 꿈을 꿀까? : 지구가 자전하기 때문일지도 모른다.자전하기 때문에 꿈을 꾼다? 이게 무슨 소리일까. 뇌 가소성을 통해 알아보자.​우리 뇌는 20만년 전 조상의 뇌와 다를바 없다. 뇌 가소성 덕분에 적응을 하면 살 수 있었다. 미리 설계된 구조를 가지고는 적응하기 어려웠기 때문뇌는 빠른 성장과 전문성을 포기하고 어떤 상황에서도 유연하게 변화할 수 있는 가소성을 선택한 것!뇌의 각 부위는 어떤 일을 하기 위해 태어난 게 아니라, 단지 그 일이 주어졌기 때문에 그 일을 하게 된 것우리 뇌는 신체 부위 하나가 사라지면 뇌에서 그 부분을 담당하던 부분이 다른 부분을 담당하는 부분으로 잠식하게 됨(재구성된다)인간의 뇌는 미완성으로 태어나 외부세계를 ..

동기부여 2025.02.24

좋아하는 웹 화면 만들어보기

오늘은 좋아하는 웹 화면 만들기를 진행해보려고 한다.​아직 부족한 피그마 실력이라 똑같이는 따라 하지 못하더라도, 간단하게라도 좋아하는 사이트의 메인 화면을 살펴보고 디자인과 로직 등을 파악하며 분석해보고자 한다. 분석 내용에 오류가 있을지도 모르겠지만, 일단 시도하고 또 배우면서 알아가면된다고 생각한다. 시도에 의의를 두자..!​ 1. 모방 스터디 할 때 고려해야할 것들​1) 웹 화면 분석대상 선정: 자신이 좋아하는 웹 사이트(포털, 쇼핑몰, 블로그 등)를 선택 구성 요소 분석: 화면의 레이아웃, 헤더, 네비게이션, 콘텐츠 영역, 푸터, 버튼, 이미지, 아이콘 등 요소들을 세밀하게 분석의도 파악: 각 디자인 요소가 사용된 이유(가독성, 시각적 강조, 사용자 흐름 등)를 메모​2) 디자인 모방의 원칙단순..

UI 컴포넌트와 프로토타이핑

오늘은 UI 컴포넌트와 프로토타이핑에 대해서 알아보고 간단한 UI 컴포넌트 제작 및 프로토타이핑 실습을 진행하려고 한다.​​1. UI 컴포넌트의 이해​1-1) UI 컴포넌트란?정의: 디자인에서 반복적으로 사용되는 인터페이스 요소(버튼, 카드, 모달, 입력 필드 등)를 하나의 단위로 만들어 재사용할 수 있도록 설계한 객체 **모달: 방문자가 특정 버튼 또는 링크를 클릭했을 때 뜨는 창으로, 페이지 내에서 추가적인 정보를 보여주고 싶을 때 활용장점 - 일관성 유지 - 동일한 스타일과 동작 원칙을 적용 가능 - 효율적인 수정 - 원본 수정 시 모든 인스턴스가 자동 업데이트됨 - 작업 속도 향상 - 반복 작업을 줄이고 디자인 시스템 구축 가능​ 1-2) UI 컴포넌트 종류입력 요소(Input Component..

레이아웃 및 타이포그래피 등 디자인 원리(2)

오늘은 어제 공부했던 레이아웃과 타이포그래피, 색상 이론 등을 고려하여 과제에 적혀있던실습을 진행했다.본격적으로 배우기 전에 적응용 과제라 내용이 구체적이지 않아서 자료를 찾아보면서 임의로 정해서 제작해보았다.​ 1. 실습 - 프레임 및 그리드 설정 1-1) 실습 단계Frame Tool(F)을 사용하여 기본 웹 페이지 사이즈(예: 1440×1024 픽셀)의 프레임 생성.프레임 선택 후 우측 속성 패널에서 “Layout Grid” 옵션을 활성화하고, 컬럼 그리드를 추가컬럼 수, 마진, 간격을 설정하여 기본 레이아웃(헤더, 콘텐츠, 푸터 등) 구분(참고자료의 디자인베이스 자료를 참고하여 값 입력함)컬럼 지정 후 사각형(R) 생성하여 헤더, 콘텐츠, 푸터 부분 등의 영역 지정​1-2) 실습 목표균형 잡힌 그리..

레이아웃 및 타이포그래피 등 디자인 원리(1)

오늘은 디자인을 할 때 빠질 수 없는 레이아웃과 타이포그래피에 대해서 알아보고자 한다.​균형 잡힌 디자인 표현을 위해서는 어떤 틀을 가지고 그 틀 안에 어떤 서체, 폰트로 구성되는지를 잘 고려하여야 한다. 전문적인 지식을 한 번도 정리해 본 적 없는데 이 기회에 정리하면서 배우는 시간을 가져야겠다!​ 1. 레이아웃 구성 원리1-1) 그리드 시스템(Grid System)정의 및 필요성- 레이아웃의 균형과 정렬, 간격을 체계적으로 관리하기 위한 기본 틀- 즉, 텍스트, 이미지, 버튼 등의 요소들을 일관된 패턴으로 정리하는 방식- 디자인의 일관성, 정돈된 느낌, 사용성을 높이기 위해 필수적- 반응형 디자인(모바일, 태블릿, 데스크톱)에서 유연한 조정 가능- 디자인 작업 속도 향상​기본 구성 요소- 컬럼(Col..

피그마(Figma) 기본 개념

오늘은 피그마에 대해서 알아보려고 한다.프로덕트 디자이너에 대해서 알아보면서 피그마는 프로덕트 디자이너에게 필요한 필수 프로그램으로, 다양한 장점을 가지고 있어서 실무에서 피그마를 주로 사용한다는 내용을 읽었다. 물론 프로그램은 지속적으로 변화하고, 다른 프로그램으로 시대의 흐름이 넘어갈 수도 있지만 현재 가장 많이 사용되는 프로그램은 피그마인 듯하니 최대한 빠르게 습득하도록 노력하자! 1. 피그마 소개1-1) 피그마란?클라우드 기반 디자인 툴인터넷이 연결된 환경에서 브라우저만 있으면 어디서든 사용 가능별도의 설치없이 협업이 가능하며, 실시간 저장 및 공유 기능 제공UX/UI 및 프로토타입 제작 도구웹 및 앱 UI 디자인, 인터랙션 디자인, 아이콘 제작 등 다양한 디자인 작업에 활용개발자와 협업 시 코드..

디자인의 기초 - 색상이론

오늘은 디자인의 기초 중 색상이론에 대해서 공부하고자 한다.색상은 디자인에서 가장 중요한 요소 중 하나로, 사용자의 감정을 유도하고 의미를 전달하며, 브랜드 아이덴티디를 형성하는 데 중요한 역할을 한다.색상 원리는 색의 혼합 방식, 색상환, 색의 관계, 색의 심리적 효과 등 다양한 개념을 포함한다. 0. 컬러란?빛의 파장에 대한 눈의 감각 반응으로, 우리가 사물을 인식하고 구별하는 데 중요한 역할색은 단순히 시각적인 요소가 아니라 감성, 분위기 ,의미를 전달하는 중요한 도구색상, 채도, 명도 3가지 속성 1.  색의 혼합방식: RGB 와 CMYK1-1)  RGB(Red, Green, Blue)디지털 화면에서 사용하는 색상 모델로, Red(빨강)+Green(초록)+Blue(파랑)을 조합하여 다양한 색을 만..

디자인의 기초 - 디자인 기본 원리

오늘은 디자인의 기본 원리에 대해서 정리하며 스터디하고자 한다.다른 것들도 분명 중요하지만, 프로덕트 디자이너에게 디자인 열량을 키우는 것은 매우 중요할 것이다. 내가 생각하고 분석한 내용을 시각적으로 표현하는 능력이기 때문에! 기본 원리들을 잘 숙지한다면 디자인을 더욱 효과적이고 매력적으로 만들 수 있게 해줄 것이다.  1. '디자인의 기본 원리'란? 디자인의 기본 원리란 디자인의 요소들간의 질서와 규칙을 이루어서 시각적인 부분을 미적으로 만드는 원리를 말한다.  1-1. 그렇다면 디자인의 요소란 무엇일까? 디자인을 구성하는 기본적인 시각적 요소를 말한다. 쉽게 말해, 디자인을 만들 때 쓰이는 기본 재료라고 볼 수 있음! 1) 주요 디자인 요소점(Point)가장 기본적인 디자인 요소로 모이면 선이 되고..