유아이볼 북마크 개선: “저장하는 경험” 다시 설계

by uibowl
표지_설계.png

안녕하세요, 유아이볼 인턴 디자이너 권예인입니다. 유아이볼에는 ‘필요한 UI 패턴을 빠르게 찾기 위해’ 사용자들가 많아요. 하지만 기존 유아이볼 북마크 경험은 저장까지만 가능하고, 정리와 재사용으로 잘 이어지지 않는 구조였어요. 그래서 북마크 기능을 “필수 기능”처럼 활용하는 사용자는 많지 않았어요.


이번 개선에서는 저장 → 정리 → 재사용까지 이어지는 북마크 경험을 다시 설계했어요. 특히 이번 글에서는 “무엇을 만들었는지”보다, 사용자 인터뷰와 UT를 여러 번 반복하며 어떻게 설계를 검증했는지를 중심으로 정리해보려고 해요.




문제 정의:

“마음에 드는 화면 저장” 수준에 머문 북마크

before.png

기존 유아이볼의 북마크는 저장물이 하나의 리스트에만 쌓이는 구조였어요. 저장 이후 분류가 어렵다 보니, 다시 찾기까지의 비용이 높았고 자연스럽게 재방문 동기도 떨어졌어요.


설문조사 결과는 이를 명확하게 보여줬어요.

유아이볼 북마크 유용성: 평균 2.6 / 5점
응답 70%: 유아이볼 북마크 “거의 사용하지 않음”


저장물이 쌓일수록 오히려 찾기 어려워지고, 결국 작업 단계에서는 피그마로 바로 복사하는 것이 더 빠른 흐름이 반복됐어요. 그래서 이번 개선의 목표는 명확했어요.

저장 이후의 혼란을 줄이고(정리)

다시 찾기 쉬운 구조를 만들고(재방문)

작업 흐름(피그마)과 연결되는 지점을 강화하기(재사용)


북마크 경험을 개선해서 북마크 체류 시간과 저장 건수를 올리기 위해, PRD 작성 이후 가장 먼저 한 일은 사용자를 직접 만나는 것이었어요.



리서치 플로우: 3단계 검증

한 번의 인터뷰로 결론을 내리기보다, 서로 다른 사용자 집단에서 답을 얻고 싶었어요.

그래서 유아이볼 사용자와 북마크 헤비유저를 분리해 리서치를 진행했어요.

1차 인터뷰: 유아이볼 사용자의 현재 북마크 사용 방식 파악

2차 인터뷰: 북마크 기능을 자주 쓰는 헤비유저의 저장 습관 분석

3차 UT: 위 결과로 만든 프로토타입 태스크 기반 검증



1차 인터뷰:

유아이볼 사용자는 ‘목적형 탐색자’

“유아이볼 유저는 지금 어떤 흐름으로 탐색하고, 어떤 방식으로 저장하고 있나?” 인터뷰를 통해 확인한 공통점은 명확했어요.


공통 인사이트 1) 유아이볼 유저는 ‘명확한 목적’이 생겼을 때 들어온다

행동.png

핀터레스트처럼 영감 탐색을 오래 하거나, 무드 수집을 하는 흐름과 달랐어요. 유아이볼 사용자는 “지금 당장 필요한 기능 패턴을 확인해야 할 때” 들어오는 경우가 압도적으로 많았어요. 탐색 자체가 업무 맥락과 강하게 연결된 사용자였어요.


공통 인사이트 2) 폴더링 니즈는 선택이 아니라 필수에 가깝다

모든 인터뷰이가 폴더링 필요성을 “매우 높음”으로 언급했고, 기준도 유사했어요.

저장 기준 = 프로젝트/기능 단위

중요한 건 “폴더가 있으면 좋겠다”가 아니라, 폴더가 없으면 저장물이 의미를 잃는 구조라는 점이었어요.


공통 인사이트 3) 최종 정리 공간은 피그마

“저장해도 결국 피그마에 붙여넣는다”는 흐름이 많았어요. 현재 그 중간 단계에서 끊기는 느낌이 컸습니다.




