[기획] 개인 프로젝트 '캐플라이어' 을 기획하다.

23년 차 웹/앱 서비스 기획자의 앱 기획 노하우를 공개합니다 : 네이버 블로그 (naver.com)

해당 내용을 참고로 작성한 게시글입니다.

 

---

프로젝트 주제 

개인의 캐릭터 굿즈를 공유, 홍보하는 서비스 공간

 

프로젝트 목적

캐릭터 굿즈는 주로 SNS로 공유되곤 한다.

하지만 SNS로 공유되는 굿즈는 사용자가 직접 SNS 검색을 통해 찾아봐야하는 번거로움이 있으며,

서비스에서 띄워주는 게시글은 흔히 말하는 알고리즘을 타야만 공유되는 단점이 있었다.

 

그렇기 때문에 캐릭터 굿즈를 공유하고 홍보하는 목적으로만 만들어진 서비스를 제작하여,

해당 목적을 가진 사용자에게 빠르고 효율적인 굿즈 검색 서비스를 제공하는 것이 목적이다.

 

프로젝트 이름

캐플라이어

' 캐릭터 ' + ' 플라이어' 를 합성한 단어이다.

의미를 직관적으로 담고 싶어서, 캐릭터나 굿즈를 홍보하는 전단지를 이미지하여 작명하였다.

 

제공하려는 서비스

메인 노출	메인에서 바로 몇가지 굿즈를 확인할 수 있도록 한다.
소개글	굿즈는 소개글을 통하여 소개되어야 한다.
굿즈 검색	여러가지 굿즈에 대한 '탐색'이 중점이 될 수 있도록 한다.

 

서비스의 구조

제공하려는 서비스를 기준으로 서비스의 구조를 구상했다.

메인 노출을 기본 서비스로, 사용자가 원하는 캐릭터를 찾을 수 있도록 검색 서비스도 제공하도록 한다.

 

서비스의 흐름

서비스의 구조를 기반으로 흐름을 작성했다.

사용자는 캐릭터나 굿즈를 확인하고 싶어하는 '방문자'와, 캐릭터나 굿즈를 알리고 싶어하는 '작성자'의 두 종류로 나뉜다.

방문자는 메인 노출과 검색기능을 통해 소개글을 확인할 수 있으며, 자세한 소개글을 확인할 수 있다.

작성자는 로그인을 통해 소개글을 작성한다. 작성된 소개글은 메인 노출 및 검색을 통해 홍보될 수 있다.

 

필요한 정보

기본적으로 비회원으로 소개글을 확인할 수는 있지만, 글을 작성하고 글에 의견을 나누는 것은 로그인한 사용자만 가능하다.

로그인한 유저는 선호 태그를 지정할 수 있고, 해당 선호 태그를 위주로 메인 노출을 수행한다.

검색에서는 제목, 태그를 통해 사용자가 원하는 종류의 굿즈나, 캐릭터를 찾아볼 수 있다.

소개글은 대표이미지와 제목, 내용 등이 필수로 필요할 것이고, 추가적인 내용으로 태그나 댓글, 좋아요한 사용자의 목록등이 있을 것이다.

전부 필수 구현을 위한 정보는 아니지만, 되도록 많은 정보를 마인드하기 위하여 상기되는 대로 정리해보았다.

 

중요 서비스

정리한 서비스를 우선순위 기준으로 정렬하여 작성해 보겠다.

1. 메인 화면에서의 노출이 가장 중요하다. 어떤 식으로 노출할 것인지 고민이 필요하다.
2. 검색 또한 중요하다. 사용자들이 캐릭터나 굿즈를 탐색하는 것이 목적이기 때문이다.
3. 소개글을 올리는 방식도 고민이 필요하다.

 

사이트 맵

서비스를 기준으로 필수 페이지만 작성했다.

메인 화면 검색을 통해 검색 리스트로 이동 할 수 있으며, 카테고리 별로 확인할 수도 있다.

최종적으로 사용자에게 관심있는 소개글로 진입할 수 있도록한다.

서비스 프로세스

메인 진입 시 로그인 여부를 통해 노출되는 글을 조정한다.

검색은 태그, 제목, 카테고리 별 기준으로 검색할 수 있다.

글 등록은 로그인 여부를 확인하며, 글 작성 후에는 글 수정 및 삭제도 고려할 수 있도록 한다.

 

화면흐름도

마지막으로 사이트 맵과 서비스 프로세스를 기준으로 화면흐름도를 작성하여 정리해보았다.

 

기술 스택

개발 언어

TypeScript

채택 이유

1. 앱 컵포넌트가 복잡해질 때, 지정 타입을 통해 의도하지 않은 오류를 줄이기 위함.
2. 또한 인터페이스와 타입 정리를 통해 코드를 의도대로 이해할 수 있게 하기 위함.

메인 프레임워크

Next.js

채택 이유

1. 저번 프로젝트 때, 컴포넌트 단위로 개발하여 협업에 용이하고, 동적 페이지에 유용한 React의 사용성이 좋았음.
2. 백엔드 팀이 없기 때문에 같은 개발 환경 내에서 개발하기 위함.
3. 가능하면 검색 엔진 최적화에 용이한 Server Side Rendering을 경험해 보기 위함.

CSS 라이브러리

Emotion

채택 이유

1. 컴포넌트와 스타일을 묶어서 한 번에 개발하는 CSS-in-JS 방식으로 코딩 효율성을 높이기 위함.
2. 자바스크립트의 변수 사용을 통해 스타일 값들을 통합 사용 및 통합적으로 조정하고 싶음.

버전 관리 시스템

Git ( GitHub )

채택 이유

1. 브랜치 관리를 시각적으로, 직관적으로 하고 싶음.
2. 마일스톤 및 이슈 관리를 하면서 진행하기 위함.

배포 서비스

Vercel

1. Next.js를 개발한회사가 운영하는 플랫폼이므로 Next.js에 최적화되어있음.
2. 간단한 배포방식과 Git 저장소를 인식하는 배포 자동화를 지원함.
3. 비상업적 용도에서 무료 플랜이 존재함.

---

이전의 팀 프로젝트에서는 바쁜 일정 탓에 기획서를 소홀히 한 부분이 있었다.

그 때문에 기능 구현에서 놓친 부분이 있거나, 구현을 하는 도중에 기능에 대한 고민을 한 적이 있었다.

 

그래서 저번 팀프로젝트에서 조금 아쉬웠던 기획 부분을 이번에는 세세하게 작성해보았다.

이번 기획을 통해 기능 구현 시에 불필요한 고민을 줄이고, 효율적인 구현 흐름을 기대하고 있다.

 

이번엔 규모가 작은 프로젝트라서 기획서의 내용 자체가 많지는 않지만,

디테일한 기획을 하는 것 자체는 의미있는 경험이라고 느꼈다.

 

다음주에는 이번 기획에 마저 못한 UX/UI 기획과 프로젝트에 대한 전반적인 계획을 작성할 예정이다.

마무리까지 나 자신 화이팅을 외쳐주고 싶다 .. !