요즘 트랜드인 다크모드디자인!
무조건 어둡기만하면 OK 일까요?
물론 절대 아니죠.
망하지 않는 다크모드디자인은 어떻게
만들어야할까요?
대비,색상,일관성 + 사용자선택
이것만 지키면 안망해요!!
데이모드보다 은근히 더 어려운
다크모드디자인!
어떻게하면 눈에도 좋고 집중도도 올라가는
똑똑한 다크모드디자인을 할수있을지
좀 더 자세히 알아볼까요?!
명확한 대비
다크모드에서는 텍스트와 배경간의
명확하고 확실한 대비가 중요해요!
어두운배경에 밝은 텍스트를 사용해서
글자를 읽기 쉽게 만들어야해요.
대비가 부족하면 가독성이 떨어지게되고
사용자 경험에 부정적인 영향을
끼치게 될 수 있습니다.
대비가 너~무 강하면 눈이 아프고,
너무 강하지 않으면 가독성이 떨어져요.
웹 콘텐츠 접근성 가이드라인(WCAG)
권장대비는 4.5:1 입니다 🙋🏻♀️
색상 선택
다크모드에서 사용 될 색상팔레트는
정말 신중하게 선택해야합니다.
어두운 환경에서도 정보를 명확하게
전달하기 위해서는 주로 밝은 색상이나
화려하고 팝하게 튀는 컬러를
사용해야해요! 그렇다고 너무 과해지면
눈이 피로해질수도 있으니까
적절한 조절은 필수겠죠?! 😘
이미지 및 그래픽 처리
이미지와 그래픽도 다크모드에 알맞게
조정이 되어야합니다.
밝은 배경에서는 잘 보이던
이미지나 그래픽도 어두운 배경에서는
잘 안보일수가 있거든요.
따라서 데이모드와 다크모드 둘다
고려해서 한쪽에서도 튀지않고
같은 느낌을 유지할 수 있는 컬러로
선택하시는게 좋아요 😁
UI 일관성
다크모드와 데이보드간의 일관성을
잘 유지해주어야 합니다.
사용자가 모드를 전환할때마다
UI가 뒤죽박죽이라면 사용자는 매우
혼란스러워지겠죠.
따라서 예시로 올려놓은 네이버처럼
모드가 변해도 같은 UI를 유지하여
사용자가 혼란스러워하지않도록
만들어주는게 중요해요!
사용자 선택 기능
사용자의 선호와 환경에 따라서
사용자가 직접 데이모드와 다크모드를
선택할 수 있도록 기능을 제공해야합니다.
어두울때는 다크모드가 편하지만
밝을때는 데이모드가 편할 수도 있으니까요.
사용자의 편의성을 위해서
다크모드는 꼭 데이모드와 함께
만들어주세요! 🙏🏻
다크모드디자인을 만들때 가장 중요한건
"컬러"입니다.
명확한 대비가 되는 컬러!
데이모드, 다크모두일때 모두
일관성을 유지할 수 있는 그래픽 컬러!!
아무리 예쁘고 구조가 좋아도
사용자가 읽고, 보지 못한다면
무용지물이니까요. 🥲
다양한 다크모드디자인의 사례를 통해
망하지않는 다크모드디자인!!
사용자의 눈건강과 집중도를 높여줄수있는
훌륭한 다크모드디자인
우리도 만들어봐요💕
출처: https://thdisld.tistory.com/entry/다크모드디자인-이렇게-만들면-망해요-😭 [디자이너 야니의 시크릿 박스♡:티스토리]