메인으로 가기
해당 프로젝트는 PC만 대응합니다.
사용자 환경 70%를 대응할 수 있는 1280px 그리드로 잡고 작업을 했습니다.
Default
Display Size 1920x1080px (1903x975) Container 1280px Container sub padding 48px
*그리드 안에 맞추기 어려운 페이지의 경우, 전체 화면에 padding 48px을 기준으로 작업합니다.
Container 안 양쪽 padding은 40px로 적용합니다.
Gutter는 24px로 적용합니다.
Grid Column은 12개로 지정합니다.
Column 78px
Gutter 24px
container안에 맞춰 레이아웃을 잡습니다.
해당 프로젝트는 모노톤을 위주로 작업합니다.
로고의 컬러를 primary와 secondary로 지정했지만, 클라이언트의 요청으로 gray scale을 주 컬러로 사용합니다.
point컬러는 최대한 많이 쓰지 않고 작은 부분에 포인트로서 작용할 수 있도록 합니다.
로고 컬러인 #595757을 **Primary**로 지정한 후 다양한 state에 적용을 위해 variation합니다.
**Secondary**는 #EFEFEF로 지정합니다. Gray tone과 겹쳐야 하는 요소에 적용합니다.
Point 는 면적이 작은 부분이나, 어두운 배경에서 포인트로 사용합니다.
Black,Gray 위주로 작업 하기 위해 Gray Scale을 9단계로 나눴습니다.
Gray Scale은 Primary 컬러와의 차이를 두기 위해 붉은 계열의 블랙이 아닌 **green과 orange쪽의 블랙**으로 사용합니다.
해당 프로젝트에서 Black은 **Gray900**을 사용합니다.
Gray Scale과 White 구분을 위해 White opacity 단계를 지정합니다.
해당 프로젝트에서 **white(#FFFFFF)**는 **white100**을 사용합니다.
처음엔 국제적으로 표준화 되어있는 시스템 컬러를 지정했지만 Alert 디자인이 변경됨에 따라 어두운 배경에서 텍스트가 잘 보이지 않는다는 피드백이 있어 자체적인 컬러로 수정했습니다.
기존 시스템 컬러
변경된 시스템 컬러
밝은 배경, 어두운 배경 모두에서 최대한 가독성이 좋도록 명도가 높고 형광끼가 도는 컬러들로 수정했습니다.
시스템 컬러도 한가지 색상만 쓰기에는 제한적일 것 같아 variation하여 6단계로 구분했습니다.
왼쪽부터 차례대로 **D01,D02,default-color-name,L01,L02,L03**로 네이밍합니다.
해당 프로젝트는 가독성을 위해 한글에는 기본적인 고딕체인 **Noto Sans KR**을 사용합니다.
영문과 숫자는 회사 로고와 비슷한 느낌의 **Chakra Petch**를 사용합니다.
폰트는 **Title,Heading,Body,Sub01,Sub02**로 구분합니다.
Title의 font-weight는 기본값 Bold이며, Heading의 font-weight는 기본값 Medium입니다.
P,Sub01,Sub02는 Regular,Medium,Bold 세가지를 사용합니다.
개발자와는 P/M, sub01/M 식으로 소통합니다.