어딜 내놔도 부끄러운 나의 첫 페이퍼 프로토타이핑
자세히 보아야 예쁘다. 아이콘, 너도 그렇다. [코드스테이츠 PMB4]
갑자기 웬 프로덕트 매니저냐면...
이번 설 연휴, 나는 주위 사람들에게 '프로덕트 매니저'로 취업을 준비한다고 선언(?)했다. 역마살의 대명사였던 나는 오랫동안 매주 지방과 서울을 오가며 일했고, 그때마다 늘 기차에서 힘겨운 시간을 보냈다. 잦은 구토로 매번 폐를 끼치며 코레일 VOC에 '칭찬합니다'로 제보한 승무원분들은 열명이 넘는다. 모두들 몸도 지갑도 더 안정될 직장생활을 추천하며 응원해주었다.
힘찬 응원과 동시에 "언젠간 전지적 참견 시점에도 나오겠네!"라는 말을 들었다. 아. 그 매니저가 아니라... 그동안 방송국과 가장 일을 많이 해서 그런지 다들 내가 연예인 매니저를 준비한다고 착각했다. 자초지종을 설명하자 관련 없던 IT 분야에 비전공자인 내가 취업할 수 있을지 걱정하는 눈치였다. 갑자기 웬 프로덕트 매니저?
누구나 하나쯤은 불평하면서도 계속 쓰는 애증의 어플이 있을 것이다. 나의 경우 매년 300만 원 넘게 KTX비로 지출하며 VVIP가 돼버린 [코레일톡]이 그러했다. 처음엔 몰랐는데 매주 쓰다 보니 정말 불편했다.
코레일에 보낸 나의 아이디어예를 들어 왼쪽 사진은 [기차 객실 정보 포스터]로 이는 기차의 복도에만 부착되어 있다. 일렬로 빠르게 승차하기 때문에 다들 볼 새도 없이 그냥 지나쳤을 것이다. 짐이 많은 날엔 캐리어 보관함 근처의 객실을 예약하고 싶어도 어플로는 이런 정보들을 알 수 없어 예약에 불편함을 겪었다.
오른쪽 사진은 [좌석 선택] 화면으로 내가 체크한 분홍색 박스는 콘센트 위치다. 저렇게 아주 작은 빈칸으로 표현(?)되어 있어 코레일톡을 자주 이용하지 않는 고객들은 아마 잘 몰랐을 것이다.
사실 나는 매주 기차를 탑승하다 보니 기차를 타면서 예약하는 경지에 이르렀고 불편함 조차 당연한 일상이 되었다. 그러던 어느 날 한 승무원님을 칭찬하러 코레일 홈페이지에 접속했고, 우연히 [서비스 아이디어 톡톡!!] 이란 공모전 공고를 보게 되었다. 기차 서비스와 코레일톡이 개선되었으면 하는 마음에 위처럼 객실 정보를 어플에도 기재하고 콘센트 아이콘을 추가하는 등 나의 아이디어들을 정리해 공모전과 VOC 고객의 소리를 함께 접수했다.
공모전 결과는 아직 나오지 않았지만 VOC의 경우 코레일의 [서비스 혁신처]를 통해 내 제보에 대한 답변을 받았다. 이때 처음으로 서비스 혁신처라는 부서를 알게 되었고, 남의 업무를 대신해준 것만 같은 묘한 기분이 들었다. 그렇게 무한 서치를 통해 서비스 기획에 대한 관심은 커지기 시작했고, 쿠팡 PO분께서 쓰신 책 [프로덕트 오너]를 읽고 PM에 대해 공부해 보기로 결심했다. EO station 채널에서 코드스테이츠의 PM 부트캠프 1기를 함께 하셨다는 김성한 작가님의 인터뷰를 보고 나는 망설임 없이 코드스테이츠 4기에 지원했다.
IT 회사면 검블유처럼 영어 이름 쓰는 거야?
프로덕트 매니저를 설명하자 다들 반짝이는 눈으로 멋있다며 폭풍 질문을 쏟아냈다. 검블유처럼 영어 이름을 쓰는지, 남주혁 같은 체크 남방의 댕댕이 개발자랑 썸 탈 수 있는지, 그럼 이제 판교로 이사 가는지 등등... 취준생인 내가 어찌 알겠는가 ㅠ_ㅠ 논란을 잠재우기 위해 나는 어딜 내놔도 부끄러운 나의 첫 페이퍼 프로토타이핑을 보여주었다.
나의 첫 페이퍼 프로토 타이핑![카카오 헤어샵]의 <스타일북> 기능을 이용해 네일 디자인을 스크랩하는 과정을 그려보았다. 프로필 이미지는 동그란 스티커도 붙여가며 굉장히 정성 들여 그렸다. 하지만 지인들은 유치원생의 과제를 보는듯한 귀여운 표정으로 고개를 끄덕이며 더 이상 내게 아무런 질문도 하지 않았다. ㅎㅅㅎ. (모! 이게 어때서!)
자세히 보아야 예쁘다. 아이콘, 너도 그렇다.
열심히 화면을 따라 그리며 노동요 대신 클럽하우스를 틀었다. 개발자나 디자이너분들 대화방에 들어가면 가끔 PM 뒷담화를 들을 수 있다 (ㅋㅋㅋ) 어떤 부분에서 왜 답답함을 느끼는지 엿들으며 필요 역량을 깨닫기도 하는데 그중 하나가 피그마, Adobe XD, 스케치 같은 UI 디자인 툴이었다. 나 역시 똑같은 화면을 복붙 대신 일일이 볼펜으로 그리다 보니 답답하고 불편했다.
그래도 직접 그려보며 눈으로 보는 것보다 아이콘의 직관성과 크기, 배치의 중요성을 더 체감하게 되었다.
굳이 페이퍼 프로토타이핑에 표현하진 않았지만 배너의 테두리가 실선인지 점선인지 아니면 아예 없는지에 따라서도 느낌이 어떻게 다른지 알게 되어 신기했고 사실 카카오톡은 매일 쓰는 어플인데도 저런 모양의 아이콘이었는지, 이런 기능이 있었는지 등 새로운 시각으로 바라볼 수 있어서 재밌었다.
!!! 개인적으로 좋았던 3가지 뽀인트 !!!
첫 번째는 [이모티콘]을 표현한 아이콘이다.
[카카오콘], [프렌즈]의 경우 실제 카카오 캐릭터의 얼굴로 되어 있어서 '왜 [이모티콘]은 캐릭터를 쓰지 않았을까?' 하는 호기심을 갖게 되었다. 어피치야 말로 카카오의 대표 캐릭터이자 이모티콘의 상징성 아닌가?
말풍선 테두리와 웃는 입꼬리를 따라 그리며 그 의미를 금방 알게 되었다. 이모티콘은 Emotion과 Icon의 합성어인데 그 용도에 맞게 표정과 대화창을 하나로 표현한 것 같았다. 아이콘은 예쁘고 귀여운 것보다 기능의 용도를 직관적으로 나타내는 것이 더 중요하다.
두 번째는 [위치를 나타내는 언더바]다.
[카카오 헤어샵]은 크게 <홈> <내 주변> <스타일북> <예약> <마이페이지> 이렇게 다섯 가지 카테고리로 나뉜다. 이때 언더바를 통해 어느 위치에 있는지 알려주는 아이디어가 좋다고 생각했다. 사실 볼 때는 별 것 아닌 기능인데 나중에 내가 UX/UI를 개선하는 기획 과정에서 '진행과정'을 직관적으로 나타내는데 큰 영감을 받았다. 물론 둘은 다른 의도지만 디자인에 관심을 가질수록 기획에도 좋은 영향을 주는 것을 체감할 수 있었다.
세 번째는 [컬러 텍스트로 아이콘을 강조하며 설명한 센스]다.
왼쪽 화면은 한 가로당 4개의 아이콘을, 오른쪽 화면은 5개의 아이콘을 배치했다. 10개라 5개씩 배치한 것 같은데 확실히 4개씩 정갈한 페이지보다는 눈에 잘 안 들어왔다. 하지만 노란 배경색의 텍스트로 중요한 아이콘을 강조하면서 동시에 <3천 원>, <추천> 등 추가적인 정보도 함께 기재했다. 텍스트를 이용해 추가적인 정보를 제공하면서도 컬러를 입혀 강조하는 센스에 '언젠간 나도 써먹어야지!' 하는 마음을 품기도 했다 :')
어딜 내놔도 부끄러운 나의 첫 페이퍼 프로토타이핑
앱스토어에 '프로토타이핑'을 검색하면 POP앱을 다운로드할 수 있다. 이 어플을 이용하면 위처럼 클릭 위치를 지정해 아주 간단한 페이퍼프로토타이핑을 만들 수 있고 링크로 공유해 다른 사람에게 보여줄 수도 있다. 내가 브런치에 열심히 글을 올리는 이유는 나 역시 브런치를 통해 많은 도움을 받았기 때문이다. 부족하지만 페이퍼프로토타이핑이 궁금한 분들에게 조금이라도 도움이 되길 바란다 :')
브랜드를 사랑하는 앱등이로 시작해, 제품이 아닌 가치를 파는 잡스병을 거쳐
혁신을 꿈꾸는 프로덕트 매니저에 도전하다. 코드스테이츠 PM 부트캠프, 그 100일간의 기록
김긍정 brunch.co.kr/@positive-kim
