디자인 A와 B 사이, 어떻게 선택해야 할까?
AB테스트할 시간이 없을 때 의사결정하는 법
디자인 A와 B 사이, 뭘 선택해야 할까? 디자이너라면 누구나 한 번쯤 겪어봤을 ‘선택의 순간’이 아닐까 싶다.
북카이브는 OCR로 스캔해 기록하는 기능을 UX적으로 어떻게 표현할지 고민하는 과정에서 그 선택의 순간을 직면했다. 어떤 방법이 좋을지 팀원들과 함께 이야기도 해보고 여러 레퍼런스도 찾아보며 다양한 아이디어를 구상했다. 중요한 것은 그 중 북카이브에 가장 적합한 방식을 찾는 것이었다. AB 테스트로 사용자에게 확인하는 것이 가장 바람직하겠지만, 프로덕트를 만들다 보면 일일이 테스트를 돌려보기 어려울 때가 많다. 그래서 이럴 땐 디자이너가 의사결정을 해야 한다.
모든 의사결정에는 기준이 있어야 한다. 기준이 없으면 ‘선택’이 아니라 ‘찍기’에 가깝기 때문이다. 나는 디자인 의사결정을 할 때 핵심 목표와 리소스를 주요 기준으로 둔다. 이번 북카이브의 기록 UX를 설계할 때도 마찬가지였다.
북카이브 기록 기능의 핵심 가치는 ‘간편함’과 ‘빠름’이다. 이전 글에서도 이야기했듯 압도적인 편리함이 중요했기 때문이다. 즉 기록하는 과정에서 가장 허들이 덜 하고 간편하게 할 수 있는 방식이 무엇일까를 고민했다. (물론 개발 리소스가 어느정도 필요하냐는 기본!)
이번 글에서는 이런 기록의 핵심가치를 기준으로 어떻게 UX 방향을 잡아 나갔는지 공유해보려 한다.
스캔 후 문장 선택
북카이브에서는 카메라로 페이지를 찍으면, 기록하고자 하는 특정 구절을 선택해 텍스트로 변환한다. 이런 텍스트 선택 UX는 아주 다양하다. 아이폰의 기본 OCR 기능처럼 이미지 위에 바로 특정 문장을 드래그하는 방식, 실시간으로 카메라 화면에서 텍스트를 추출하는 방식(like 구글 번역기) 등.. 여러가지 방법이 있다.
우리는 여러 방법을 고민한 끝에, 문장 단위로 리스트를 보여주어 그 중 원하는 문장을 클릭하는 방식으로 표현했다. 이 결론을 내리기까지 다양한 방식의 장단점을 따져보며 ‘간편함과 빠름’이라는 핵심 가치를 기준에 어떤 것이 가장 적합할지 고민의 과정을 거쳤다.
1. 이미지에서 드래그하는 방법
가장 보편적인 방법이 아닐까 싶다. 그럼 이 이미지에서 드래그하는 방식을 사용했을 때, 어떤 장점과 단점이 있을까?
장점) 이미지 위에서 바로 조작한다
책 이미지 위에서 바로 조작하기 때문에, 내가 기록하려 했던 부분이 어디인지 비교적 찾기가 쉽다.
단점) 이미지 위에서 바로 조작하는 것이 어렵다.
이 방법의 가장 우려되었던 점은 이미지 속의 작은 텍스트 위에서 조작하는 것이 어렵다는 것이었다. 이미지에 따라 텍스트가 작게 표시될 수도 있고, 그 작은 영역을 손가락으로 드래그하는 과정이 결코 간편한 UX는 아니라고 생각했다.
2. 책 속 문장 형태를 그대로
그래서 대안으로 생각한 것이 이 두 번째 방식이었다. 문장 단위로 블록처리를 해 책 문단과 같은 모양으로 보여준다. 다시 말해 각 줄의 시작점을 책과 똑같이 맞추는 것이다.
장점1) 방법1보다 조작(클릭)이 쉽다
장점2) 책 문단과 같은 형태이다
이 방법의 장점은 블록 형태로 제공해 방법1보다 조작이 쉬우면서, 책과 같은 형태로 보여주기 때문에 책을 보다가 폰 화면으로 시선이 이동했을 때 기록할 부분을 쉽게 찾을 수 있다.
단점1) 시각적으로 복잡하다
단점2) 개발 구현이 어렵다
그러나 문제가 있었다. 첫째는 시각적으로 복잡하다는 것이다. 책과 같은 형태로 블록을 배치하다보니 블록의 시작과 끝 지점이 불규칙해지고 정돈이 덜 되어 보였다. 정돈이 덜 되어 보이니 결국 문장을 찾는 데 시간이 더 걸렸다.
또 다른 문제는 개발 구현이 어렵다는 것이다. 줄마다 문장의 시작점을 책과 똑같이 가져가야 했는데, 작은 폰 화면에서 이를 그대로 보여주기는 쉽지 않았을 뿐더러, 해상도에 따라 다르게 보여질 수밖에 없었다. 그렇게 되면 기기마다 책 속 문단 형태와 달라져 의미가 없어져 버린다.
3. 그럼 문장을 리스트로 보여주면?
결국 최종 선택된 방법으로, 문장들을 리스트 형태로 나열해 보여주는 방식이다.
장점1) 클릭이 쉽다
장점2) 정돈된 형태로 시각적 복잡도가 덜하다
블록을 리스트 형태로 보여주니 2번 방법에 비해 시각적 복잡도가 훨씬 덜하다. 또 문장별 조작 영역이 넓어져 빠른 조작이 더 쉽다는 장점이 있다.
단점) 책과 같은 형태가 아니다
그러나 책 문단과 같은 형태가 아니라는 점이 가장 고민이었다. 이렇게 되었을 때, 결국 책을 읽다가 마음에 드는 부분을 발견하고 → 북카이브를 켜서 스캔하고 → 문장을 선택할 때, 스크롤하며 기록할 부분을 찾아야 한다. 그럼 이 과정에서 시간이 소요될 수밖에 없다.
4. + 그럼 영역을 지정할 수 있게 하자!
3번의 방법에서 어떻게 하면 문장을 찾는 수고로움을 덜 수 있을까 고민했다.
어찌되었든 책 문단과 똑같은 형태로 보여주는 것은 개발적으로 불가능하기 때문에, 문장을 선택하는 단계에서 기록할 부분을 찾아야 하는 것은 어쩔 수 없는 과정이었다. 그럼 그 문장 리스트 속에서 어떻게 하면 스크롤을 덜하면서 내가 원하는 부분을 빠르게 찾을 수 있을까?
바로 스캔 단계에서 영역을 지정할 수 있게 하는 것이다!
문장 리스트에서 기록할 부분을 찾기가 어려운 이유는 책과 같은 모양이 아니기 때문이기도 하지만, 한 페이지 안의 수많은 문장 블록들이 수직으로 나열되기 때문이기도 하다. 만약 기록하고자 하는 부분이 페이지의 아래쪽에 있다면, 계속 스크롤을 하며 찾아야 하는 것이다.
하지만 스캔 단계에서 영역을 미리 지정하면, 나열되는 문장 블록의 개수가 훨씬 적어지면서 비교적 찾기가 쉬워진다. 아니, 사실 거의 찾을 필요도 없게 되는 것이다!
그럼 이제 이 영역지정을 어떻게 시각적으로 표현하면 좋을까?
이미지 위에서 네 개의 꼭짓점을 조정해 영역을 지정하는 UX는 일반적이지만, 이것처럼 카메라 화면에서 세로 영역을 조정하는 것은 익숙하지 않은 기능이다. 따라서 가장 직관적이고 평소 사용자들에게 익숙한 형태로 제공하고 싶었다.
그래서 카메라가 아니더라도 드래그해서 영역을 키우고 줄이는 UX가 무엇이 있을지 고민해보았고, ‘핸들’이 생각이 났다. 특히 바텀시트 상단에서 이 핸들을 드래그해 세로 영역을 조절하는 것은 많은 사용자에게 익숙한 UX다. 그 방식이라면 충분히 이해할 수 있을 거라고 생각해 이미지와 같이 핸들을 이용해 시각적 단서를 주었다.
이 영역지정 UX는 문장 리스트 방식의 단점을 보완해주는 가장 중요한 부분이었는데, 실제로 이후 UT에서 영역지정을 사용했을 때 사용자들이 간편함을 훨씬 크게 느꼈다.
디자인을 하다보면 여러가지 시안이 떠오를 때가 있다. 그리고 그 시안들은 각각 장단점이 있기 때문에 이 방법도 좋은 것도 같고, 저것도 좋은 것 같고..그 사이에서 갈팡질팡 할 때가 있다. 나는 그 장단점들 사이 우선순위가 희미할 때 갈팡질팡이 발생한다고 생각한다.
이 기능 혹은 우리 프로덕트의 핵심 가치 및 목표는 무엇인지 명시하고 시작한다면 우선순위가 명확해지고, 가장 최적의 시안을 선택할 수 있게 된다.
물론 사용자를 대상으로 검증한 것이 아니기 때문에 그게 무조건 좋은 디자인이라고 할 수는 없다.(북카이브도 이후 UT를 진행하며 부족한 부분들을 많이 발견했기 때문..)
그러나 선택하는 과정에서 드는 시간적 리소스와 잘못된 시안을 선택하는 리스크를 최소화할 수는 있다. 그냥 ‘최선’이 아니라, ‘우리 프로덕트에 최선'인 디자인을 선택하기 위한 방법인 것이다.
