이 문서는 스타셸 스튜디오에서 와이어프레임과 유저스토리를 통해 어떻게 제품을 기획하고 만들어나가는지 설명합니다.

유저스토리와 와이어프레임

유저스토리란 서술 형태로 기록된 소프트웨어의 기능적 요구사항을 사용자 입장에서 정리한 것입니다. 즉, 우리 앱을 사용하는 "사용자"(관리자가 될 수도, 고객이 될 수도 있습니다)가 우리앱에서 '왜', '무엇을' 수행하는가를 설명합니다.

와이어프레임은 사용자가 보는 화면을 실제로 개발하지 않고 시각화 하여 볼 수 있도록 그림으로 나타낸 자료입니다. 소프트웨어가 처음 실행될 때 부터, 내용이 어떤 형태로 표시될 지, 버튼을 눌렀을 때 어떻게 보일지 까지 자세히 묘사합니다.

왜 해야 할까요?

소프트웨어 개발은 마치 집을 짓는 일과 비슷합니다. 보통 누가 들어가 살 것이냐에 따라 집의 규모와 요구사항을 정리합니다. 예를들면 거실, 주방, 방 3개, 화장실 2개와 같은 형태로요. 그리고 그 요구사항에 맞춰서 부지의 형태나 예산에 맞추어 배치나 자재를 선택하게 됩니다. 그리고 실제로 건축을 들어가기 전 하중을 잘 견디는지 방문이 벽에 걸리진 않는지 등을 보기 위해 설계도를 그립니다. 그 설계도를 보고 건물이 지어지게 되죠.

만약 이러한 과정을 거치지 않고서 바로 집을 짓겠다고 철근과 나무부터 잘라버린다면, 사이즈가 맞지 않는다거나, 이전의 작업이 잘못되어 다시 허물어야 할 수도 있습니다. 다시 지으면 되기야 하겠지만, 지금껏 들어간 시간과 돈은 보상받을 수 없습니다.

이것이 바로 "유저스토리"와 "와이어프레임"을 통한 프로토타이핑이 필요한 이유입니다.

우리는 소프트웨어를 개발함에 있어 헛되이 쓰이는 돈과 시간이 없도록 우리 제품의 사용자들이 필요로 하는 기능이 무엇인지 알고, 그 기능을 어떻게 구현할지 논의하며, 최종적으로 구현되었을 때 사용하는데 문제가 없는지 검증하기 위해 "프로토타이핑" 작업을 합니다.

유저스토리 작성하기

유저스토리는 워낙 보편적인 소프트웨어 개발 요구사항 정리 기법이기에 굉장히 다양한 형태의 유저스토리가 존재합니다만, 스타셸 스튜디오는 기본적으로 누가, , 무엇을을 포함하는 하나의 문장과, 스토리에 대한 세부적인 요구사항을 정리한 인수조건으로 구성된 유저스토리 작성 방법을 사용합니다.

흔히 유저스토리를 작성할 때 누가, 무엇을에 대한 이야기만을 떠올리기 쉽지만, 부분이 정말 중요하다는 사실을 잊지마세요. 개발자나 디자이너, 그리고 여러분의 기획을 함께 도와줄 기획자가 본 기능의 기획 의도를 파악하고 본 기능이 제 역할을 하도록 참고하는데 정말 중요한 가이드가 됩니다. 또한 기획 의도에 맞는 더 나은, 간단한 구현 방법이 있는 경우 제안을 드릴 수 있습니다.

또한 인수조건은 해당 기능이 구현되는데 있어, 꼭 필요한 요구사항을 정의합니다. 예를들면, 아이디, 비밀번호의 규칙이 이에 해당합니다. 필요한 UX적, 디자인적 요구사항이 있다면 필히 인수조건에 기재해주세요.

단순히 텍스트로 작성되기 때문에 워드, 한글 등 다양한 툴로 적어도 문제가 없지만 스타셸은 고객님과 함께 유저스토리를 작성하고 피드백하기 위해 현재 보고계신 도구, Notion을 사용하고 있습니다. Notion은 마크다운(Markdown)을 기반으로 문서에 스타일을 입힐 수 있습니다.

## 누가 (주체: ~는)

### 무엇을 (기능: ~합니다)
왜 (목적 및 이유: ~하기 위해)
- 어떻게 1 (인수조건)
- 어떻게 2

기본적인 유저스토리의 틀은 위와 같은 구조를 따라 입력됩니다. 위와 같은 구조로, 핀터레스트 앱을 사례로 실제 예시를 들어 작성해보겠습니다. 만약 핀터레스트에 대해서 처음 들어보신다면 여기를 눌러 알아보세요.

핀터레스트 관리자 페이지는 외부인은 접근할 수 없으므로 그 기능을 상상하여 작성해보겠습니다.

## 사용자

### 보드 만들기
새로운 주제로 이미지들을 모으기 위해
- 보드 이름을 입력합니다.
- 비공개 여부를 설정합니다.

### 보드에 사진 추가
검색한 이미지를 비슷한것 끼리 모아두기 위해
- 어떤 보드에 사진을 추가할지 선택하고 저장을 누릅니다.
- 가장 마지막에 사용한 보드를 기본적으로 선택해둡니다.
- 저장을 누르면 저장이 완료될 때 까지 로딩이 표시되고 완료시 성공 메시지를 표시합니다.

### 이미지 신고하기
선정적이거나 도덕적 기준에 어긋나는 이미지를 관리자에게 삭제 요구하기 위해
- 신고 사유를 텍스트로 간단히 적습니다. 적지 않아도 건너뛸 수 있습니다.
- 제출시 신고가 완료되었다는 메시지를 표시합니다.

...

## 관리자

### 신고 내역 보기
신규로 들어온 신고 요청을 보고 조치하기 위해
- 조치 상태가 표시됩니다.
- 신고된 이미지가 표시됩니다.

### 신고 처리 결과 이메일 보고
신고자가 자신이 제출한 신고에 대한 처리 결과를 알 수 있도록
- 신고자의 계정에 등록된 대표 메일로 발송됩니다.
- 삭제 여부가 표시됩니다.
- 손수 작성한 간단한 메시지가 포함됩니다. 적지 않아도 건너뛸 수 있습니다.

...

핀터레스트의 수많은 기능 중 정말 극히 일부의 기능만을 정리해보았습니다. 이 외에도 회원가입, 로그인, 검색, 사진 업로드 등 정말 다양한 기능이 아직 숨어있습니다. 우리는 이를 토대로 소프트웨어를 개발해 나갈 것이기 때문에 내용이 빠짐없이 작성될 수 있도록 유의해주세요. 스토리는 무수히 늘어날 수 있으며, 필요에 따라 인수 조건을 더 꼼꼼히 채워넣을 수 있습니다.

처음부터 제품의 처음부터 끝까지 방대한 유저스토리를 작성할 필요는 없습니다. 지금 바로 우리 소프트웨어의 사용자에게 가치를 제공할 수 있는 최소의 기능들만 가지고 MVP(최소요건제품: Minimum Viable Product)을 기획해보세요. 기획을 조금 더 빠르게 진행하실 수 있습니다.