북마크 익스텐션 와이어프레임 만들기!! [2편]

⏪ 1편 내용 요약

앞서 저는 어떤 북마크 익스텐션이 사용자에게 유용할까 고민한 끝에 사용자 인터뷰를 직접 해보았습니다.

인터뷰 내용을 요약하자면 아래 내용과 같았습니다.

• 북마크의 경우 자주 가는 사이트일 경우 등록을 하지만 정말 중요한 링크나 다시 볼 것 같은 링크들은 노션이나 메모장에 기록했다. ( 많은 링크를 저장하는 경우가 적음 )

• 북마크를 많이, 자주 사용하게 하기 위해서는 사용자의 입맛에 맞게 쉽고 편리하게 분류를 도와주거나 자동으로 분류를 도와주는 기능을 개발하는 것이 좋아보인다.

• 크롬에서 제공하는 북마크 기능 (ex. 그룹으로 실행)들을 제공함으로써 크롬 북마크의 활용도를 높이는 것도 좋아보인다.

🌊 Service Flow 작성

사용자의 인터뷰를 통해 이번 프로젝트에서 어떤 기능을 구현해야할 지 또 그 기능이 어떤 흐름으로 동작하는 지 Service Flow를 간단하게 작성해보았다.

1) Bookmark, folder 조작 관련 (CRUD)

크롬 북마크 기본 내장되어 있는 기능이지만 크롬 북마크 익스텐션에 가장 우선되어야 하는 기능이라고 생각하였다.

2) 폴더 자동 분류 (AI)

사용자들의 크롬 북마크 사용을 늘릴 수 있는 기능, AI를 활용하여많은 북마크를 쉽게 분류할 수 있도록 할 수 있는 기능

3) 검색 기능

자동완성을 생각, 이름으로 북마크를 탐색하는 방법, AI로 북마크를 탐색하는 방법 두 가지 기능을 제공

4) 스위치 기능

크롬 상단 표시되어 있는 북마크를 쉽게 바꿔주는 기능
( 구글의 다계정 유도를 방해할 수 있다라는 의견도 있어서 우선순위를 제일 뒤로 미뤘습니다. )

📚 와이어 프레임 제작

위 Service flow를 토대로 실제 구현하는 것과 비슷하게 와이어 프레임을 제작했다. ( 디자인의 경우 위의 북마크 익스텐션을 참조를 많이 했습니다.)

사용자 편의성을 위해 신경 쓴 점

1. 별다른 설명 없이도 사용자들이 쉽게 알 수 있는 직관적 UI 제공
2. UI depth가 최대한 깊지 않도록 구현 (ex) A 버튼 클릭 -> B 버튼 클릭 -> C UI-> D UI-> 기능)

(위의 사진은 많은 프레임 화면 중 한 장면을 잘라서 올려놓은 것이다. 풀버전을 볼려면 이 피그마 링크를 클릭하세요)

⏩ 앞으로

위의 프레임을 토대로 기능을 구현, 사용자 피드백을 통해 좀 더 기능을 개선해나가는 방향으로 개발해볼 생각입니다.