내일배움캠프 UX/UI 24일차 TIL / 클론 디자인, UI 요소, 컴포넌트

2025.02.25

클론디자인, UI 요소, 컴포넌트

---

하루 계획

---

디자인 카타

• 저는 B를 선택했습니다.
• 저는 CTA 버튼과 배경의 색상대비를 결정하게 되는 기준이 중요도, 가독성이라고 생각했습니다. A는 제일 핵심이 되는 버튼을 눈에 잘 띄게 하는 것에 초점을 둔 것 같습니다. 색상 대비를 통해 버튼을 더욱 더 강조하여 사용자가 행동하게끔 유도하는 것 같습니다.
• B는 가독성에 초점을 둔 것 같다고 생각했습니다. 흰색 배경과 검정 글씨의 대비로 A보다 내용이 더 눈에 잘 들어오는 느낌이었다. A처럼 버튼이 확 눈에 띄지는 않지만 보통 사용자들은 행동하기 전에 어떤 것과 연관된 것인지 확인하기 때문에 가독성이 뛰어난 B를 선택했습니다.

다른 조원 분은

저는 B를 선택하셨다. a는 다크모드 같이 느껴져서 평소에 사용한다면 밝은 화면인 B를 사용할 것 같다고 하셨고 배경과 글씨의 대비는 3:1이 표준 권장 최소 수준이고, 4.5:1은 색상 결함, 낮은 시력이 있는 분들에게 적합하며, 7:1은 시력 손실이 있는 사용자에게 적합하다고 생각하셨다. 또한 검은색 배경의 흰 글씨는 홍채가 더 많은 빛을 받기 위해 피로가 느껴지기 때문에 A예시에는 배경의 대비색상이 낮아지는 것이 좋지 않을까 싶어서 B를 선택하셨다고 했다.

---

학습 목표

UI 디자인의 모든 것 1-5 강의 수강

UI 디자인의 모든 것 1-5 강의 과제 진행

수업 목표

UI 컴포넌트를 활용하여 화면 디자인을 설계할 수 있다.

화면의 구조를 이해하고 클론 디자인을 할 수 있다.

---

UI 클론 디자인

UI를 클로닝하면서 디자인 원칙, 컬러, 타이포그래피, 레이아웃 구성과 활용법 등을 학습할 수 있다.

또한 UI 구조를 분석하고 파악하는데 많은 도움이 되며, 트렌드를 분석하는 데도 좋다.

디자인 실력을 키우기 가장 좋은 방법이기도 하다.

 

UI 화면을 구성할 때는 큰 블록에서 작은 블록 순으로 설계하는 것이 핵심이다.

컴포넌트를 블럭처럼 쌓을 수 디자인 해야 확장성과 유지 보수가 원활하다.

 

반복되는 UI 찾기

기본 요소(item)

가장 작은 요소의 컴포넌트

칩, 아이콘, 라디오 버튼, 체크박스, 버튼 등이 있다.

 

조합 요소 (module)

기본 요소와 기본 요소가 합쳐지거나 기본 요소와 조합 요소가 합쳐진 형태

카드, 서치바, 스낵바 등이 있다.

 

섹션 (section)

조합요소와 조합요소, 여백이 합쳐진 형태

네비게이션 바, 앱바, 캐러셀, 탭, 리스트 등이 있다.

 

섹션

모듈

아이템

클론 디자인은 팀 프로젝트가 끝나면 마저 진행할 생각이다.

---

학습 경험

아쉬운 점, 어려웠던 점

아이템과 모듈을 구분하는 것이 헷갈렸다. 어디서부터 어디까지가 모듈이고 아이템인지 따로 공부해야겠다는 느낌을 받았다.

또한 잠을 많이 못자서 그런지 컨디션이 별로인 것 같았다.

 

개선 방향

잠을 푹 자고 아이템과 모듈 관련된 내용은 아티클이나 튜터님에게 질문하면서 답을 찾아갈 생각이다.

---

내일 할 일

팀끼리 소통

프로젝트 시작