[인프런 워밍업 스터디 클럽 1기 디자인] 3주차 발자국 (신영우)

학습 내용

복습을 위해 이번 주에 필기한 강의 내용을 갈무리했습니다

베리어블 모드를 사용하는 경우

라이트 모드 / 다크 모드로 설정이 나눠져 있을 경우
다중 언어 지원이 필요할 경우
디바이스별 대응이 필요할 경우
멀티브랜드 대응이 필요할 경우

라이트 모드 / 다크 모드

→ 빛, 배터리, 인지 능력과 관련되어 있음

라이트 모드
- 평범한 사람들은 훨씬 퍼포먼스가 좋음
- 긴시간 노출될 경우 근시 확률이 높아짐
다크 모드
- 빛이 덜 발산해서 배터리가 덜 듦
- 저시력자의 경우 다크 모드를 선호함
단, 서비스에 따라 다름
- 상품 또는 콘텐츠가 돋보여야 하는 경우(ex. 이커머스, F&B 서비스)에는 라이트 모드 지향
- 몰입형 미디어를 제공해야하는 경우(ex. OTT 서비스)에는 다크 모드 지향
플랫폼 마다 다크 모드 디폴트 배경색이 다름 (→ 그림자 등 디자인 에셋에 영향을 끼침)
- AOS → 짙은 회색 (#121212)
- iOS → 완전한 검은색 (#000000)

다크 모드 설정 시 주의할 점

브랜드 아이덴티티 고려
접근성 고려
- 특히나 명암 대비
  - 디자인 요소 - 3:1
  - 일반 텍스트 - 4.5:1
  - 작은 텍스트 - 7:1
지속적인 테스트로 수정 가능성 고려

발견한 설계 꿀팁

기존 컴포넌트 사용해서 새로운 컴포넌트 만들 시 오토 레이아웃이 아닌 그룹으로 만들어주면 불린을 적용할 때 영역을 차지하지 않음

사이즈 조절할 때 백터 에셋도 같이 조절하려면 백터 컨스트레인을 Scale로 변경해주면 됌

Command+R로 레이어 라벨링할 때 숫자의 경우 ’nn’ 앞에 ‘n’ 지워주면 1자리 수로 적용할 수 있음

네스트 인스턴스 적용할 때 스페이스바 사용해서 한번에 검색해 여러개를 동시에 적용할 수 있음

그룹을 먼저 적용하고 오토 레이아웃을 하면 자동으로 잡히는 영역없이 오토레이 아웃을 할 수 있음

미션 내용

회고를 위해 이번 주에 진행한 미션 내용을 톺아봤습니다

미션 #9 - 피드백 컴포넌트 전체 만들어보고 색상 대비 점검을 하기
미션 #10 - 네비게이션 카테고리에 해당하는 컴포넌트를 만들어 보기
미션 #11 - 네비게이션 카테고리에 해당하는 나머지 컴포넌트를 만들어 보기
미션 #12 - 베리어블 다크모드 개념을 익히고 활용해보기

이번 주 드디어 모든 컴포넌트 작업을 마치고 다크 모드 적용에 들어갔다!

컴포넌트 만드는 과정을 돌이켜보면 프로그레스바 만드는 미션이 가장 재밌었다.
1도 예상치 못한 기발한 방법으로 프로그레스바를 만들며 피그마가 얼마나 잘 되어있는 툴인지 새삼 깨달았다.
다른 컴포넌트를 만들 때도 적용할 수 있을 것 같아 절대 까먹지 않고 기억해두려 한다.

다크 모드 적용은 컬러 콘트라스트를 체크해 시멘틱 컬러 베리어블을 다듬는 과정이 꽤나 어려웠다.
라이트 모드에서 하나의 모드가 더 생겼을 뿐인데 관리할 포인트가 무진장 많아진 느낌이다...
나중에 고생하지 않으려면 시스템은 초반부터 잘 만들어야 함을 다시금 깨닫는 순간이었다...!

다크 모드는 실제로 처음으로 적용해 보는데 계획하는 단계가 잘 이해가지 않는다.
(나중에 혼자 할 수 있을까 걱정이다...ㅠ)

다음 주면 막 주다!
드디어 기다리고 기다렸던 실제 화면 만들기에 들어간다.
지금껏 꽤나 오랜 시간 공들여 만들어온 컴포넌트를 신나게 사용할 때가 다가온 것이다...이 말이다...

막주까지 잘 달려서 모든 미션 완수하자! 화이태ㅐ애애애앵~!!

스스로 칭찬하고 싶은 점 :
1) 아이콘 시스템 수정 필요한 부분들 수정한 점
2) 타이포 그래피 시스템 행간 수정해서 스타일 가이드까지 적용해 놓은 점
아쉬웠던 점 :
1) 컬러 콘트라스트를 체크해 최대한 모든 부분을 수용할 수 있도록 수정했지만, 어쩔 수 없이 대비가 미미한 부분이 존재하는 점
2) 다크 모드에서 눈물을 머금고 넘어가야하는 디자인 에셋(ex. 스켈레톤 UI)이 존재하는 점
보완하고 싶은 점 : 프리미티브 컬러를 수정해보고 싶다...!
다음주 목표 : 지금 처럼 킵 고잉해서 모든 미션 완료하기~!~!!