2차 인터뷰:

북마크 헤비유저는 “저장 기반으로 탐색을 지속”

“헤비유저들은 실제로 저장/정리를 어떤 방식으로 습관화했을까?”

“정말 저장/정리를 잘 하는 사람들은 어떤 방식으로 습관화하고 있지?”


2차 인터뷰에서는 ‘유아이볼 안에서의 사용’보다 디자인 레퍼런스 저장 자체를 잘 하고, 많이 하는 헤비사용자의 방식을 관찰하고 싶었어요.

대상: 핀터레스트/모빈/비핸스 등 다 사용하는 레퍼런스 헤비유저, 유아이볼 경험 있는 PD
- 평일 거의 매일 레퍼런스 서비스 사용
- 출퇴근 시간에는 모바일로도 자주 탐색
- 핀터레스트(1순위), 모빈(해외 트렌드) 등 다수 서비스 사용


핵심 인사이트 1) 핀터레스트는 “저장 = 다음 탐색의 시작”이 된다

핀터레스트를 주로 사용하는 사용자는 저장 기반으로 탐색이 계속 이어짐을 장점으로 많이 언급했어요. 즉, 저장 버튼 클릭 후 끝이 아니라 “탐색을 지속시키는 장치”가 주요 흐름이었어요.


핵심 인사이트 2) 모빈은 저장과 정리를 ‘흐름으로’ 묶어둔다

헤비유저가 모빈을 사용하는 방식을 관찰했을 때, 저장이 단독 행동으로 끝나지 않고 저장 → 즉시 폴더 선택으로 자연스럽게 이어졌어요. 특히 저장과 동시에 폴더를 지정하는 구조 덕분에, 정리가 별도의 단계가 아니라 하나의 연속된 플로우처럼 작동하고 있었어요.


핵심 인사이트 3) 피그마 내보내기/복사는 여전히 가장 강력한 ‘재사용’ 방식

피그마 복사/내보내기는 여전히 가장 강력한 재사용 방식이었어요. “폴더 정리” + “피그마로 가져가기”는 기능 수준이 아니라 사용자 습관 수준에서 이미 존재하는 흐름이었어요.




북마크 MVP 설계:

HMW를 두 개로 압축

HMW 1 어떻게 하면 탐색 흐름을 방해하지 않으면서, 저장과 분류를 동시에 지원할 수 있을까?

HMW 2 어떻게 하면 사용자가 저장 맥락에 맞게 정리하고, 나중에 다시 찾기 쉽게 만들 수 있을까?

결론.png

1차/2차 인사이트를 바탕으로 기능을 정리하면 아래와 같아요.

- 저장물의 목적/맥락을 잃지 않게 설계하기

- 사용자가 프로젝트 단위로 빠르게 정리할 수 있게 설계하기

- 작업 흐름(피그마)으로 재사용이 자연스럽게 이어지게 설계하기




프로토타입 UT:

태스크 기반 사용성 검증

정의한 핵심 기능을 바탕으로 프로토타입을 만들고, 사용자가 실제로 태스크를 성공할 수 있는지(성공률), 막히는 지점은 어디인지(혼란 포인트)를 검증했어요.


UT.png

1) 저장/해제 상태는 ‘확신’이 부족하면 즉시 재확인이 발생한다

새 폴더 생성 및 기본 저장 플로우는 5명 전원 성공했어요. 하지만 5명 중 2명이 저장 완료 후 무의식적으로 드롭다운을 다시 열어 상태 재확인했어요. 기능은 이해했지만, “정말 저장됐는지”에 대한 확신은 부족했어요.

→ 작은 토스트 메시지처럼 보이는 피드백 요소가, 실제로는 사용자 불안을 줄이는 매우 중요한 지점이라는 것을 확인했어요.


2) 사용자의 멘탈 모델은 ‘컬렉션’보다 ‘폴더’에 가깝다

