|
|
Design + 읽을 독 해외 디자인 아티클 번역 뉴스레터, 읽는 디자인 디독
같이 읽고 싶은 친구가 떠오른다면
|
|
|
목차
- 두가지 방식으로 동시에 디자인 하기
- Atomic Design은 리니어하지 않다.
- 무조건 당신의 고객을 알고 있어야 한다.
- 당신의 디자인 시스템은 계속 발전한다. 하지만 버전 1을 망쳤었다면, 아직 시작하지도 않았다.
- 성공 측정과 코스 수정
|
|
|
대기업들은 (설령 필요하지 않더라도) 디자인 시스템을 사용하는 가치를 빠르게 깨닫고 있다.
|
|
|
하지만 스타트업 같은 작은 기업에서는 어떤가? 빠르게 성장하고 있을 때는, 한 발짝 물러서서 시스템화된 디자인의 관점으로 생각하는 것이 어려울 수 있다. 이 외에도, 매일 계속해서 변화하는 것을 어떻게 시스템화 할 수 있을까? 제품 업계에서는 이 "디자인 시스템"을 당연히 사용하고 있다. 제품 개발 프로세스를 시스템화하는 것은 어떤 형태로든지 가능하고 회사가 발전하면서 함께 바뀔 수 있다. 이러한 디자인 시스템의 속성으로 당신의 제품을 생각하기 시작하는 것은 빠를수록 좋으며, 늦었다는 생각이 든다면 정말로 늦은 것이다.
|
|
|
디자인 시스템은 보통 재사용할 수 있는 컴포넌트들로 완벽하게 다듬어서 제공됩니다. 사실 디자인 시스템은 당신의 팀에서 일반적으로 일하는 방법과 비슷하죠. 결국에는 꽤 괜찮을지도 모르는 재사용한 컴포넌트 세트를 얻을 수 있을 것이다. 하지만 시간이 걸릴 것입니다.
|
|
|
나는 세계에서 가장 큰 기술 기업 중 하나에서 디자인 시스템 팀에서 일하면서, 제대로 된 디자인 시스템을 만드는 데는 너무 많은 시간이 걸린다는 것을 경험했다. 회사나 제품의 규모가 커지는 시점에서는, 제품에서 발견된 실수를 복구하는데 기하급수적으로 더 많은 리소스가 필요할 것이다. 내가 프리미엄 전화 시스템을 구축하는 스타트업인 트루 리 (Truly)에서 일을 시작했을 때, 즉시 디자인 시스템을 디자인을 하기 위해서는 시스템화된 접근을 받아들이기 위해서 최선을 다해야 했다.
이번 아티클에서, 일 년이 조금 넘긴 기간 동안 빠르게 성장하고 있는 스타트업을 위해 시스템적으로 디자인하는 것을 통해 배운 것과, 그 과정 동안 실수하고 성공했던 것을 검토해보려고 한다.
1. 두가지 방식으로 동시에 디자인 하기 Design In Two Threads 어떤 제품을 사용하던, 아이디어를 발전시키는 것과 기능을 만드는 것 사이에는 고비가 있다. 특히 스타트업에서, 이건 선택사항이 아니다. 끊임없이 만들고 출시해야 한다. 이 고비는 당신의 제품 개발 프로세스 안에서 개별적인 특징이 아닌 전반적인 제품의 발전을 위해서 보완하고 도와줄 수 있는 "backgound thread" 역할을 한다. |
|
Truly에서 우리는 지속적으로 기능을 디자인하고 출시했다. 동시에 "데스트톱 리디자인"프로젝트에서 사용되는 에너지 중 25%를 기존의 제품에서 필요한 것을 가려내는 작업에 사용했다. 우리의 제품인 샌드박스의 "이상적인 버전"에서는 그 어떤 것도 누락되는 것 없이 반영되었다. 6개월에 걸쳐 디자인은 진화했고, 이를 활용한 덕분에 데스크톱 앱의 리디자인은 단지 2달밖에 걸리지 않았다. |
|
|
"backgrond"인 클릭 가능하도록 정교하게 프로토타이핑된 데스크톱 리디자인을 통해 빠르게 테스트하고, 반복할 수 있었다.
|
|
|
당신의 제품 개발 과정에서 두 가지 버전의 디자인을 함으로써, 문제점을 발견하고 고치며 바른 디자인 방향으로 나아갈 수 있다.
2. Atomic Design은 리니어하지 않다. Atomic Design Isn’t Linear 미디엄에서 UX 관련 글을 정기적으로 읽었다면, 지금까지 Brad Frost의 Atomic Design의 글을 수백 번은 보았을 것이다. 당신의 제품이 작은 구성요소들로 이루어져야 한다고 생각하는 것은 좋다. 주로 디자인 시스템은 리니어하게 디자인된다고 사람들은 생각하지만, 그런것은 아니다. 프로스트도 스스로 지적했듯이 그런건 아니다.
이것(아래 이미지)은 실제 컨텐츠가 디자인 시스템에 적용되었을 때, 모든 패턴들이 어떻게 어울리는지를 보기 위한 페이지 단계이다. 모든 것이 조화롭고 각각의 역할을 잘 하는 것 같은가? 만약 아니라면, 우리는 다시 돌아가서 콘텐츠들이 적절하게 다루어질 수 있도록 각 요소들을 수정할 수 있다. |
|
|
개별 컴포넌트들을 만들기 전에 전체 플로우를 먼저 만드세요. 플로우를 유지해주는 요소를 기반으로 패턴을 찾고, 컴포넌트 라이브러리를 구축하세요.
|
|
바깥의 버튼과 컴포넌트들을 구축하기 시작하는 것 대신 (우리가 초기에 했던 실수), 플로우를 구축하고, working backward from there에 집중하자. 대부분의 제품에 사용할 수 있는 패턴을 만들기 위해 수백 개의 스케치, 팀 브레인 스토밍, 와이어 프레임 및 목업을 사용했다. |
|
|
우리의 제품에서 나타난 한가지 패턴은 "assignment fields" 였다. 다른 디자인 시스템의 접근 방식을 그래도 차용해서 디자인을 하고 싶은 마음이 들겠지만, 당신의 프로덕트는 다른 구조로 구성되어있다는 것을 발견하게 될 것입니다.
|
|
|
3. 무조건 당신의 고객을 알고 있어야 한다.
대기업에서 일했을 때, 마침내 디자인 조직의 퍼소나를 찾았던 순간을 기억한다. 왜 디자인 퍼소나가 디자인 에셋 속에 깊이 묻혀있는지 깨닫는 데까지는 오래 걸리지 않았다. 퍼소나들 중 한명은 “LaCroix를 즐겨 마시는" “Millennial Mel”이었다. 퍼소나들이 형편없기도 했지만, 그러나 이것이 그다지 중요한 문제도 아니었다. 대기업은 이미 고객 유치에 성공한 상태였고, 새로운 기능은 기존 고객의 니즈를 잘 알고 있는 팀에서 만들어지고 다뤄지고 있었기 때문에 퍼소나는 중요하지 않았다. 만약 스타트업에 있다면, 여전히 유치해야 할 잠재적 고객이 있다는 의미이다. 당신의 제품을 소비자들이 이용할 수 있도록 무엇이 그들을 움직이게 하는지 파악해야한다.
|
|
|
제품 결정을 내릴 때 도움이 될 퍼소나를 만드세요. 고객이 가지고 있는 당신의 제품에만 있는 유니크한 기대를 중점으로 생각하세요. 또한 제품별로 다양한 사용 사례들도 모두 고려해야 합니다. 스타트업에서는, 관리자부터 최종 유저들 (ends users)까지 모든 사람을 위한 기능을 개발할 것입니다.
|
|
|
이전에 일했던 회사인 Truly에서 우리는 영업팀을 위한 프리미엄 폰 시스템을 구축했다. 판매는 극히 일부만 알고 있었기 때문에, 폰 시스템을 통해 유저들이 매일 실제로 어떤 경험을 겪는지에 관한 인사이트를 얻어야했다.고객들과 만나서 그들의 입장과 디자인의 문제점을 들었던 팀원과도 긴밀하게 협력했다. 이 외에도, 고객들과 만나면서 가능한 확실한 그림을 얻기위해 여러권의 책을 읽었다.
|
|
|
사용자에게 어떤 책에서 일하는데 영향을 받았는지 물어보세요. 고객들의 거래 내용을 읽어보면, 산업별 용어와 사용자들의 일상생활에 대해 이해할 수 있습니다.
|
|
|
4. 당신의 디자인 시스템은 계속 발전한다. 하지만 버전 1을 망쳤었다면, 아직 시작하지도 않았다.
구글이 머터리얼 디자인을 발표했을때 마치, "너희가 가지고 있던 모든 디자인 문제들은 완전히 해결되었다!"라고 발표하는 것 같았다. 하지만 현재 Gmail을 보면, 구글 기존의 drop-shadow 중심 디자인 시스템으로 점철된 투박한 디자인을 볼 수 있다. 사실, 이것은 좋은 것이다. 머터리얼 디자인이 출시되었을 때, 구글은 거대한 조직 내에서 디자인의 방향성을 바로 잡기 위해서 강력한 발표를 해야 했고, 머터리얼 디자인은 그들이 그렇게 할 수 있도록 도와주는 촉매제였다.
|
|
|
Truly에서 여러 팀 사이에서 데스크톱 앱 출시 날짜를 조정했습니다. 이는 회사 내의 디자인 시스템에 대해 함께 대화하는 시간을 가지는 계기가 되었습니다.
시작 단계에서, 당신의 디자인 시스템의 최초 버전이 완벽할 필요는 없지만 (완벽할 수는 없을 것이다), 하지만 임팩트는 필요하다. Truly에서는 데스크탑 앱의 새로운 버전을 출시할 때 디자인 시스템도 함께 출시했다. 이는 개발자와 긴밀히 협력해서 프론트앤드 구성 요소 프레임 워크를 시작하는 것을 의미했다. 동시에 리디자인된 데스크톱 앱 출시 날을 조정하기 위해 고객 지원과 마케팅과 협력했다. 이번 출시는 디자인 시스템의 공식 런칭을 위한 rallying point 역할을 했다. 그리고 제대로 작동하고 있는 것과 그렇지 않은 것을 추적할 수 있는 시작점을 제공했다.
디자인 시스템의 성공이 그라디언트 액션 버튼이 얼마나 환상적인 지에 국한되어서는 안 됩니다. 대신 디자인 시스템은 몇 가지 주요 방법으로 조직에 가치를 더합니다.
5. 성공 측정과 코스 수정
디자인 시스템이 얼마나 그라데이션 액션 버튼이 환상적인지에만 달려있으면 안 된다. 하지만 디자인 시스템은 몇 가지 주요 방법으로 회사에 가치를 준다.
제품의 다른 부분을 리디자인 할 때, 우리의 조직 내에 가치를 부여해야 한다는 목적을 잊지 말아야한다. 궁극적으로, 회사에서 디자인 시스템을 구현하는 것에 너무 빠른 때는 없다. 단순히 제품 팀이 일하는 방법 중 일부가 아니라, 디자인 시스템 자체로 존재한다는 생각에 사로잡히지 말라. 단순하게 유지하고, 일을하고, 재미있게 즐기길.
|
|
|
[2019.11.07]
디자인 시스템이 화두 됨에 따라 대기업 관점의 디자인 시스템 글이 많은 요즘, 스타트업 디자이너를 위한 아티클을 공유해 드립니다.
[디독 도네이션 OPEN] 오늘 읽으신 아티클이 마음에 드셨다면, 작은 금액이라도 디독의 서비스 유지를 위해 후원해주시면 감사하겠습니다. :)
카카오뱅크 3333 123 7696 03 (김강령)
*후원해주신 금액은 전액 서비스 운영(메일 발송 솔루션 비용)에 사용됩니다.
*후원자(입금자명) 리스트 기입을 원하지 않으시는 분은 메일로 말씀해주세요. |
|
10월 후원해주신 분들 윤수지
남영미
김지연
정덕래
홍예원
구미아
김수정
김지형 김은지 김지영 김용준 정민아 김명숙 이은찬 신은하 박자원 강병천 외 9분
후원해주신 분들, 정말 감사합니다! 덕분에 서비스를 유지할 수 있게 되었습니다. :)
|
|
|
피드백은 d.dok.newsletter@gmail.com 으로 남겨주세요. 추천하고 싶은 영문 아티클 역시 링크를 남겨주시면 검토 후 번역하여 보내드립니다.
|
|
|
