아토믹 디자인과 합성 컴포넌트의 형태

Atomic design

화학적 관점에서 영감을 얻은 디자인 시스템

출처:  https://atomicdesign.bradfrost.com/chapter-2/#the-part-and-the-whole

• 원자(atom): 가장 작은 단위 컴포넌트(도형, 텍스트, 색상, 아이콘 등) / 파운데이션
• 분자(molecules): 2개 이상의 원자를 합친 컴포넌트(input, 내비게이션, 카드, 등) / 컨테이너
• 유기체(organism): 분자 혹은 분자와 원자를 결합함(헤더, 카드를 담고있는 전체 프레임 등)
• 템플릿(Templetes): 여러 유기체의 집합으로 여러 카드, 그리드를 묶는 컴포넌트(헤더, 메인, 푸터)
• 페이지(Page): 완성된 하나의 페이지

atom, molecules, organism 의 예시

네이버 홈 화면

ㄴ 유기체와 템플릿의 차이는 모호한듯

 

합성 컴포넌트: 대부분 버튼 컴포넌트에 파운데이션 혹은 컴포넌트가 합쳐진 형태(다이얼로그, 리스트, 카드 등)

 

팝업의 종류

팝업: 새로운 페이지가 열림

윈도우 팝업: 브라우저 창

ㄴ 최근에 잘 안씀 - 데스크탑은 팝업이 떠도 페이지를 닫으면 되지만 모바일은 화면전환으로 이탈율이 발생하기 때문

레이어 팝업: 현재 화면에서 컴포넌트를 보여주는 방식

윈도우 팝업 / 레이어 팝업

모달: 화면의 인터렉션을 막는 기능 / 강제적으로 기능을 멈추고 특정 행동 전까지 풀어주지 않음

라이트 박스: 검은색 오버레이

ㄴ 대부분 모달에 라이트 박스를 적용하는거 같다.

 

모달 UI 설계 시 주의사항

• 보통 라이트박스 혹은 닫기 버튼 누르면 이전 화면을 보여주는게 일반적인 방법
• 그러나 중요한 선택 혹은 내용 작성시에는 라이트박스를 눌러도 꺼지지 않도록 해야함

보통의 경우 라이트박스 클릭 시 이전 화면으로 이동 / 중요한 정보 입력 시 라이트박스 잠금

 

다이얼로그: 사용자가 선택한 행동을 여러한 형태로 확인하는하는 컴포넌트

ㄴ 합성 컴포넌트, 모달의 속성을 지님

얼럿: 사용자가 선택한 행동을 하나의 선택지로 확인하는 컴포넌트

토스트(스낵바): 하단 혹은 상단에 간단한 문구 표시

다이얼로그의 형태

다이얼로그와 얼럿 / 토스트(스낵바)

 

컨트롤 컴포넌트의 개념

• 다른 선택지를 특정할 수 있도록 하는 요소
• 여러 선택지 중 사용자가 원하는 것을 고를 수 있도록 도움

컨트롤 컴포넌트의 종류

• 체크박스: 중복 선택 가능
• 라디오 버튼: 한가지만 선택
• 스위치(토글)
• 슬라이더

체크박스 / 라디오 / 스위치(토글) / 슬라이더

 

- 컨트롤 요소의 터치 영역은 그 주변의 최소 크기로 만들어야 됨

- 또한 라벨(텍스트)와 같이 쓰이므로 라벨과 같이 컨트롤 요소를 묶어서 사용

- 간격을 충분히 줘야됨

컨트롤 요소와 라벨의 높이값을 같게 해야됨 - 24px 추천

라벨(텍스트) = 폰트값x행간

ㄴ 폰트 16px, 행간 150% = 24px

 

체크박스

체크 박스를 24px로 하기로 했다면 실제 클릭 범위는 24px, 체크박스의 이미지 크기는 20px로 시각적 보정을 해야함

ㄴ 라벨(텍스트)과 시각적 크기 차이가 나기 때문 / 라벨(텍스트)의 시각적 높이값는 16px(폰트값)

 

라디오버튼

- 라디오는 여러개 동시 선택 불가

- 반드시 선택되어 있어야 함

ㄴ 기본값을 유저가 가장 선호하는 버튼으로 선택해 둠