홍준웅

홍준웅님의 아티클

홍준웅

홍준웅

디자이너로서 프로덕트를 만들며 느낀 디자인 인사이트들 - 1

안녕하세요, 페어리에서 Salesclue라는 프로덕트를 기획, 디자인하는 CPO 홍준웅입니다. 제가 팀에서 하고 있는 주 업무중 하나가 바로 프로덕트의 프로토타입을 만드는 작업을 하는데요, 이 과정에서 지난 2~3년간 느꼈던 초기 스타트업의 디자인 방법내에서 인사이트들을 공유하고자 합니다. 창업하고자 하는, 혹은 초기 스타트업에 합류한 디자이너 분들에게 도움이 될만한 글이 되길 바랍니다.


1.

초기 스타트업의 경우 디자인 시스템을 만들 시간이 없다면, 스타일링의 규칙을 정하자. 이마저도 힘들다면 design-system library를 적극 참고하자.


보통 초기 스타트업은 가설검증, 검증된 기능 개발에 우선순위가 높아 디자인의 경우 사실 각을 잡고 어느정도 완벽한 디자인 시스템을 만들기가 어렵습니다. 매번 뷰를 만드느라 바쁜 이유도 있고, 피그마 상에서도 컴포넌트화를 했다 하더라도, 스프린트 몇개만 지나면 안쓰이거나 다시 보았을때 맘에 들지 않은 경우가 허다합니다. 이런 경우, final product 모습의 mood정도만 머릿속으로 정하고, 컴포넌트 별 규칙만 설정해줘도 큰 도움이 됩니다. (예를들어 box-radius는 각진 혹은 둥근 형태로 할것인지, elevation 같은 경우 그림자로 몇단계정도 나눌것인지, color 계열을 몇개정도 쓸 것인지 등등)

하지만 이마저도 일에 치여 생각조차 못하는 경우가 종종 있는데요, 이경우 사실 component library 에서 스타일링을 가져오는게 더 현명한것 같습니다. (tailwind, material 등등) UX가 프로덕트의 core value가 아니라면, UI정도는 정말 허졉한 버전이라도 괜찮다고 생각합니다.

이렇게 간단하게라도 규칙을 정하거나, 다른 레퍼런스를 참고해서 디자인을 하게되면 개발자 입장에서도 컴포넌트를 제작하기가 굉장히 쉬워집니다.


2.

제작하고자 하는 component의 state를 정리하는 습관을 들이자


매번 만드는 저조차도 깜빡하는 경우가 종종 있는 것이, 바로 이 state에 따른 디자인 구분입니다. 버튼 하나를 만들더라도 생각해야되는 state 종류는 굉장히 많은데, 이걸 미리 정해놓고 가면 추후에 디자인 작업을 더 하거나, 개발자와의 커뮤니케이션 해야하는 것에 대하여 상당부분 효율을 높일 수 있습니다.

위는 material-design 에서 제공하는 state 구분중 하나입니다. (출처: https://m2.material.io/design/interaction/states.html#usage)


생각보다 프로덕트는 예상치 못한 오류를 발생시키는 경우가 매우 많아서, 이를 핸들링하는 UI가 수반되면 오류 대응에 더욱 유연한 대처를 할 수 있다고 생각합니다. 이렇게 모든 컴포넌트에 이렇게 state에 따른 UI 구분을 하는 습관을 들이면, 새롭게 만들어야 되는 컴포넌트에도 추가 작업 없이 처음부터 잘 기획&디자인 할 수 있다고 생각합니다.

특히나 개발을 조금 해보신 분이라면, 비동기 처리 관점에서 컴포넌트를 생각해보는 것도 큰 도움이 될 것 같습니다. (예외 처리를 어떻게 하고 계신지 개발자분들께 물어보시면 지금 프로덕트에서 관리해야될 state를 목록화 하기에 편합니다)


3.

개발 비용을 줄이는건 5할은 디자이너에게 있다. 초기라면 비용을 생각한 디자인을 해야한다.


이건 논란의 여지가 있는 주장이긴 한데, 초기 스타트업의 기획 - 디자인 - 개발 프로세스 내에서 디자이너로서 가장 빛을 발할 수 있는 부분이라고 생각합니다. 초기 스타트업일수록 하루가 아쉬운데요, 개발의 비용을 결정짓는 큰 요인 중에 하나가 디자이너의 선택이라고 봅니다.

저도 찐 디자이너의 길을 걸어오긴 했지만... 스타트업에서 가장 우선순위에 밀려날 수 있는 부분이 디자인 영역이라고 생각합니다. (채용이든, 프로덕트 가설검증이든)

매번 화면을 만들다 보면, 이건 아쉬워서 좀 바꾸고 싶고, 여기 조금 변경하고 싶고 하는 마음이 저조차도 굴뚝같은데요, 저는 "UX를 해치는 UI가 현재 한계치다!"라고 판단이 들때만 몰아서 변경합니다. 매번 스프린트에 UI 변경을 집어 넣을때 디자이너 입장에서는 레고에서 약간의 부품을 변경하는 느낌이라면, 개발자 입장에서는 공든 카드탑을 다시 세우는 느낌으로 받아들여질 수 있는것 같습니다. 이 경우, 결국 매번 다시 만들어야 하는 문제가 생길 수 있어서 개발 공수가 생각했던 것보다 더 늘어날 수 있는 가능성이 있습니다.

확실한 retention을 잡는 프로덕트가 아닌, 가설검증이 필요한 초기단계에서는 UI보단 UX관점에서 더 접근하는게 맞는것 같습니다.


짧게나마 간단한 감상들을 적어보았는데요, 스타트업 씬에서 활동하시는 주니어 디자이너 분들께 도움이 될만한 글을 지속적으로 작성해보고자 합니다.

처음에 어떤 글을 써야할지 고민이 많았지만, 역시 일단 아무말이라도 적어서 시작을 해보는 것이 좋은 것 같아, 첫 시리즈 글을 이렇게 작성해봅니다. 이 글이 디자이너로 일하시는 분, 디자이너 창업가, 디자이너를 꿈꾸는 분들에게 닿아 도움이 되길 바랍니다.

추신. 디자인 피드백 공유하는 것도 좋을것 같습니다 후후..


12
5