디자이너를 위한 개발자의 한마디
UI를 막 시작했을때 디자인을 하는 것 보다도 디자인을 전달하고 난 이후가 더 힘들었던 것 같다. 분명 한국어로 대화 하고있는데 내 의도는 전달이 잘 안되고 중간중간 나오는 개발용어는 못알아듣겠고 안된다고 하는건 뭐 이렇게 많은지.. 공부해야할 가이드라인은 넘쳐나고 짧은 간격으로 새로운 기기는 계속 발표됐다. 이 분야에 흥미를 느껴서 열심히 학습하는 것도 중요하지만 이를 잘 해낼 수 있었던 이유 중 하나는 개발자와 많은 얘기를 나누는 것이었다. 얘기를 나누며 많이 배웠다는 표현이 맞는 것 같다.
내가 느꼈던 내용에 덧붙여서 주변에 있는 훌륭한 개발자분들께 이제 막 시작한 디자이너를 위한 한마디를 부탁했다. 같은 고민을 하고 있는 디자이너들에게 도움이 됐으면 좋겠다.
공통적으로 알면 좋은 내용
"실무에서 알아야 할 구체적인 지식들도 많지만, 나는 ‘힘빼기’를 강조하고 싶다. 처음 맡은 업무의 요구사항에 집중하다 보면 자칫 다른 중요한 부분들을 고려하지 못하게 되는 경우가 있다. 예를 들면 어떤 페이지에 새로운 기능을 추가하는 업무를 하면서 페이지에서 기존에 잘 유지되고 있던 더 중요한 기능/내용/플로우보다 새 기능이 더 튀게 되어 버리거나, 전체적으로 어딘가 어색해지는 경우가 있다. 서비스의 기존 동작, 사용자, 타겟 브라우저 등 히스토리를 이해하고 상식적으로 접근한다고 생각하고 부담감을 조금 내려놓아 보자. 준비된 디자이너라면 분명 잘해낼 수 있을 거다."
“개발을 한번쯤은 해보자. 직접 해보는 것 만큼 좋은 공부는 없다.“
“ 컴포넌트를 만들고 조립하는 개념으로 접근하는게 좋다. 화면마다 다르게 디자인하지말고, 폰트, 레이아웃, 섹션, 카드 등의 컴포넌트를 만들고 이를 조립하는 개념으로 접근하자. 특히 폰트 크기의 종류나 그레이 컬러를 너무 많이 쓰면 디자이너와 개발자 모두가 힘들어진다. ”
“ 그리드 시스템을 활용하자. 티끌모아 태산이라는 말 처럼 사소한 것을 고민하는 것이 쌓이면 리소스 낭비로 이어진다. 예를들어 마진값이 이 화면에서는 12, 저 화면에서는 15, 16, 17 이런식이라면 나중에 이를 맞추는 작업을 또 해야 한다. 미리 통일시키면 모두가 행복하다. (8Point 그리드 시스템을 잘 이용하자!)”
“ 모든 상태를 고려하자 (feat.예외케이스) 스크린에서 상호작용하여 변하는 요소들은 다양한 상태를 갖고 있다. 예를들면 hover, disable, active, focus, read only 등등 모든 상태를 정의해야 한다. 추가로 실패하는 에러케이스와 같은 예외 케이스들도 고려해야 한다. “
“ 세상에는 무수히 많은 기기들이 존재한다. 어느 플랫폼이던 간에 수많은 기기를 대응해야 한다 (특히 안드로이드). 그래서 언제나 가변영역과 고정영역을 고려해야 한다. “
“ 자간, 행간에 집착하지 말자. 인디자인처럼 디테일하게 설정할 수 있으면 좋겠지만 많이 힘들기 때문에 집착은 모두를 힘들게 할 수 있다. 특히 다국어 서비스라면 더더욱 힘들다. “
iOS
“ Navigation bar의 높이(44pt)를 절대 건들지 말자. ”
“ 디자인 작업시 Human Interface Guideline을 따르면서 기획의도를 잘보여주는 것이 중요하다. 특히 iOS개발자에게 HIG는 매우 중요한 지침서중에 하나기 때문에, HIG를 근거를 들어 설득하면 좀더 빠른 설득이 가능할것이다. 다만, HIG의 내용이 많기 때문에, 다음 섹션을 먼저 살펴보는 것을 추천한다.
Overview - iOS Design Themes / Design Principles
Visual Design - Adaptivity and Laytout / Animation / Branding / Color / Terminology / Typography / Video
추천한 섹션외에도 꿀정보가 많은 문서여서, 나중에 꼭, 모두 읽어 보는 것을 추천 한다. “
“ 폰트 크기를 하나로 진행하면 5에서는 크고 8+에서는 작을 수 있다. 기기별 폰트 크기를 다르게 할 수 있다. 다만 개발자와 얘기를 잘 해보자. “
Android
"모서리를 둥글게 하고싶다면 나인패치를 꼭 전달하자."
"가이드라인을 읽고 지키려는 노력을 하는게 좋다."
"다양한 디바이스를 고려해야 된다. (가변영역, 고정영역에 대한 이해!)"
Web
"앱은 웹과 다르다. 특히 애니메이션 만드는게 다르기 때문에 앱에서는 되는데요? 라는 말은 하지말자. 원하는 애니메이션이 있다면 Codepen, Github에서 찾아보고 직접 프로토타이핑해서 수치까지 전달해주면 좋다."
"내 디자인이 그려지는 웹 환경 이해를 위해 HTML, CSS를 한번쯤은 해보자."
*답변의 순서와 내용은 편집하는 과정에서 일부 변경되었습니다!
[이토록 쉬운 스케치]책의 마무리에 디자이너와 개발자의 한마디를 넣으며 마무리 하고자 부탁드렸는데, 정말 많은 개발자분들이 답변을 해주셨습니다. 답변을 부탁드리고 받는 과정에서 제가 더 많이 배울 수 있었습니다.
갑작스러운 요청에도 유익한 내용으로 친절하게 답변해주신 기태헌, 오혜진, 이준원, 오현수, 조규진, 양의현, 박준선, 정유철, 이문규, 이진혁 개발자 분들께 진심으로 감사하다는 말씀 드리고 싶습니다..!!!!
