일전에 디자이너 커뮤니티에 가이드를 공개한 적이 있다.
7년간 프로젝트를 진행해오면서 미리 이런것쯤 체크해뒀으면 좋았겠다 라거나, 혹은 알고있었다면 더 잘했을 텐데 라고 느꼈던 것들을 아주 간단하게 정리해볼까 한다. 자세한 설명은 배포용으로 따로 만들예정이라 일단은 목차 정리차원에서 기록해 두려고 한다.
여러가지가 많이 바뀐것도 있고.
별도의 UI 프레임워크를 사용할것인지 물어보자.
vue를 사용한다면 vuetiry나 vuesax 등을 사용하는지 물어보자.
혹은 별도의 component library를 염두해두고 있는지 확인하자. 부트스트랩 이라든지, Ant-design 이라든지, material UI 라든지.
적응형인가, 반응형인가? Break Point는 어떻게 나눌것인가?
디바이스별로 어떻게 보여줄 것인지를 사전에 고려하자.
지원해야할 브라우저를 체크하자.
사실 이 항목은 IE 몇버전까지~~ 고려했었지만, 이제는 사망해버린 IE이기에 우리는 조금 자유로워졌다.
리소스 전달은 어떻게 할까요?
피그마로 작업물을 주고 export 아이콘을 따로 분리시킨다든지, 제플린으로 넘겨준다든지 등등을 협의하자.
테마가 존재합니까? 혹은 확장 가능성이 있나요?
컬러명칭을 정하는데 중요하다. CSS 구조적으로도 신경을 써야하는 부분이다.
다국어를 사용하나요?
영어와 한글의 혼용을 허용하나요? 언어변경은 어떻게 이루어지나요?
컬러에 대한 정의
컬러명칭을 어떻게 정의할것인지 사전에 협의하자.
기본적으로 HEX를 사용하고 알파값이 포함되면 rgba로 사용한다든지, 모두 rgba로 표현한다든지 gray100~900으로 쓴다든지, primaryGreen 이런식으로 사용한다든지를 미리 협의하면 좋다.
특히 특정상태 (disabled) 같은 경우에, 부모에게 opacity를 먹이는것을 허용할건지 를 협의하자. 백그라운드 컬러 위에서 구현되는 케이스가 있다면 나중에 문제가 된다.
모달에는 타이틀영역이 있고 대개 absolute 이다
자꾸 이걸 망각하고 작업을 하다보니, 스크롤 영역을 나중에 잡는 케이스가 생긴다. 여러개의 모달이 이미 작업된상황에서 공통 모달을 수정하다보면 애로사항이 생기기 마련이니 미리 체크하자. 타이틀의 영역, 스크롤은 어느 간격을 두고 생기는지, 바텀 absolute영역은 있는지 등 다양한 케이스를 체크하자.
모달을 닫는 케이스룰을 정하자. x버튼의 존재유무(취소 혹은 확인버튼으로 대체할것인지), 외부클릭시 모달창 닫기를 막을것인지를 결정하자.
웹에서는 최소 폰트 사이즈가 10px이다
이하는 크롬기반에서 지원 안한다.
'[IT] 프로덕트 개발 > Design - 디자인' 카테고리의 다른 글
| [디자이너 & 퍼블리셔를 위한 가이드 #2] 프레임워크나 라이브러리리를 사용할 것인지 확인하자. (0) | 2023.06.16 |
|---|---|
| [디자이너 & 퍼블리셔를 위한 가이드 #1] 실제 프로젝트 진행 과정 / 프로젝트는 어떻게 진행될까? (0) | 2023.06.14 |
| [디자이너 & 퍼블리셔를 위한 가이드 # 0] 디자이너와 퍼블리셔 들의 고민. 뭘 배워야 해야 하지? 퍼블리싱이란? (0) | 2023.06.13 |
| 내 디자인 능력을 레벨업 시켜줄 유용한 사이트들 (1) | 2022.09.20 |
| [figma] 피그마 커뮤니티 인기순 소팅 방법 (3) | 2022.06.15 |