디자인 디테일도 결국은 반복 숙달

프로덕트 디자인 필수 실습 문제집 강의 제작 후기

지난 4월, 콜로소와 함께한 두 번째 강의, "70여 가지 핵심 스킬 실습으로 익히는 프로덕트 디자인 통합 기출문제집" 강의를 오픈했다. 수학익힘책을 컨셉으로 만든 강의라 제목에서도 그런 느낌이 전해지도록 고민했는데, 생각보다 구구절절해지다 보니 지금은 "프로덕트 디자인 필수 실습 문제집"으로도 부르고 있다. 

첫 번째 강의에서 가장 많이 받은 피드백

첫 번째로 만든 "직접 만들어보며 배우는 프로덕트 디자인 기초" 강의는 수강생이 프로덕트를 0부터 1까지 디자인하는 프로세스를 전반적으로 경험해 보는 것에 초점을 맞춰서, 가상의 프로덕트의 기획 문서를 리뷰하고, 프로덕트의 전반적인 구조를 설계하고, 오픈 소스 디자인 시스템을 이용해서 UX 패턴을 만들고, 실제 프로덕트에 적용해 보도록 했다. 

수강생들은 어떻게 생각했을까? 네이버 블로그에 수강생들이 올려둔 환급 챌린지 후기와 지인들이 전달해 준 후기 및 피드백들을 통해 강의에 대한 생각을 들을 수 있었다. 좋았던 점과 아쉬운 점 모두 있었지만, 프로덕트 디자인 실무에서 피그마를 어떻게 사용하면 좋은지 알게 되어서 좋았다는 이야기는 빠지지 않고 나왔다. 의외였다. 프로덕트 디자인 기초 강의에서 오히려 피그마 사용법을 제대로 배웠다는 이야기가 나오다니.

하긴, 디자인 이론이나 피그마를 알려주는 컨텐츠는 있었지만, 실무에서 이 두 가지를 조합해서 어떻게 써야 하는지 디테일하게 알려주는 강의는 없었다. 생각해 보면 나도 누군가의 어깨너머로 보면서 따라 하거나, 물어보면서 습득한 경우가 대부분이고, 그렇지 않은 경우 혼자 이거 저거 눌러보면서 삽질을 해야만 했다. 

아무래도 이런 디테일은 이론을 쌓는 것과 동시에 경험을 해야지만 배울 수 있는, 실무에서 사수 혹은 옆에 있는 동료와 이야기하고, 피드백받고, 시행착오를 하면서 배워나가는 경험적 지식의 측면이 강하기 때문에 이론을 전달하기 용이한 강의의 형태로는 만나기가 어려웠을 것이다. 두 번째 강의를 만든다면 프로덕트 디자인에서 경험적인 영역에 있는 부분에 초점을 맞춰야겠다고 생각했다. 

프로덕트 디자이너에게 진정 필요한 것

2024년 초, 콜로소와 두 번째 강의를 준비하기 시작했다. 킥오프 미팅을 마치고, 문득 이런 고민이 들었다. 핸즈온 위주의, UI, UX 등의 시각적인 요소들을 따라 만드는 강의가 프로덕트 디자이너들에게 정말 필요할까? 논리와 데이터를 기반으로 비즈니스에 기여할 수 있는 솔루션을 만드는 것에 초점을 맞추고 있는 최근 프로덕트 디자인 트렌드와 역행하는 건 아닐까? 

요즘의 프로덕트 디자이너에게 데이터를 기반으로 논리적으로 커뮤니케이션하고, 비즈니스와 매출에 기여하는 솔루션을 만드는 것은 물론 중요하다. 다만, 이런 것들이 디자이너의 직관 혹은 감각보다 우위에 있다고 생각하지 않는다. 구글에서 UX 디자이너로 일하고 계신 이정영 님이 최근 EO와 나눈 인터뷰에서도 비슷한 맥락을 찾아볼 수 있다.

"회사 안에서의 디자인이 사용성과 프로덕트 띵킹으로 가다 보니까 아름다움, 미감을 나중에 챙기는 느낌이 있어요. 근데 그게 별개가 아니에요. 제가 생각하는 좋은 UX는 일단 보기가 좋아야 돼요. 어 저게 뭐지? 눈길이 가는 디자인이 엄청 중요해요. 두 번째는 가이드가 필요 없이 바로 직관적으로 쓸 수 있는 게 중요해요. 세 번째는 자꾸 쓰다 보니까 남들에게도 알려주고 싶다, 저절로 임팩트가 많이 생기고 모두가 알게 되는 그런 디자인이 좋은 디자인이라고 생각합니다."

