thinkuser 님의 블로그

제로베이스 94일차 학습노트이다.오늘은 컴포넌트 디자인의 ETC 두번째, 세번째 수업이었다. 앞서 앱바, 탭부터 시작해서 리스트에 이르기까지 다양한 컴포넌트들을 Sketch에서 작업해보았는데, 화면을 구성하는 가장 기본 단위라고 볼 수 있는 컴포넌트들을 잘 배울 수 있어서 좋았다.오늘의 강의 내용1. ETC(2)스낵바는 사용자가 수행한 작업에 대해 간단히 피드백을 제공하는 역할을 하는 컴포넌트다. 오늘 수업에서는 스낵바의 위치, 색상, 텍스트 정렬 방식 등을 중심으로 실습을 진행했다. 하단 중앙이나 좌측에 배치되는 기본 형태를 그려보고, '재시도' 버튼처럼 간단한 액션이 포함된 형태도 만들어보았다.스낵바는 잠시 나타났다가 사라지는 특성상 사용자에게 필요한 정보를 짧고 명확하게 전달해야 하기 때문에, 정보..

제로베이스 93일차 학습노트이다.오늘은 컴포넌트 디자인 수업의 마지막 파트로, 지금까지 배운 내용을 정리하고 응용해보는 ETC 실습을 진행했다. Cards, Lists 외에도 실제 인터페이스에서 자주 쓰이는 다양한 컴포넌트들을 직접 구성해보는 시간이었다.오늘의 강의 내용1. ETC먼저 다이얼로그(Dialog) 컴포넌트를 만들어봤다. 다이얼로그는 사용자에게 중요한 정보를 전달하거나 확인을 요청할 때 사용되는 UI 요소인데, ‘Two-line dialog header’라는 이름처럼 제목과 부제목이 들어가는 기본형을 제작했다. 타이포그래피의 계층 구조, 버튼의 정렬 방식, 그림자와 여백 설정까지 꼼꼼히 다뤄봤다. 배경을 반투명하게 설정하여 포커스를 유도하는 기법도 함께 실습했다. 그다음으로는 이미지와 텍스트,..

제로베이스 92일차 학습노트이다.오늘은 컴포넌트 디자인 수업의 일환으로 Lists와 인터렉션을 공부하는 팁에 대해 배웠다. 이전까지 버튼, 카드, 내비게이션처럼 시선을 끄는 컴포넌트를 주로 다뤘다면, 리스트는 보다 기능적인 UI 구성요소였다. 하지만 앱이나 웹에서 리스트는 정보를 나열하고 전달하는 데 있어 매우 핵심적인 요소이기 때문에 이번 강의는 단순함 속에서도 얼마나 섬세한 설계가 필요한지 느낄 수 있었다. 특히 사용자가 리스트를 쉽게 읽고 이해할 수 있도록 구성하는 것이 얼마나 중요한 UX 요소인지를 체감할 수 있었다.오늘의 강의 내용 1. Lists리스트는 여러 항목을 정렬해서 보여줄 때 사용하는 기본적인 컴포넌트다. 실습에서는 Sketch를 활용해 리스트의 다양한 변형을 디자인해보았다. 단순히 ..

제로베이스 91일차 학습노트이다.오늘은 Sketch의 Cards의 두번째 수업과, 프로토파이의 프로토타이핑 툴 소개 수업을 들었다. 스케치의 경우 전에도 배웠던 디자인 요소들을 툴만 바꿔서 실습하는 것이다 보니 조금 지루한 감이 없지않아 있었다. 그래서 계속해서 프로토파이 실습과 같이 듣고 있다. 모바일 디자인에서 가장 주요하게 사용되는 카드 모듈 디자인의 실습이라서 더 많이 연습할수록 좋다는 마음가짐을 가지고 임했다.오늘의 수업 내용 1. Cards (2)두 번째 카드 강의에서는 이미지와 텍스트, 아이콘이 함께 들어가는 좀 더 복잡한 카드 디자인을 실습했다. 특히 썸네일 이미지와 텍스트가 나란히 배치되는 리스트형 카드, 그리고 이미지를 크게 보여주는 타입 등 다양한 형태를 만들어보았다. 텍스트는 보통 ..

제로베이스 90일차 학습노트이다.오늘은 Sketch에서의 컴포넌트 디자인 중 Cards에 대해 배우고, Protopie라는 툴을 통해 간단한 프로토타이핑 실습도 진행했다.계속해서 Sketch의 실습을 하다보니 새로운 것을 한번 해보고 싶어서, Protopie의 툴 강의 첫 강의를 들어보았다.오늘의 강의 내용 1. Cards카드는 콘텐츠를 그룹화하고 정보를 시각적으로 정돈하는 데 자주 사용되는 컴포넌트이다. 실습에서는 Sketch를 사용하여 다양한 카드 레이아웃을 구성해보았다.사진 속 카드 구성은 다음과 같다.상단에 제목(Title)과 보조 텍스트(Secondary text)를 배치우측에는 작은 썸네일 또는 아이콘 영역하단에는 두 개의 액션 버튼(Action 1, Action 2)을 배치이미지 카드에서는 ..

