오늘은 UI 엘리먼트 종류 중 몇 개를 선정해 디자인 스타일 레퍼런스를 찾아보았다.
내가 선정한 요소는 Card, Empty State, Progress Indicator, Search Input, Toggle인데 한번 해 보고 나니 생각보다 배울 점이 많고 유용한 것 같아 다른 요소들도 더 찾아보고 싶다!
주된 목표는 나중에 직접 UI를 디자인할 때 헤매지 않게 다양한 스타일을 눈으로 익히고 수집하는 것이다.
단순히 예쁜 UI만 수집하기보다
- 사용자 경험에 긍정적인 영향을 주는 디자인
- 실제 서비스에서 활용도가 높은 패턴
- 개인적으로 시도해보고 싶은 디자인 스타일
을 기준으로 레퍼런스를 수집했다.
(참고한 사이트)
오늘 배운 점
1) 나는 카드디자인을 되게 좋아한다.ㅋㅋ
다양한 이펙트가 들어간 카드도 좋지만 무채색+타이포 만으로도 깔끔하고 완성도가 느껴지는 디자인을 할 수 있으면 좋겠다.
좋은 타이포와 레이아웃을 가진 UI를 클론으로 만드는 연습을 많이 하면서 감을 익혀야겠다고 생각했다.
2) empty state UI가 흥미로웠다. 그저 콘텐츠가 없다는 정보를 전달하는 게 왜 하나의 엘리먼트 요소로 들어가는지 이해가 잘 안 됐는데, 그 이유를 알아보고 싶어 이 카테고리를 선정했다. 결과적으로 확실히 알게 되었다! 대부분의 empty state 화면에서는 데이터가 없다는 사실만 전달하는 것이 아니라 사용자의 다음 행동을 유도하고 있었다.
직접적으로 버튼을 배치하거나 안내 문구를 통해 행동을 제안하기도 하고
“아직 항목이 없습니다.", “첫 항목을 추가해 보세요.”
같은 문구를 사용해 부정적인 느낌을 줄이고 자연스럽게 다음 행동을 유도하는 점이 인상적이었다.
3) 이 과정에서 UX Writing의 중요성에도 관심이 생겼다.
검색창의 placeholder 문구 역시 단순한 안내 문장이 아니라 사용자의 행동을 돕는 UX 요소라는 점을 느꼈다. 검색창을 열었을 때 무엇을 검색하려 했는지 순간적으로 떠오르지 않는 경험이 종종 있는데, 이때 placeholder 문구가 사용자의 이탈을 막고 생각을 떠올리도록 도와주는 힌트가 될 수 있다는 점이 흥미로웠다.
'부트캠프 > 학습일지' 카테고리의 다른 글
| [GA01-2] GA 데이터 분석 기초 (0) | 2026.05.04 |
|---|---|
| [GA01-1] 구글 애널리틱스 시작하기 (0) | 2026.04.30 |
| [Day17] 디자인 시스템과 아토믹 디자인 (2) | 2026.03.24 |
| [Day10] 피그마 실습 (0) | 2026.03.12 |
| [Day2] 시각의 3요소 (0) | 2026.02.27 |