UI 디자인: 새로움과 익숙함 사이의 고민

📸 감성 사진을 쉽고, 자연스럽게

‘퓨리즘 (purithm)’은 일상 사진을 자연스럽고 감성적인 사진으로 만들어주는 필터 앱인데요.

기획자, 디자이너, 개발자로 구성된 저희 팀은 2개월간 퓨리즘 이용자들이 예쁜 사진을 더 쉽게 탐색할 수 있는 방법을 고민했어요.

이번 글에서는 디자이너인 제가 퓨리즘의 사용성을 높이기 위해 고민했던 부분을 공유하려고 합니다!😊

🎨 필터 앱을 만들게 된 계기

기획자 한나

저는 평소에 예쁜 필터를 찾아 각종 sns와 필터 앱을 돌아다니는 필터 유목민이었어요. 필터 작가마다 보정 스타일이 달라 구경하는 재미가 쏠쏠했지만, 원하는 필터를 찾아 이곳저곳을 헤매는 게 번거로웠죠. 그래서 '필터 모음집'이라는 아이디어를 떠올렸습니다! 필터 작가들의 작품을 한 공간에서 모아볼 수 있게 하는거죠. 이 초기 아이디어를 바탕으로 ‘IT 개발 동아리, CMC’ 에서 기획 발표를 했고, 저와 뜻이 맞는 디자이너, 개발자들과 ‘퓨리즘’을 만들게 되었답니다. 현재 출시된 버전은 MVP 단계로, 팀원들이 직접 필터 작가가 되어 20개 이상의 예쁜 필터를 만들었어요. 앞으로는 기능 개선과 함께 다양한 필터를 꾸준히 업데이트 할 예정이에요!

여기까지 퓨리즘의 기획 배경입니다!

정리하자면, 퓨리즘의 핵심 가치는 ‘필터의 다양성’이에요.

디자이너인 저는 이 가치를 사용자들에게 전달하기 위해 여러 디자인 챌린지 과정을 거쳤는데요🧐

그중 [필터 상세페이지 개선] 과정을 소개해 드릴게요.

🖼️ 필터의 매력을 더 잘 보여주는 상세 페이지 UI

1. 기존 필터 앱의 상세 페이지 UI, 이게 최선일까?

설문조사를 통해 필터 이용자들이 텍스트 정보(후기, 필터 소개글)보다는 이미지 정보(원본 사진 비교, 예시 사진 보기)에 집중한다는 사실을 알게 되었어요.

이에 따라 이미지에 집중할 수 있는 상세 페이지 UI를 고민했죠.

대부분의 필터 앱은 사진과 텍스트를 번갈아 보여주는 '세로 스크롤' 형태의 UI를 사용하고 있는데요.

하지만 저는 기존의 세로 스크롤 UI(👇)가 정말 최선인지 의문이 들었어요🧐🧐

2. 일상에서 아이디어 찾기

더 나은 방법을 고민하던 중, 아이폰의 기본 사진첩에서 영감을 얻었습니다.

[사진을 페이지에 가득 채우는 방식]이었죠.👇

필터 소개글이나 후기와 같은 부가적인 정보는 따로 두고, 사진 자체에만 집중하게 만들었어요.

또한 인터랙션 기능을 통해 보정 전후 사진을 비교하거나 필터가 적용된 예시 사진들을 쉽게 볼 수 있도록 했습니다.

3. 가설 검증을 위한 A/B 테스트

가설

핸드폰의 기본 사진첩처럼

[사진을 페이지에 가득 채워 보여준다면]

이미지 정보를 더 쉽게 탐색할 수 있을 것이다.

하지만 걱정되는 부분도 있었어요.

‘사진 위주의 UI를 보고 필터에 대한 정보가 부족하다고 느끼지는 않을까?’

‘사용자들이 인터랙션 기능을 쉽게 사용할 수 있을까?’

제가 세운 가설을 검증하기 위해 A/B 테스트를 시행했어요.

첫 번째는 제가 만든 새로운 UI, 두 번째는 기존 필터 앱과 비슷한 세로 스크롤 형태의 UI에요.

결과적으로 첫 번째 UI가 더 많은 투표를 받았어요!!👍

첫 번째를 뽑은 이유로는 ‘사진을 크게 볼 수 있어서 좋아요, 보정 전후 비교를 쉽게 할 수 있어 좋아요’ 등이 있었어요. 특히 ‘원본 비교 기능’에 긍정적인 반응을 보였답니다.

그리고 ‘필터 정보가 부족하다고 느끼진 않을까?’라는 우려는 다행히 기우에 불과했어요.

오히려 두 번째 UI를 보며 ‘글은 어차피 안 읽어요, 글이 오히려 사진 탐색을 방해하는 것 같아요’ 등의 피드백을 했어요.