제로베이스 89일차 학습노트이다.오늘은 Sketch 툴을 활용하여 컴포넌트 디자인 중 버튼(Button)과 플로팅 액션 버튼(FAB)에 대해 학습했다. 버튼은 사용자 인터페이스에서 가장 보편적으로 사용되는 요소로, 다양한 형태의 버튼을 실제로 구성해보고 디자인 가이드라인에 따라 레이아웃을 설계해보는 실습을 진행했다. 또한 FAB는 핵심 액션을 강조하는 요소로, 화면 내에서 어떻게 시각적으로 강조할 수 있을지 고민해보는 시간이 되었다.오늘의 강의 내용 1. ButtonsSketch를 활용해 다양한 유형의 버튼을 구성해보았다. 실습에서는 기본 버튼부터 시작해, 아이콘이 포함된 버튼, 외곽선으로만 구성된 아웃라인 버튼, 그리고 배경 없이 텍스트만 들어간 텍스트 버튼까지 다양한 스타일의 버튼을 디자인했다. 특히..

제로베이스 88일차 학습노트이다.오늘은 Sketch에서의 컴포넌트 디자인 중 Navigation Drawer와 Bottom Navigation에 대해 배웠다. 두 컴포넌트 모두 앱 내 탐색 흐름을 구성하는 데 필수적인 요소이며, 모바일 UX 디자인에서 빈번하게 사용되는 패턴이라는 점에서 중요한 강의였다.오늘의 강의 내용1. Navigation DrawerNavigation Drawer는 주로 왼쪽에서 슬라이드되어 나타나는 사이드 메뉴로, 사용자가 앱의 주요 섹션을 쉽게 탐색할 수 있도록 도와준다. 오늘 실습에서는 햄버거 메뉴 아이콘을 눌렀을 때 열리는 구조를 가정해 사용자 프로필 정보, 메뉴 리스트, 하단 로그아웃 버튼이 포함된 내비게이션 드로어를 디자인해보았다.드로어의 레이아웃은 세로 스크롤을 고려하여..

제로베이스 87일차 학습노트이다.오늘은 Sketch에서의 컴포넌트 디자인 챕터 중 App Bars(앱 바)와 Tabs(탭)에 대한 실습 수업을 진행했다. 화면 구조에서 자주 사용되는 핵심 UI 요소들을 직접 디자인해보며 Sketch의 심볼 활용 방식과 모바일 환경에서의 UI 설계 감각을 익히는 시간이었다.오늘의 강의 내용 1. App BarsApp Bar는 모바일 UI 상단에 위치하며, 주로 앱의 타이틀, 내비게이션 아이콘(예: 메뉴 버튼), 액션 아이콘(예: 검색, 공유 버튼) 등이 포함되는 요소이다. 오늘 실습에서는 가장 기본적인 구조의 앱 바를 만들어보며, 타이틀 텍스트를 중앙 정렬하고 좌측에는 햄버거 메뉴 아이콘, 우측에는 검색 및 공유 아이콘을 배치해보았다.이러한 구성은 사용자에게 명확한 정보 ..

제로베이스 86일차 학습노트이다.오늘은 Sketch에서의 컴포넌트 디자인과 라이브러리 구성에 대해 배웠다. 반복적으로 사용되는 UI 요소를 효율적으로 관리하고, 여러 파일과 프로젝트에 걸쳐 일관된 디자인을 유지하는 방법을 이해하는 수업이었다.오늘의 강의 내용 1. 컴포넌트 디자인Sketch에서 컴포넌트는 일반적으로 심볼(Symbol)을 활용해 구성되며, 하나의 요소를 여러 화면이나 페이지에 반복 사용하도록 만든다. 오늘 수업에서는 버튼, 카드, 탭바, 내비게이션 등 다양한 컴포넌트를 직접 설계하며, 심볼로 저장하고 다양한 화면에 배치해보는 실습을 진행했다.특히 Sketch에서는 심볼 내에서도 오버라이드 기능을 통해 텍스트, 아이콘, 색상 등을 각각 다르게 설정할 수 있어, 하나의 심볼로 다양한 변형 컴포..

제로베이스 83일차 학습노트이다.오늘은 macOS 기반의 UI 디자인 툴인 Sketch의 기본 인터페이스에 대해 학습했다. Sketch는 벡터 기반의 화면 설계에 특화된 툴로, 그동안 익숙했던 XD와는 다소 다른 구조와 구성 방식이었지만 인터페이스를 직접 다뤄보며 차이점과 특장점을 이해하는 시간이 되었다.오늘의 강의 내용 1. Sketch의 인터페이스Sketch의 화면은 상단 툴바, 좌측 패널, 캔버스, 우측 속성창으로 구성되어 있다. 상단 툴바에는 도형, 텍스트, 아트보드, 심볼 삽입 등 핵심 기능들이 아이콘 형태로 나열되어 있으며, 자주 사용하는 기능을 개인 설정으로 구성할 수도 있다.좌측 패널은 레이어 구조와 페이지 관리를 담당한다. XD와 마찬가지로 아트보드 안의 요소들은 계층 구조로 정리되며, ..