비전공자로서 디자인을 시작한 나에게 UI를 포함한 시각적인 요소는 늘 어렵고 피하고 싶은 영역이었다. 어떤 면접에서부터 UI와 비주얼은 자신이 없다, 안 하고 싶다고 말한 적도 있고, 대표님께 기획자로 전환하고 싶다고 한 적도 있다. 모든 걸 다 잘 해내는 육각형 디자이너가 몇이나 되겠느냐만, 디자이너로서 책임져야 하는 가장 중요한 영역을 포기한 셈이나 다름없었다. 덕분에 많이 헤맸고, 몇 년 간의 삽질 끝에 디자이너로서 커리어를 이어가려면 결국 정면돌파만이 답이라는 것을 알게 되었다. 

나의 고민은 어떻게 해야 디자인을 잘할 수 있는지로 이어졌다. 고민할 시간은 별로 없었다. 일단 잘하는 사람들이 하는 방법을 흉내 내고, 잘 만든 프로덕트를 면밀히 뜯어보면서 가져올 수 있는 모든 것을 가져와보기로 했다. 그렇게 몇 년을 지속하니 내 나름의 보는 눈과 방식도 조금 생겨났다. 

프로덕트 디자인 필수 실습 문제집에서 다루는 것

코딩 튜토리얼 강의에서는 보통 To do List를 다룬다. 이는 실용적인 예제를 기반으로 프로그래밍의 중요한 개념들을 다룰 수 있으며, 데이터 관리와 관련된 기술을 연습할 수 있기 때문인데, 초보 개발자들은 여기에 이어서 카카오톡, 넷플릭스, 유튜브 등 우리가 자주 사용하는 서비스를 클론 해보는 클론 코딩을 통해서 다양한 기능을 실제로 구현해 보면서 실력을 키워나간다. 어릴 적 수학익힘책을 통해 반복 숙달하면서 실력을 키웠던 것처럼 말이다. 

이번 강의는 이와 궤를 같이 한다. 우리에게 가장 익숙한 서비스를 뽑아보고, 여기서 자주 사용하는 Todo List부터 채팅, 음악 플레이어, 칸반 보드, 텍스트 에디터, 데이터베이스 테이블까지 7가지 프로덕트를 따라서 그려본다. 보이는 부분만 따라 만드는 것만으로는 부족하다. 프로덕트의 기능과 구조를 하나씩 뜯어보면서 분석하고, 데이터베이스의 대략적인 구조를 파악하고, 목업 데이터를 구성해 보면서 역기획을 해본다. 그다음 와이어프레임을 그리고, UI 디테일을 디자인하고, 공통 요소들을 컴포넌트화 한 후 간단한 프로토타입도 만든다. 

강의를 다 듣고 나면 강의에서 함께 만든 7가지 프로덕트의 기획, 데이터베이스 구조, UI 디자인 디테일이 손에 잡히도록 만들어주는 것을 첫 번째 목표로 잡았고, 프로덕트를 역으로 뜯어보고, 디자인 디테일을 가져오는 프로세스가 체화되어서 강의에서 다루지 않은 다른 프로덕트도 본인 것으로 만들 수 있게 되는 것을 두 번째 목표로 잡았다. 

프로덕트의 기획을 이해하는 부분에 생성형 AI를 일부 사용했다. ChatGPT, Claude AI, 뤼튼에 질문을 던지고 답을 받아보면서 프로덕트의 기능과 데이터베이스 구조를 쉽게 이해하고, 적절한 프롬프트를 통해 진짜 같은 목업 데이터를 빠르게 만들어볼 수 있었는데, 이는 강의 준비 시간을 단축시키는데 큰 도움을 주었고, 실무에서 업무 생산성을 높이는데, 당장 활용할 수 있을 것 같다. 

→ 두 번째 강의 살펴보기 : https://coloso.co.kr/products/dictionary-leejinjae2

→ 첫 번째 강의 살펴보기 : https://coloso.co.kr/products/uxui-leejinjae

PS 1.

영상을 공개한 지 이제 겨우 1달 정도 지난 시점이라 아직 피드백을 받아보지는 못했다. 나도 아직 갈 길이 한참 먼 쪼렙 디자이너지만, 내 뒤에 오는 사람들이 조금이나마 덜 헤매면서 가면 좋겠다는 생각으로 열심히 만들었는데, 그 마음이 얼마나 잘 전달될는지. 이번 강의도 잘 부탁드립니다.

PS 2.

김재엽 교수님 덕분에 홍익대학교 산업디자인과 2, 3학년을 대상으로 한 특강에서 Todo List를 함께 만들어보면서 피그마 기능을 실습해 보는 기회를 가졌는데, 프로덕트 디자이너로 커리어를 준비하는 취준생들에게는 확실히 도움이 되겠다는 생각이 들었다. 불러주셔서 감사합니다.