지난주 주말에 진행했던 원티드 클론 디자인 해설 강의를 보면서
섹션/모듈/아이템 분류랑 레이어 네이밍 부분에서 잘못된 부분이 뭐가 있었는지 복기하는 시간을 가졌다.
아마 네이밍을 잘 못하는 초보라면 나같은 실수를 할 수 있다고 생각해서 꼼꼼하게 적어뒀다.
왼쪽이 내가 진행한 작업물이고, 오른쪽이 해설 강의를 보면서 다시 정리한 것이다.
틀렸던 부분은 빠르게 확인이 가능하도록 빨간색으로 표시를 해두었다.
섹션 부분에서 네이밍을 헷갈렸던 부분은 바로 아래 사진의 action bar와 shortcut이다.
나의 경우 action bar는 section_banner_promotion(배너인 줄 알았다.),
shortcut은 section_quick_menu으로 해두었다.(바로가기를 직역한 느낌? shortcut이라는 용어를 사용해도 되는지는 몰랐다. 숏컷이라는 단어는 게임에서나 사용하는 줄...)
이 부분의 경우 배너라고 이름은 지어놨지만 정확하게는 section_banner_carousel이라고 지어놨었다. 캐러셀이라는 네이밍은 섹션이라고 구분하기보다는 모듈에 들어가는 게 맞지 않나 싶다.(리스트가 모듈이니까)
그리고 캐러셀과 리스트라는 단어의 의미가 좀 헷갈려서 개인적으로 검색을 해서 나름대로 정의해보았다.
캐러셀(Carousel)
- 여러 콘텐츠를 하나의 영역에서 좌우로 전환하며 보여주는 UI 패턴( 가로 스와이프 기반)
- 한 번에 보이는 콘텐츠 수가 제한적
- 인디케이터(dot)가 있는 경우도 있음.
- 히어로 섹션의 배너(프로모션 등), 카드 캐러셀
리스트(List)
- 아이템을 한 방향으로 연속 배치해 스크롤로 탐색하는 UI
- 세로 스크롤이 기본 (모바일)
- 사용자가 한 번에 많은 정보를 인지 가능 (콘텐츠 양이 많아도 안정적)
- 채팅 목록, 게시글 목록 등
간단히 정리해보자면 가로 스냅형은 캐러셀, 정보 탐색용 세로 스크롤은 리스트라고 생각하면 편할 듯 하다...
아무래도 과제를 하면서 제일 긴가민가한 부분이 많았던 것이 이 모듈 요소를 구분하는 것이 아닐까 싶다.
카드를 모듈에 넣어야 하나? 아이템에 넣어야 하나? <-이 고민으로 이미지를 여러번 쪼개보았었다. 정답 해설처럼 나눈 적도 있었지만 결국에는 틀린 선택지를 골랐다...😂😂
이 고민을 왜 했냐면
1. 카드를 보면 텍스트와 아이콘, 뱃지가 합쳐진 카드 모양도 있는데, 이 경우에는 카드가 모듈이라고 생각했고(왜냐하면 나는 모듈은 여러 아이템으로 이루어진 합성 컴포넌트라고 생각했기 때문)
2. 그러면 카드가 모듈이면 카드 리스트는 섹션이 되는 건가?라고 생각했다.
3. 또 그리고 카드 아이템에 썸네일 부분은 아이템 요소가 확실하니까 카드랑 썸네일이 같이 아이템에 속해도 되는 건가?
->그래서 결국에 하나의 카드가 모듈이 된다고 생각했던 것이었다...
아무튼 action bar와 shortcut list의 부분은 앞에서 다뤘으니 넘어가고, 카드 리스트가 나오는 콘텐츠 부분을 크게 캡쳐해서 가져왔다.
나의 경우 section header은 그냥 title이라고 이름 붙였다. 리스트 부분은 card라고 정의하면 된다.
이 사진은 내가 나눠본 아이템 요소다. 굉장히 간단하게 정리했었다. 글 요소는 그냥 label or text라고 생각했다.
나름 이미지에다가 네이밍을 하나하나 하긴 했는데, 정답과는 꽤 다른 부분도 있고 해서 캡쳐해왔다.(뭐가 다른지는 아래서 설명)
🟢은 상위 요소이고, 아무것도 안 붙은 텍스트는 아이템 네이밍이다.
상위 요소 > normal card, section header, view all button > normar card의 요소로 생각하면 쉽다.
전체보기가 버튼이라고 생각하긴 했는데, 뭐라고 정의하기가 헷갈려서(그냥 text button인가?라고 생각함) view all button이 좋은 네이밍이라고 생각했다.
normal card의 요소들은 앞에다가 카드 네이밍/아이템 요소로 정의하면 좋은 것 같다.
카드 위에 올라가는 텍스트는 썸네일 오버레이 라벨이라고 지어주고, 타이틀 아래 글씨는 body가 아니라 label로 지어두면 된다.
위에 카드 아이템 요소와 비슷하게 헷갈렸던 부분이다. 숏컷 리스트 아래 숏컷 아이템이 들어있고, 또 숏컷 아이템이 각각의 아이콘과 라벨로 나누어진다.
그래서 네이밍은 icon/shortcut/아이콘 요소로 지으면 된다.
나는 이게 graphic이라고 이름 붙였는데 이것도 그냥 아이콘이라고 네이밍하면 된다!
컬러 스타일 분석에서는 atomic color와 semantic color의 용어에 대해 처음 알았던 것 같다.
항상 디자인 시스템을 볼 때 저렇게 팔레트로 해놓고 숫자로 네이밍하는게 관행인가? 했었는데, 아토믹 색상으로 정리할 때는 명도에 따라서 숫자 단계로 정의한다고 한다. 컬러 네이밍도 그냥 일반적으로 하는 경우도 많다.
시맨틱 색상은 ui 요소의 기능에 따라 색상을 정의하는 이름이다. 역할에 따라서 이름을 정한다고 생각하면 편하다. 우리가 주로 알고 있는 프라이머리, 라인, 텍스트 등등으로 나눌 때 사용하는 컬러 시스템이라고 보면 된다!
또 아이콘 네이밍을 할 때에는 지금 Icon/Navigation/career이라고 되어있는데, 이거는 icon 폴더 안의 navigation 폴더 안의 career이라는 뜻이라고 정의한 거여서 이렇게 네이밍을 지어주어야한다.
근데 나는 네이밍을 할 때 스네이크 표기법에 따라서 icon_navigation_career이라고 지어줘야하나...? 라고 생각했는데
icon
└ navigation
└ career
이런식으로 파일 구조가 되도록 지으면 될 것 같다.
오른쪽 사진처럼 경로에는 슬래쉬(/)를 넣고 더 쪼개지지 않는 부분에만 스네이크 표기법으로 job_postion 이렇게 나눠주면 될듯하다! 분명 튜터님 과제 발제 영상을 봤었는데 나는 왜 다 언더바를 넣고 있었지.. 흑...ㅠ
그리고 나서 컴포넌트 만드는 설명을 들었다.
이때 shortcut item의 가로값이 87.75로 소수값으로 되어있는데, 이건 가변 영역값이라서 이런 경우에는 수치가 꼭 8의 배수로 해주지 않아도 된다고 한다.
너무 개인과제에만 치중되는 것 같아서 디자인 입문 강의도 조금 들었다.
자주 사용되는 UX/UI 디자인 패턴
- 온보딩
- 로딩
- 검색
- 회원가입
- 리스트
- 카드
- 캐러셀
이렇게 7개가 있는데, 온보딩에서 조금 몰랐던 개념 정리가 있어서 정리한다.
온보딩은 3가지 종류가 있다.
1.튜토리얼
2.가치 보여주기
3.개인화 설정하기
내일은 오전 10시에 피드백 시간이 있어서 최대한 개인과제 해설에 없는 내용을 질문할 수 있도록 준비해둬야겠다...
빨리 마치고 2주차 개인 과제로 넘어가야겠다!!!
'내배캠 TIL' 카테고리의 다른 글
| aeiou 분석, 어피니티 다이어그램 이어서 (TIL 13일차) (3) | 2026.01.15 |
|---|---|
| 과제 피드백, AEIOU 분석, 어피니티 다이어그램 진행(TIL 12일차) (3) | 2026.01.14 |
| UX/UI 이론 정리(TIL 10일차) (3) | 2026.01.12 |
| 실습! 그리고 클론 디자인 시작(TIL 9일차) (3) | 2026.01.09 |
| 넷플릭스 클론 디자인(TIL 8일차) (3) | 2026.01.08 |