4. 사용자 피드백 바탕으로 디자인 개선하기

A/B 테스트를 통해 가설 검증에 성공했지만, 보완할 점이 산더미였어요🫠

그중 가장 큰 페인포인트는 사용자들이 인터랙션 기능에 익숙하지 않다는 것이었어요.

상하로 스와이프하면 필터가 적용된 예시사진들을 볼 수 있도록 했는데요.

왼쪽에 인디케이터 컴포넌트를 넣으면 당연히 상하 스와이프 기능을 인지할 거라고 생각했는데, 그게 아니었어요.

그래서 페이지네이션 컴포넌트를 상단에 배치해 스와이프 기능을 더 쉽게 인지할 수 있도록 했어요.

가독성도 함께 개선했어요.
사진을 크게 보여주다 보니 텍스트 요소들을 둘 여백이 부족했어요.

그래서 사진 위에 텍스트를 배치하고 shadow로 가독성을 보완했는데요.
하지만 사용자들은 사진 위에 텍스트가 있다는 것을 바로 인지하지 못하더라구요. (히트맵에도 터치가 아예 없는게 보이죠?👇😂)
그래서 불필요한 정보(‘맑은 날에 어울려요’와 같은 필터 설명 문구)를 빼고 그 자리에 후기와 작가의 필터소개글을 배치했어요.

📝 레슨런

1. 새로움과 익숙함의 밸런스 맞추기

새로운 경험을 제공하려는 노력은 중요하지만, 익숙함을 무시해서는 안 된다는걸 배웠어요.

예를 들어, 사진에 집중할 수 있는 UI를 만들면서도, 사용자들이 정보와 기능에 쉽게 접근할 수 있도록 직관적인 컴포넌트를 사용하거나 정보를 적절하게 그룹핑하는 것이죠.

이처럼 새로운 디자인을 사용자 경험에 자연스럽게 녹아들게 하는 것이 중요함을 알았습니다!

2. 검증을 통해 확신 얻기

검증되지 않은 디자인은 위험을 수반할 수 있지만, 이를 피드백과 테스트를 통해 보완할 수 있었어요.

A/B 테스트를 통해 새로운 UI가 사용자들에게 긍정적으로 받아들여질지 확인했으며, 이 과정에서 얻은 피드백을 반영해 디자인을 더욱 개선할 수 있었습니다.

테스트를 반복하고 데이터를 기반으로 판단함으로써 디자인에 대한 확신을 키울 수 있었어요.

📈 퓨리즘의 개선 계획

기본부터 챙기기

현재는 사용자가 필터 보정값을 일일이 적용해야 하는데요👇

퓨리즘의 첫 데모데이에서 방문객들이 이 점을 가장 불편하게 여기는 것을 발견했어요.

이런 번거로움이 사용자에게 큰 허들이 된다는걸 저희 팀 모두가 동의하고 있답니다😂

그래서 앞으로는 사용자들이 앱 내에서 자신의 사진에 필터를 바로 적용할 수 있도록 할 예정이에요!

퓨리즘의 업데이트 기대해주세요!📸🫧🫧

자세한 디자인 과정이 궁금하다면?👇

취준생을 위한 커리어 경험 기록관리 서비스 데이캐럿을 소개합니다!

간편하고 효율적인 커리어 경험 기록을 지금 데이캐럿에서 경험하세요!

안녕하세요 참여합니다.

cmc 14기에서 복식부기 가계부 이지벗을 런칭한 팀버즈의 기획자 카돈입니다.

초초주니어 PM의 삐딱선 _ #2 그래서 블루클럽을 왜 만들어야 하는건데

전 글 말미에서 말했듯 블루클럽 서비스는 블루 칼라 노동자, 

우리나라에 대입시키면 특수고용직 그리고 플랫폼 노동자를 위한 서비스이다.

예전에야 육체적 노동, 적은 임금이 두드러진 특징이었던 블루 칼라 노동자이지만 지금은 조금 다르다.

오히려 블루 칼라 직군에 종사하는 사람들의 수입은 꽤 높은 편이고, 육체적인 노동 또한 감당 가능한 선인 경우가 대부분이다.

-

🚀 블루클럽을 만들어야 하는 이유 1 : 시장

최근 미국의 빅테크 기업 뿐만 아니라 우리나라 일부 IT 기업들도 대대적인 피바람이 불었다.

예상치 못했던 화이트 칼라, 아니 뉴칼라 노동자들의 피해였다.

그 와중에 블루 칼라 노동자는 일할 사람이 부족해 어떻게든 일할 사람을 찾는

앞선 모습과 정 반대의 상황이었다.

분명 사람의 육체적 노동이 닿아야 하는 부분이 없을 수는 없다.

그러나 뉴칼라에 종사하고자 하는 사람들이 많아지고 있는 시대이니 만큼

