프엔 마스터 도전기 - 4. 지속가능한 디자인
프로덕트 디자이너의 프론트엔드 개발자 이해 도전기
프론트엔드 개발을 마스터하기 위한 도전기는 아닙니다.
프로덕트 디자이너가 가장 긴밀히 협업하는 프론트 개발자를 이해하기 위한 도전기입니다.
이전 글 읽기! :)
아마 인류가 멸망하기 전까지 '지속가능한 디자인'은 트렌드일 것이다. 지구는 너무 뜨거워졌고, 공장은 닫지 못하고 있으며, 솔직히 차를 타는 게 편하긴 하니까. 내가 졸전을 할 때도 지속가능한 디자인, 그러니까 사회와 지구에 도움이 될 수 있는 디자인을 만드는 게 주제였다. UN에선 17개의 지속가능 발전목표(SDGs, Sustainable Development Goals)를 발표했었고, 이 중 하나의 주제를 골라서 디자인했다. 나에게 지속가능한 디자인이란 그런 맥락이었다.
언젠가 누군가로부터 프로덕트를 만들 때 디자인이 '지속가능해야 한'다는 이야기를 듣기 전까진 그랬다. 소비를 일으켜야 하는 프로덕트가, 지속가능한 디자인이 될 수 있다고요? 아쉽지만 당연하게도 UN이 이야기하는 그런 지속가능성은 아니었고. 아토믹 디자인에 관한 이야기였다.
아토믹 디자인(Atomic Design)
가능한 가장 작은 디자인 요소를 원자(Atoms)로 설정, 이를 활용하여 분자(Molecules), 유기체(Organisms), 템플릿(Templetes)의 순서로 만든다. 마지막엔 페이지(Pages)를 완성해서 효율적인 인터페이스 시스템을 만드는 디자인 방법론이다.
검색창 텍스트필드를 만든다고 가정해보자. 이때 사용되는 요소들은 아래와 같다.
여기서 정의된 6가지가 원자(Atom)이다.아토믹 디자인으로 치면 텍스트필드는 유기체 역할을 한다. 이때 위의 이미지에서 정의한 6가지의 요소를 원자로 설정하지 않고 바로 만들었다면? 텍스트필드의 경우 검색창뿐만 아니라 회원가입, 주소 입력, 카드 번호 입력 등 서비스에 따라 굉장히 다양하게 사용된다. 그렇게 새로운 텍스트필드가 생길 때마다 새롭게 만들어야 하는 것이다. 물론 아토믹 시스템을 구축하지 않고 복붙해서 사용할 수도 있지만... 두 가지 문제가 있다.
1. 프엔들은 내가 어떤 텍스트필드를 복붙해서 썼는지 모른다.
2. 정의된, 약속된 내용이 없다. (간격, 텍스트 사이즈/굵기, 아이콘 사이즈 등)
곧 이렇게 결론이 난다.
1. 디자이너, 프엔 둘 다 일일이 수작업을 해야 한다.
2. 애초에 정의된 내용이 없기 때문에 QA 사항이 많아질 수 있다.
물론 이렇게까지 세분화하지 않는 디자인 시스템도 있다. 하지만 나의 경우 최대한 모든 요소를 원자로 생각하는 게 좋았다. 추후에 수정될 가능성을 생각해서.
만약, 텍스트필드를 여러 번 사용해봤더니 생각보다 Focused Indication이 얇아서 굵게 변경하고 싶다? 아토믹하게 디자인 시스템을 구축하지 않았다면 모든 텍스트필드를 방문해서 일일이 굵기를 변경해주는(생각만 해도 아찔한) 불필요한 공수가 늘어나는 것이다. 개발단도 마찬가지.
우리가 함께 만드는 프로덕트가 지속 가능해지기 위해선 몸(노동 시간 감소)에도 좋고 마음(스트레스 감소)에도 좋은 아토믹 디자인이 만병통치약이다. 또 아토믹 디자인을 포함해 최소한 어떤 것들이 필요한지 아래에서 이야기해보려고 한다.
한 달 전쯤, 지금 회사에서 개발 스쿼드와 디자인 스쿼드의 싱크 미팅이 있었다. 가장 긴밀하게 협업하는 디자이너와 프엔이 어떻게 하면 더욱 효율적으로 일할 수 있을지 논의하기 위해서 모였다. 이때 개발 스쿼드에서 나온 몇 가지 주제들이 있다.
1. 레이어 이름 정리의 필요성
피그마의 왼쪽 메뉴에서 레이어 이름을 통해 맥락적으로 보고 싶은데, 시각적으로만 디자인이 완성되는 것 같아요. 정리가 잘 되면 더 빠르고 완성도 있게 개발할 수 있을 것 같아요.
언젠가 어떤 프엔이 피그마 보는 방법을 우연히 목격하고, 그전까지 내가 디자인한 모든 것들이 흑역사가 돼버렸다. 내가 피그마에서 자동으로 생성되는 Group 1, Frame 1과 같은 레이어 이름을 그대로 둬서 그의 마우스가 길을 잃은 것이다.
핑계 아닌 핑계지만, 정신없이 만들다 보면 레이어 이름을 신경 쓰지 못한다. 디자인하는 화면에 집중을 하다 보니 레이어 이름이나 순서 같은 건 눈에 들어오지 않는 것이다.
안 좋은 예시. 이건 그나마 요소가 적어서 파악이 쉬운 편이다. 보통은 이 리스트의 3~4배는 될 것 같다.내가 찾은 솔루션은 디자인 후 화면을 보지 않고, 레이어 이름과 순서만으로 대략의 맥락이 파악이 되는지 확인하는 것이다. 물론 바쁜 와중에 그걸 모두 체크하는 게 쉽진 않다. 하지만 처음 만드는 Key Screen 3개의 레이어 이름만 정리해두어도 이후에 만드는 화면의 정리가 쉬워진다.
즉, 첫 Key Screen 3개를 확실하게 정리하면, 그다음은 핸드오프 전에 확인하면 순서나 이름을 빠르게 정리할 수 있다.
2. 프레이밍, 오토 레이아웃 실천화
피그마에서 그룹핑이 안되어 있는 경우가 있습니다. 또는 absolute position 이여야 하는데 그룹핑이 되어 있어 수동으로 풀어야 하는 경우도 있습니다.
위에서 언급한 사건과 비슷하게, 언젠가 프엔이 내가 무지성으로 그룹핑해둔 걸 일일이 풀어보는 걸 목격한 적이 있다. 그걸 본 순간 바로 퇴근하고 싶어졌다. 첫 번째 흑역사를 만든 지 얼마 되지도 않은 것 같은데 벌써 두 번째 흑역사가 만들어진 것 같았다.
디자이너는 보통 본인이 작업 중인 시안을 보여주는 걸 선호하지 않는다. 나도 그랬다. 가능한 완전한 디자인으로 보여주고 싶은 것이다. 그러나 프로덕트를 만드는 디자이너는 프엔의 불시점검에 둔해질 필요가 있다고 느낀다.
그룹핑을 시각적인 관점, 그러니까 디자이너가 보기 편한 방식으로 해둬서 위와 같은 문제가 생기기 때문이다. 나는 디자인을 할 때, 프엔들이 디자인의 모든 자취를 하나하나 추적하며 구현하는 모습을 상상한다. 이때 그들의 추적이 쉬워지려면 내가 남긴 자취들은 간단하고 쉬워야 한다. 디자인을 프엔 친화적으로 만드는 거다. 그 일환으로 그룹핑 사용을 최소화하려고 노력한다. 항상 프레임에 넣거나 오토 레이아웃을 만드는 것이다.
매우 간단한 오토 레이아웃의 예시. 간단한 기능처럼 보이지만 정말 다양한 역할을 해준다..그래서 내 마음속엔 이런 메모가 한 장 있다.
!각골명심!
1. 절댓값이 아닌 상대적 수치를 본다는 걸 기억하기
2. 그룹핑 최소화, 프레이밍 습관화
3. 오토 레이아웃 명장 되기
이제는 이 내용들에 익숙해져서 어느 정도 프엔 친화적인 디자인에 가까워졌다고 생각한다. 프엔들이 언제든 들어와서 우리가 병렬적으로 일을 진행하게 돼도, 코멘트로 질문이 덜 들어오는 게 내 목표다.
3. 최소한의 디자인 시스템을 갖추고 시작하기
진행되는 프로젝트에 여러 디자이너가 함께 참여하거나 중간에 합류하는 경우가 있고, 그래서인지 디자인 시스템을 준수하지 않는 경우가 있습니다.
양심 발언. 여기서 언급된 중간에 합류하여 시스템을 준수하지 못한 디자이너는 높은 확률로 나다. 이 문제는 디자이너가 디자인 시스템을 잘 보고 제대로 따르는 게 맞다. 하지만 좀 더 이야기를 해보면서 디자인 시스템을 초기에 잘 다져야겠단 결론이 나오게 되었다. 기본적인 요소들을 확실하게 정의해두면, 디자인 시스템이 헷갈릴 일도 없기 때문이다.
이때 이 3가지를 분명하게 정의하고 시작할 것을 약속했다. 레이아웃, 텍스트 스타일, 컬러 스타일. 이것만 정하고 시작해도 많은 부분에서 수고를 덜 수 있다.
와이어프레임 시작 전 만든 basic system이번에 새로운 프로덕트를 맡게 되면서 와이어프레임 시작 전에 정의해둔 내용이다. 아이콘과 컴포넌트 리스트는 처음부터 있진 않았고, 와이어프레임을 만들며 디자인이 필요한 걸 그때그때 메모했다.
추후 정리한 텍스트 스타일의 일부텍스트 스타일은 2pt 차이를 두고 모조리 만들었다. 예전엔 디자인 시스템을 간단히 하려고 4pt나 6pt 차이를 두고 만들었는데, 꼭 그 중간 사이즈를 사용하고 싶은 순간이 온다. 굵기도 2개씩 만들었고, 본문 크기엔 underline 버전도 따로 만들어 두었다. 버튼용으로 line-height 100% 버전도 따로 만들었다. 좀 오버스러운 것 같아 추후 쓰이지 않는 스타일을 지워나가야겠다고 생각했는데, 실제로 사용해보니 그럴 일이 없어 보인다.
'프엔들은 모든 걸 보고 있다'는 걸 염두하며 디자인하면 그들을 배려하는 (고로 디자이너와 프엔 모두의 공수를 줄이게 되는) 지속가능한 프로덕트를 만들 수 있다. After all, product design = consideration for others 아니겠는가.