참여자 5명 중 3명, 60%가 자연스럽게 “폴더”라는 단어를 사용했어요. 저장 맥락에서 사용자가 떠올리는 개념은 ‘컬렉션’보다 ‘폴더’에 가까웠어요.

→ 기능은 이해해도 언어가 멘탈 모델과 어긋나면 설명 비용이 생긴다는 걸 확인했고, 컬렉션 → 폴더 로 워딩을 수정했어요.


3) 피그마 내보내기는 ‘유용하지만 발견하지 못하면 없는 기능’이 된다

참여자 5명 중 3명이 망설임 끝에 성공했고, 2명은 실패했어요. 실패 원인은 기능 이해 부족이 아니라, 버튼 위치와 시각적 강조 부족으로 인한 발견성 문제였어요.

→ 기능은 긍정적으로 평가되었지만, “보이지 않으면 사용되지 않는다”는 점을 확인했어요.


그래서 인사이트를 바탕으로 개선 방향을 다시 정리했어요.

저장·해제 상태 인지 강화

멘탈 모델 정합성 개선 (워딩 & 구조)

플로우 저장 피드백 강화

피그마 내보내기 발견성 개선

모바일 UX 방향성 개선




그래서 무엇이 바뀌었나요?

(핵심 기능 5가지)

저장 순간에 어디에 저장되는지가 보이고, 정리 기준(프로젝트/기능)으로 구조화할 수 있고, 필요한 화면을 복수로 추려 담고, 그 결과물이 피그마로 바로 이어지는 흐름이에요.


기능 1) 폴더 기능 신설

폴더별 관리.png

이제 북마크를 폴더별로 관리할 수 있어요. 프로젝트(예: 검색 개선/온보딩/결제) 기준으로 모아두면, 다시 찾는 비용이 확 줄어들어요.



기능 2) 폴더별 피그마 내보내기

폴더별 피그마 내보내기.png

폴더에 모아둔 레퍼런스를 폴더 단위로 바로 피그마로 내보내기 가능해요. 간편하게 하나의 폴더로 관리하고, 한번에 피그마로 내보내요.



기능 3) 저장 UX 개선 — 최근 사용 폴더 미리보기

기본 저장.png

폴더명이 보이기 때문에 “어디에 저장되는지”가 명확해지고, 저장 속도도 빨라져요. 예를 들어 ‘검색개선’ 폴더에 저장했다면, 다음 저장 순간에도 최근 사용 폴더가 미리 노출돼요. 매번 폴더를 다시 찾지 않아도 더 빠르게 저장할 수 있어요!



기능 4) 복수 선택 → 한 번에 폴더 저장

복수저장.png

이제 스크린을 하나씩 저장하지 않아도 돼요. 필요한 화면 여러 개 선택해서 한 번에 폴더에 저장 할 수 있어요.



기능 5) 메모 기능 추가

메모.png

“이거 참고!”, “이 포인트는 이 부분!” 같은 저장 이유가 사라지지 않도록, 짧은 메모를 북마크에 남길 수 있어요. 저장 이유(맥락)를 함께 기록하면, 나중에 다시 찾을 때 편리해요.




마무리

인터뷰를 통해 여러 사용자를 만나면서, 유아이볼의 사용자 페르소나를 더 선명하게 이해할 수 있었어요. 그리고 그에 맞는 저장 UX와 정책을 설계하는 과정은 생각보다 훨씬 많은 고민이 필요했어요.


유아이볼 유저는 “영감을 수집하는 사람”이라기보다, “지금 필요한 답을 찾는 사람”에 가까웠어요. 그래서 북마크도 단순 저장 기능이 아니라 탐색 흐름을 유지하면서, 프로젝트 단위로 정리하고, 작업으로 재사용되게 만드는 경험으로 설계해야 했어요. 이번 글이 “북마크 기능 추가”보다 왜 그렇게 설계했는지가 더 잘 전달됐으면 좋겠어요!


북마크 사용하러 가기


매거진의 이전글유아이볼 앱/웹 캡처 및 콘텐츠 제작자 채용