감히 예상하건데 앞으로도 블루 칼라 노동자에 대한 사회적 니즈는 더더욱 커져갈 것이고, 이들을 필요로 하는 곳은 점점 더 많아질 것이다.

-

🚀 블루클럽을 만들어야 하는 이유 2 : 소외

골프 캐디로 어떻게 일하기 시작할 수 있는 건지? 배달 라이더로 일하기 시작하려면 무엇이 필요한지?

이 글을 읽는 사람들 중에서도 아는 사람이 얼마나 될까?

이들은 사회적으로 생소함을 넘어서 너무 많은 소외와 불편함을 겪고 있다.

“내년 부터는 골프 캐디들도 세금 내야 된대”

내가 5년 전 골프 캐디로 일할 때에도, 그리고 그 보다 5년 전에도 들려왔던 소문이었다.

그리고 지금도 여전히 골프 캐디들은 10년째 같은 얘기를 들으면서 정책이 시행되는 건지, 된다면 언제부터 시작하는 건지

누구 하나 시원하게 관련된 내용을 전달해주는 곳도, 사람도 없다.

-

🚀 블루클럽을 만들어야 하는 이유 3 : 타겟 서비스의 부재

우리가 타겟하고 있는 특수고용직, 플랫폼 노동자들은 각종 포털사이트 카페와 오픈카톡방에 넓게 파편화되어 퍼져있다.

그렇게 알음알음 모인 사람들끼리 정확하지도 않은 정보로, 유기적으로 되지도 않는 교류를

구직, 이직은 채용 플랫폼 속에서 공고를 뒤지고 뒤져 찾아낸 공고, 그리고 그 와중에 사기 공고를 거르고 걸러 어렵게

세금을 내야 하는지, 혜택은 어떻게 받는지도 모른채 주변 지인들의 말만 듣고 그렇다더라

사회적으로, 직업적으로 소외되어 관심도, 힘도 없는 이들은

지금껏 온전히 ‘나를 위한 서비스’를 경험해본 적이 없다.

-

플랫폼, 특수고용직 종사자가 스스로를 더 가치있게 느낄 순 없을까?

라는 소소한 물음표로 시작했던 블루클럽 서비스,

이제는 블루클럽으로 이들이 더 가치있게 변할 시간이다.

-

서비스가 드디어 런칭했어요. 런칭 스토리는 다음 글에서 💬

