✅ 3월 10일 TIL
📅 오늘 한 일
🕘 9:00 ~ 10:00 디자인 카타 시즌 2 진행
🕙 10:00 ~ 20:00
- 'UI 디자인의 모든 것' 강의 자료 복습
- 'UX 기획 및 리서치' 1~2주차 강의 수강
- 과제 진행
💭 오늘의 회고
✅ 새로운 방식으로 진행되는 카타 <디자인 카타 시즌 2 시작＞
- 이번 시즌은 각 팀이 특정 UI 컴포넌트를 조사하는 방식으로 진행됨
- 첫 번째 시즌과 달리 주어진 UI 요소(리스트/카드 UI)에 대해 리서치 후 발표 예정
- 우리 팀: 리스트/카드 UI 분석
- 내 폰에 있는 앱 중 리스트 UI가 잘 적용된 사례들을 캡처하여 정리
🚀 강의 & 과제 진행
✅ 'UI 디자인의 모든 것' 강의 자료 복습
- 저번 주에 빠르게 들었던 내용을 다시 정리하며 복습
✅ 'UX 기획 및 리서치' 1~2주차 강의 수강
🎯 과제 진행 및 고민했던 점
✅ 📌 1주차 과제: 데이터를 기반으로 UI를 개선한 사례 찾기
- 잘 알려지지 않은 사례를 찾으려다 보니 난이도가 높았음
- 결국 이미 아티클로 정리된 사례를 선택하게 되어 아쉬움
- 작년 3학년 2학기 때 리디자인 프로젝트 경험이 있지만, 실무 프로젝트가 아니어서 개선 결과를 확인할 수 없었던 점이 아쉬움
- 사용성 테스트도 제한적인 시간 내에 진행해서 개념이 아직 어색함
✅ 📌 2주차 과제: 구인구직 서비스 개선을 위한 심층 인터뷰 질문지 작성
- 좋은 질문을 만드는 것이 가장 큰 부담
- 필요한 데이터를 정의하고, 효과적인 질문을 설계하는 연습이 더 필요하다고 느낌
- 결국 확신 없이 진행했지만, 연습 과정이라고 생각하고 경험을 쌓는 것이 중요
🎯 Keep / Problem / Try 분석
✅ Keep (잘한 점, 계속 유지할 부분)
- 강의 내용을 복습하며 UI/UX 기초 개념을 정리함
- 디자인 카타를 통해 다양한 UI 사례를 분석하는 경험을 쌓음
- UX 리서치 및 문제 정의 프로세스에 대해 고민하는 시간을 가짐
❌ Problem (어려웠던 점, 개선이 필요한 부분)
- 새로운 UI 개선 사례를 찾는 것이 어려웠음
- UX 리서치 개념이 아직 익숙하지 않음 → 사용성 테스트와 데이터 수집 과정이 어색함
- 좋은 인터뷰 질문을 만드는 것이 부담 → 질문 설계에 대한 경험 부족
💡 Try (개선 방안 및 실행 계획)
📌 UI 개선 사례를 찾을 때 다양한 채널 활용 (디자인 블로그, 논문, 컨퍼런스 자료 등)
📌 UX 리서치 실습을 직접 해보면서 사용성 테스트 경험을 늘리기
📌 인터뷰 질문 작성 연습을 자주 하면서, 피드백을 받아보는 과정 필요
📅 ‘UI 디자인의 모든 것’ 강의 정리 (모르는 것 위주로)
- 1주차
🖇️ 링크
- 웹에서 파란색이 일반적으로 링크를 나타냄.
- 링크된 텍스트에 밑줄을 넣어 클릭 가능함을 직관적으로 전달해야 함.
📖 가독성을 고려한 디자인
- 여백 활용 (화이트 스페이스)
- 화면에서 비어있는 공간을 의미하며, 가독성을 높이는 역할.
- 중요한 요소를 강조하고, 깔끔하고 정돈된 느낌을 줄 수 있음.
- 여백도 디자인 요소 중 하나이므로 너무 많은 콘텐츠로 채우지 않도록 주의해야 함.
- 콘텐츠 그룹화
- 가까운 요소들은 자연스럽게 하나의 그룹으로 인식됨.
- 비슷한 의미, 주제의 콘텐츠를 그룹화하여 사용자의 이해도를 높임.
- 리스트 콘텐츠는 여백을 활용해 그룹화하여 가독성을 높여야 함.
- 텍스트 콘텐츠 내에서 링크나 버튼을 분리하면 스크린 리더가 쉽게 위치를 파악할 수 있음.
🧭 직관적인 네비게이션
- 명확한 메뉴 구조
- 사용자가 예상 가능한 카테고리를 통해 정보가 어디에 있는지 쉽게 예측할 수 있어야 함.
- 일관된 메뉴 구조를 유지해야 사용자가 방향을 잃지 않음.
- 메뉴 Depth 최소화 → 사용자가 3번 이상 클릭하지 않고 원하는 페이지에 도달하도록 설계.
📱 터치 스크린 최적화
- 손가락으로 쉽게 누를 수 있도록 터치 영역 확보, 요소 간 적절한 간격 유지 필수.
- 버튼 및 아이콘 최소 사이즈
- iOS: 버튼 44px, 아이콘 44px
- Android: 버튼 48px, 아이콘 48px
- 2주차
1. 컬러 가이드
📖 주요 색상의 의미
- 빨강: 에너지, 열정적, 위험, 정지, 경고, 에러
- 주황: 친근함, 에너지, 보류, 경고
- 노랑: 활기, 즐거움, 희망, 낙천적
- 녹색: 자연, 균형, 긍정, 진행, 승인, 성공
- 파랑: 안정감, 신뢰, 성공, 비전, 정보
- 보라: 고급스러움, 우아함, 예술, 창조
- 검정: 고급스러움, 세련됨, 권위
- 흰색: 깨끗함, 심플함, 정직함, 맑음
📖 컬러 강조 원칙
- 채도 및 명도를 조절하여 특정 정보 강조
- 강조 영역 최소화하여 효과적으로 전달
- 컬러를 활용한 사용자 행동 유도
- CTA 버튼 강조 (주요 색상 적용)
- 로그인 및 회원가입 유도
- 중요한 정보 강조 (경고, 알림 등)
📖 컬러 비율 (5:25:70 법칙)
- 5%: 주색(브랜드 컬러)
- 25%: 보조색(조화를 이루는 컬러)
- 70%: 배경색(뉴트럴 컬러 활용)
📖 컬러 유형
- Primary Color (주색)
- 브랜드 아이덴티티 강조
- 주요 UI 요소 (CTA 버튼, 강조 텍스트 등)
- Secondary Color (보조색)
- Primary Color를 보완하며 조화롭게 구성
- 보색을 활용해 생동감 추가, 유사색을 활용해 안정감 제공
- Neutral Color (중립색)
- UI의 70% 차지, 배경 및 텍스트에 사용
- 주로 회색 음영 (화이트 ~ 블랙)
- Semantic Color (시스템 컬러)상태 및 피드백 전달 (예: 빨강-오류, 노랑-경고, 초록-성공)
📖 컬러 적용 시 고려사항
- 배경 vs 텍스트 대비 고려하여 가독성 유지
- 한 화면에서 컬러 과도 사용 지양 (사용자 혼란 방지)
- 형태와 면적에 따른 컬러 인식 차이 고려
- 면적이 넓은 배경: 색상이 연하게 보임
- 면적이 좁은 텍스트: 색상이 강하게 보임
2. 타이포그래피 가이드
📖 폰트 사이즈 가이드
용도폰트 사이즈(px)
| Title (제목) | 18 - 32 |
| Body (본문) | 14 - 18 |
| Caption (캡션) | 10 - 12 |
| Minimal (최소) | iOS: 11 / Android: 12 / Web: 14 |
📖 텍스트 계층 구조
- 타이틀 (제목)
- 가장 눈에 띄게 강조 (폰트 크기, 두께, 컬러 활용)
- 상단에 배치하여 시선 유도
- 서브 타이틀 (소제목)
- 타이틀보다 작고 본문보다 큼
- 위아래 여백을 두어 계층 구조 형성
- 본문
- 가독성을 우선하여 적절한 크기와 컬러 적용
- 너무 강조하면 계층 구조 붕괴
📖 행간 (Line Height) 가이드
- 타이틀, 서브 타이틀: 1.2 - 1.5배
- 본문: 1.6 - 2.0배
- 폰트 크기와 비례하여 행간 설정
📖 자간 (Letter Spacing) 조정 원칙
- 큰 폰트일수록 자간 축소 (시각적 균형 유지)
- 작은 폰트일수록 자간 확대 (가독성 향상)
3. 아이콘 가이드
📖 아이콘 스타일
- Outlined: 기본적인 선형 아이콘 (가장 많이 사용됨)
- Filled: 내부가 채워진 아이콘
- Colored: 상태 변화 피드백 제공
- Image: 높은 주목도가 필요할 때 사용
📖 아이콘 크기 및 비율
- 기본 사이즈: 24x24 px (트림 영역 기준)
- 라이브 영역: 20x20 px (작업 영역)
- 패딩: 상하좌우 2 px
📖 아이콘 크기 조정 가이드
- 원은 같은 크기의 사각형보다 작아 보이므로 1.12배 확대 필요
- 반대로 사각형은 크기를 0.88배 축소하여 균형 맞춤
- 아이콘 가로/세로 Constraints Scale 적용 필수
4. 디자인 시 고려 사항
🔹 컬러와 형태의 상관관계 고려
- 면적이 넓을수록 색상이 연하게 보임
- 작은 면적의 색상은 강하게 보일 수 있음
🔹 너무 많은 컬러 사용 금지 (일관성 유지)
🔹 텍스트 계층 구조 유지 (중요한 정보만 강조)
🔹 아이콘, 폰트 크기 및 행간 조정하여 가독성 극대화
- 3주차
1. 해상도 선정 기준
- 현재 스크린 점유율 기준으로 작업하는 것이 좋음.
- StatCounter를 활용하면 최신 점유율 데이터를 쉽게 확인할 수 있음.
- 2024-2025년 기준 점유율이 높은 해상도
- 안드로이드: 360×800
- iOS: 375×812
- 점유율을 기준으로 디자인할 해상도를 선정하는 것이 중요.
2. 그리드 시스템
1) 컨테이너(Container)
- 콘텐츠 폭을 감싸는 요소로, 제품 및 서비스의 성향에 따라 설정.
- 모바일 및 태블릿은 가로 너비가 좁기 때문에 컨테이너 너비를 넓게 설정하는 것이 좋고, 데스크톱은 자유롭게 설정 가능.
2) 컬럼(Column)
- 콘텐츠를 정렬하고 배치하는 역할.
- 일반적으로 사용하는 컬럼 개수 (절대적인 값은 아님)
- Mobile: 2~6 (보통 4컬럼)
- Tablet: 6~12 (보통 6컬럼)
- Desktop: 12~16 (보통 12컬럼)
- 콘텐츠 양이 많거나 레이아웃이 다양할수록 컬럼 개수가 많아지고, 단순한 레이아웃일수록 컬럼 개수가 줄어듦.
3) 거터(Gutter)
- 컬럼 사이의 간격.
- Mobile: 8~16px
- Tablet: 16~24px
- Desktop: 24~32px
4) 마진(Margin)
- 화면의 좌우 여백으로, 콘텐츠 너비(컨테이너) 결정에 중요한 요소.
- 페이지마다 일정한 마진 적용을 권장.
- Mobile: 16~20px
- Tablet: 20~36px
- Desktop: 24~36px
5) 그리드 설정
- **Grid Calculator**를 활용하면 컨테이너 크기에 맞춰 컬럼, 마진, 거터 값을 쉽게 계산할 수 있음.
3. 브레이크포인트(Breakpoint)
- 반응형 디자인에서 레이아웃이 변경되는 지점을 의미.
- 현재 가장 많이 사용되는 디바이스 해상도를 파악하고, 우리 서비스의 주요 사용자 환경을 고려.
대표적인 브레이크포인트
- Mobile: 0~599px
- Tablet: 600~1024px
- Desktop: 1024px~
* 12컬럼 그리드의 장점
- 반응형 디자인에 최적화된 구조.
- 2, 3, 4, 6 단으로 자유롭게 레이아웃을 나눌 수 있어 디자인과 개발이 편리.
- 4주차
✅ 공통 UI 요소란?
UI 디자인에서 여러 화면에서 공통으로 사용되는 요소를 컴포넌트로 만들어 일관성을 유지하고 효율성을 높임.
🔍 공통 요소를 찾는 방법
- 여러 화면에서 반복적으로 사용되는 UI 요소는 무엇인가?
- 동일한 스타일이나 동작을 가진 요소는 무엇인가?
🏗️ UI 요소의 구성 단계
1️⃣ 기본 요소 (Item)
- 가장 작은 단위의 UI 요소
- 예시: 칩, 아이콘, 라디오 버튼, 체크박스, 버튼 등
2️⃣ 조합 요소 (Module)
- 기본 요소를 조합하여 만든 UI 요소
- 예시: 카드(이미지+텍스트), 검색바(아이콘+입력 필드), Snackbar(텍스트+버튼) 등
3️⃣ 섹션 (Section)
- 조합 요소 + 조합 요소 + 여백(마진, 패딩)
- 예시: 네비게이션 바, 앱 바, 캐러셀, 탭, 리스트 등
🎨 컴포넌트 구성 방식
🔹 엘리먼트 (Element)
- 더 이상 쪼갤 수 없는 가장 작은 단위
- 예시: 컬러, 타이포그래피, 아이콘, 여백, 곡률, 그리드 등
🔹 컴포넌트 (Component)
- 엘리먼트를 조합한 UI 요소
🔹 합성 컴포넌트 (Compound Component)
- 여러 개의 컴포넌트를 조합하여 만든 요소
🔹 페이지 (Page)
- 합성 컴포넌트를 활용해 전체 화면을 구성
🏷️ 컴포넌트 네이밍 규칙
- 영문 네이밍 사용 (일관성을 위해)
- 직관적인 이름으로 구성
- 계층 구조를 반영하여 명명 (예: Button/Primary, Card/Product)
- 5주차
🟦
🟩클론 디자인
컴포넌트를 블록처럼 설계하면 확장성과 유지 보수가 용이
테트리스 블록처럼 빈틈없이 쌓는 것이 포인트
- 과제
'UIUX 내일배움본캠프 > CH 4 디자인 심화 주차' 카테고리의 다른 글
| 본캠프 36일차_TIL (0) | 2025.03.17 |
|---|---|
| 본캠프 35일차_TIL (0) | 2025.03.14 |
| 본캠프 34일차_TIL (0) | 2025.03.12 |
| 본캠프 33일차_TIL (1) | 2025.03.12 |
| 본캠프 31일차_TIL (0) | 2025.03.09 |
