Bia 디자인의 변천사

이 글에서는 Bia의 디자인이 시간이 지나며 어떻게 발전했는지, 그리고 함께하는 사용자들의 의견이 지금의 모습을 어떻게 만들었는지 소개해요.

Conquer Emetophobia. Bia는 구토 공포증을 위한 간단한 노출 콘텐츠를 담은 정적 웹사이트, Conquer Emetophobia로 시작했어요. 이 사이트는 회피의 악순환이 어떻게 공포증을 만드는지, 노출이 왜 공포증을 잊게 하는 데 효과가 있는지 설명한 뒤 글자, 단어, 문장, 이미지 형태의 콘텐츠를 조금 제공했어요. 저는 처음 노출 치료를 시도하던 몇 달 동안 이 버전을 직접 사용했어요. 휴대폰이나 컴퓨터로 각 단계를 순서대로 열고, 콘텐츠가 더 이상 불안 반응을 일으키지 않을 때까지 하나씩 넘어가며 연습했어요. 사이트는 명확하고 쓰기 쉬웠지만, 그다지 보기 좋지 않았고 참여를 이끄는 요소나 맞춤 기능도 없었어요. 사이트가 노출 콘텐츠 목록 이상의 것을 거의 제공하지 않았기 때문에, 노출 세션이 잘 진행되도록 하는 일은 모두 사용자인 제 몫이었어요. 구토 공포증 회복을 시작하는 다른 사람들과 이 사이트를 나누자, 사람들은 특정 종류의 콘텐츠, 새로운 단계, 모바일 기기에서의 더 나은 사용성, 그리고 무엇보다 시간에 따른 진행 상황을 기록하는 방법을 원했어요.

여정. 노출은 의도적으로 불편감을 찾아 나서며 공포증에게서 삶을 조금씩 되찾는 과정이에요. 믿음 위에 세워진 과정이기도 해요. 지금 불편감을 겪어 내면 나중에 공포증이 주는 불편감에서 벗어날 수 있다는 믿음이죠. 여정으로의 디자인 개편은 이 믿음을 눈에 보이게 하려는 것이었어요. 60개 연습으로 이루어진 전체 여정을 8개의 이정표로 나누고, 단계마다 진행 상황을 기록했어요. 여정을 따라 나아가는 모습과 시간이 지나며 나아지는 내 모습을 볼 수 있다는 건 엄청난 도움이 됐어요. 갑자기 공포증 극복으로 가는 길이 선명하게 보였어요. 과정을 믿는 게 더 쉬워졌어요. 일주일 동안의 노출로 실제 진전이 보이니, 다음 주에도 노출 연습을 이어 가기가 더 쉬워졌어요.

전문가와의 협업. 처음 두 스크린샷을 보면 아시겠지만, 제 디자인 감각은 그리 뛰어나지 않아요. 비전도 있었고 바탕이 되는 콘텐츠도 있었지만, 그 위에 올릴 사용자 경험이 빠져 있었어요. 그래서 디지털 디자인 회사 Tubik과 협업했어요. 기존 사이트 검토부터 사용자 경험 흐름 설계, 색 구성 맞추기, 맞춤 일러스트 제작까지 모든 단계를 함께했어요. 결과에 정말 만족했고, 앞으로도 Tubik과 함께 더 많은 Bia 기능을 만들어 가기를 기대하고 있어요.

새 디자인은 연습들을 간결하게 정리해 세로 공간을 훨씬 적게 차지해요. 연습과 학습 유형별 맞춤 일러스트 덕분에 사이트를 둘러보기가 쉬워졌고, 진행 상황도 한눈에 파악할 수 있어요. 모바일 화면에서는 이정표 하나가 가로로 스크롤되는 한 화면에 담기고, 펼칠 수 있는 하단 영역으로 각 이정표로 바로 이동할 수 있어요.

읽어 주셔서 고마워요. 여러분의 이야기와 의견은 언제나 환영이에요. 언제든 문의해 주세요. Bia의 역사에 관한 블로그 글도 함께 읽어 보세요.