[고민의참견 #1] 런칭은 했다. 그리고 다음은?

사이드 프로젝트로 5개월 동안 개발 진행 후 드디어 런칭을 했다.

부족한 필력이지만 그동안 진행 과정과 느낀점에 대해 생각 정리를 해보고자 글을 남긴다.

🦄 프로젝트의 시작 🦄

프로젝트를 시작하게 된 계기는 생각보다 간단했다.

형, 저 군대가기 전에 서비스 하나만 런칭하고 가고 싶은데 도와주세요.

- 진주에서 복무중인 박OO (만 21세)

고향에 아는 동생이 군대가기 전에 서비스 런칭하고 가고 싶대서 그냥 별생각 안하고 백엔드 개발만 좀 해주려고 했다... (정말 별생각 없이 대충 ERD 30분만에 짜고 API도 대충 짜기 시작함...)

처음엔 대충 저랑 동생이랑 디자이너 한명이서 시작했는데, 갑자기 자기 학교에서 기획자 친구도 불러오더니 본격적으로 프로젝트를 시작하게 되었다.

그렇게 아무것도 없던 프로젝트 피그마에 첫 화면설계서를 작성하면서 프로젝트가 시작 되었다.

2023년 봄이었다.

😅 좋았어! 5월까지만 하자! 😅

호기롭게 시작한 프로젝트의 개인적인 목표는 '딱 5월까지만'이었다.

본업도 있고, 시간을 많이 쓸 수 없다고 생각해서 딱 5월까지 하고 슬쩍 빠지려고 했다.

5월까지 기능들을 '완성하긴' 했다.

문제는 프로젝트 퀄리티가 무박 2일 해커톤 산출물 보다 못한 것 같다는 개인적 생각....

우리는 두달을 달려왔다. (사실 '달려왔다'는 표현보단 '산책했다'는 표현이 적절해보인다.)

두달 동안 아래 기능들을 만들었다.

[1차 기능 리스트]

• 회원가입 / 로그인

• 투표 올리기 / 투표하기

끝.

과연 이 서비스를 누가 쓸까? 하는 생각이 들었다.

시중에 저런 기능을 가진 서비스는 너무너무 많지 않은가.

개발적으로도 오류가 많아서 QC를 진행할 때면 꼴보기 싫을 정도의 완성도였다.

(고민의참견은 웹에서 사용할 수 있는데, UI는 모바일 기준이어서 데스크탑에서 사용할 땐 너무 어색하기도 했다.)

❌ 나 이대론 런칭 못해. ❌

욕심 없이 시작했던 프로젝트에 욕심이 생겼다.

서비스 완성도가 낮은 상태에서 유저들에게 보여줄 수 없었다.

사실 내가 스스로 만든 서비스를 창피해하는 모습을 보고 싶지 않았던 것 같다.

6월이 되고 처음 이 서비스를 만들자고 했던 친구는 입대를 해버렸다.

웹 프론트 개발을 그 친구가, 백엔드를 내가 맡고 있던터라 새로운 프론트 개발자 팀원 두명을 구했다.

팀원을 구한 후 PM, 기획자, 디자이너를 맡은 슈퍼맨 지훈이는 서비스가 이뻐야 한다는 생각만 하고 차근차근 UI를 잡아가기 시작했다. (고마워 @신지훈 )

(지훈이의 기획, 디자인 회고록을 보고 온다면 고생이 잘 느껴질거다...)

그렇게 고민의참견 UI가 데스크탑에 맞게 변화해갔다.

(어우 이뻐)

웹 개발에선 Tailwind 프레임워크를 사용해 지훈이가 프로젝트 초반부터 열심히 정리한 디자인 시스템을 그대로 개발로 옮기기만 하면 되었다.

이 프레임워크 도입이 개발 속도 향상에 큰 도움이 되었다고 자신있게 말할 수 있다.

백엔드에서도 이것저것 기능을 추가하면서 생긴 리소스 단위 API들을 모두 리팩토링하기 시작했다.

가장 먼저 한 일은 Entity 모델링을 모듈화하여 불필요한 코드 중복을 줄이고, Service들의 독립성을 최대한 지키는 것이었다.

함수 하나를 수정할 때 고려할게 많아지면 안 된다고 생각하는데, 이전엔 뭐 하나 수정하면 다른 컨트롤러에서 문제가 터지는 경우가 많았다.

함수형 프로그래밍을 사랑하는 사람이 객체 지향을 공부하는 계기가 되었다.

🎊 v1.0.0 배포 완료 🎊

고민의참견 v1.0.0이 2023년 8월에 배포되었다.

배포후엔 좋은 기회로 9월 8일 ~ 9월 9일에 NE(O)RDINARY DEMODAY 부스에 참가하여 유저들의 고민들도 들어보는 소중한 기회를 가졌다.

📈 이제 다음 단계로 📈

데모데이가 끝나고 유저들의 고민들을 쭉 리스트업 해보았다.

행사에 참여한 사람들의 주 연령층이 대학생이어서 그런가 커리어, 진로에 대한 고민이 대다수였다.

우리 서비스를 들어와서 곰곰히 생각을 해봤다.

어떤 사람이 우리 서비스를 쓰지...?

대답을 할 수 없었다.

유저들을 위한 서비스 보단 포폴 목적으로 시작한 프로젝트라 당연히 답을 내릴 수 없었다.

다시, 우리 서비스는 쓸 이유가 전혀 없는 서비스이다.

하지만 나는 유저들이 없는 서비스는 가치를 제공하지 못하는 것이며 그건 내 성장에 도움이 되지 않으리란 걸 확신한다.

그래서 난 이제부터 유저들이 이 서비스를 사용하도록 만들 것이다.

3주마다 기능을 업데이트 하면서 반응을 보고 개선해 나갈 것이다.

아, 든든한 PM, 기획자, 디자이너였던 슈퍼맨 지훈이가 10월 초에 군대를 간다. (가지마... @신지훈 )

또 한번의 팀원 이별을 맞이하며....

이제 내가 바통을 이어 받아 이 세상 모든 청년들이 고민이 있을 때 우리 서비스를 찾을 수 있도록 고민의참견을 업그레이드 시키려고 한다.

다음 글은 조금 시간이 걸릴 것 같다.

더 업그레이드된 고민의참견과 함께 돌아오도록 하겠다...!

@유태형 님의 메이커로그를 보고 공감되는 문구가 있어서 태형님의 문구를 인용하며 글을 마친다.

아 재밌다

아 재밌어

😊 수줍은 자기소개 시간 😊

앞으로 디스콰이엇에 글을 간간히 남기게 될 것 같아 마지막으로 간단히 제 소개를 드리고 글을 마치려 합니다.

저는 현재 "그릿지"라는 원격 개발팀 구독 서비스에서 Product Manager로 일하고 있는 임민서라고 합니다 :)

앞으로 디스콰이엇에서 많은 글들을 통해 메이커분들과 소통하고 싶습니다 😄

두서없는 글 읽어주셔서 감사합니다.

앞으로 잘 부탁드립니다 🫡

축하드려요~화팅

항상 건강하세요~

에

데이터 분석가로 당당하게 태어나는 데분당태 챌린지