안녕하세요. 강남언니의 프로덕트 디자이너 Jane입니다.
강남언니의 디자인챕터에서는 더 나은 디자인 프로세스를 위해 꾸준히 고민하고 다양한 방식을 시도해보고 있는데요, 이번 글에서는 더미컨텐츠를 입력하는 방식의 자동화를 통해 프로덕트의 완성도는 높이고 작업 시간은 단축해 두마리 토끼를 잡은 경험에 대해 공유하려고합니다.
실데이터가 프로덕트의 완성도에 주는 영향
프로덕트의 완성도에는 잘 짜여진 레이아웃도 물론 중요하지만, 컨텐츠가 주는 영향이 굉장히 많은 부분을 차지하는데요. 하지만 우리는 빠른 작업을 위해 타이틀이 들어갈 자리를 잡기 위한 더미 텍스트와 Unsplash에서 불러온 더미 이미지로 가득찬 화면을 만들곤 합니다. 혹은 깔끔하고 예쁜 이미지와 함께 적당한 길이의 컨텐츠가 채워져있는 이상적인 화면만을 확인할 때도 있어요.
하지만 현실은 전혀 그렇지 않죠. 유저가 업로드하는 대다수의 컨텐츠는 레이아웃에 최적화된 퀄리티가 아닐 확률이 높습니다. 따라서 예상치 못한 비율의 이미지가 들어와 좌우에 여백이 생기고, 텍스트 길이는 과하게 짧거나 잡아둔 영역을 한참을 벗어난 길이일 때가 많습니다.
더미텍스트를 쉽고 의미있게 사용해보자
이러한 다양한 케이스에 대응하기 위해 레이아웃을 잡을 때 유저에 빙의해서 작문시간을 가지거나, 워스트케이스를 고려한 길이의 더미텍스트를 넣어보곤 하는데요. 생각보다 이런 내용을 작성하는 데에 드는 물리적인 시간을 어떻게하면 줄일 수 있을 지 고민해보았고 실제 데이터를 활용을 시도하기로 했습니다. 프로덕트 디자인을 위한 데이터를 미리 준비해 디자이너들이 제품에 대한 고민에 더 집중할 수 있도록 말이죠.
우리는 더미로 사용할 이미지와 텍스트를 준비해두고, 스케치 플러그인인 Craft(링크삽입)를 사용해 랜덤으로 Generate하는 방식을 적용해보기로 했습니다. 텍스트는 JSON타입의 데이터를 미리 받아두었고, 이미지는 폴더별로 커스텀 기능을 활용해 미리 정리해두었습니다.
✋여기서 잠깐, JSON이란?
→ 키-밸류 를 활용해 데이터를 저장하고 주고받을 수 있도록 하는 데이터의 표현 방식을 말합니다.
[
{ "hospital":"클라앤비성형외과" , "location" : "강남구"},
{ "hospital":"DA성형외과(디에이성형외과)" , "location" : "서초구"},
{ "hospital":"리버스클리닉" , "location" : "서대문구"}
]
예를 들어 병원리스트 페이지를 디자인할 때는 "병원명", "지역 정보"의 텍스트 데이터가 필요하게 되는데요.
이 때, 강남언니에 입점해있는 1400여개 병원 중 이름이 가장 긴 길이의 병원과 가장 짧은 길이의 병원을 포함해 10~20개 정도의 병원데이터를 JSON 타입으로 만들어두고, 실제 디자인할 때는 텍스트에 해당 파일을 통해 오버라이드하면 클릭만으로 병원명이 한번에 대치됩니다.
다국어 서비스에서는 더욱 빛이난다!
이렇게만 해도 이미 많은 시간이 단축되는데요, 이 프로세스는 다국어 서비스에서 더욱 빛을 발하고 있습니다. 최근 강남언니는 일본 서비스를 런칭했는데, 일본어가 익숙하지 않은 저는 일본향 프로덕트를 디자인할 때 마다 번역기를 돌려가면서 텍스트 복사-붙여넣기를 무한 반복했었습니다.
하지만 위와 같은 방법으로 미리 일본어 데이터셋을 만들어두면 클릭만으로 빠르고 쉽게 작업이 가능하게됩니다.
마치며
강남언니에서는 극도의 협업을 통해 전체의 최고 성과를 추구하고 있습니다.
극도의 협업 (radical Collaboration)
우리가 하는 일의 성과는 동료의 성과에 영향을 주고받습니다. 개인의 성과와 효율을 강조하는 '부분의 효율화'의 합이 전체의 효율화로 이어진다는 신화를 믿지 않습니다. 검증된 많은 이론(TOC등)이 부분의 효율화는 오히려 전체의 비효율화를 발생시킨다고 합니다. 때로는 나의 30분 손해가 동료의 3일만큼 이익이 됩니다. 전체의 최고 성과를 추구하는 과정에서 오는 부분의 비효율화는 기꺼이 받아들이기로 합니다.
이번 프로세스를 만들기 위해 서버개발자인 제이슨이 30분 정도의 시간을 내주셨는데, 덕분에 프로덕트 디자이너들은 작문에 시간을 쓰지 않을 수 있게 되었고, 결과적으로 이렇게 확보한 시간을 더 좋은 프로덕트를 만드는데에 쏟아 제품의 완성도를 올릴 수 있었습니다.