🚀 서로 다른 우리가 결합되는 곳 ‘SHOOT’

🔗 Link : https://shoot-manage.com

SHOOT은 피그마 내 작업물과 댓글의 효율적 관리, 팀 메신저 연동을 통해 협업과 생산성 향상을 돕습니다.

🔫 팀 소개

기개디

기획자, 개발자, 디자이너의 연결을 돕는 협업 관리 서비스를 만들고자 하는 팀 기개디입니다!

분야	이름	포지션
기획	오남택	PM, 서비스 기획(서비스 정책 확립, 유저 리서치, 와이어프레임 작성, UX writing)
기획	류가언	서비스 기획(서비스 정책 확립, 유저 리서치, 와이어프레임 작성, UX writing)
기획	장수정	서비스 기획(서비스 정책 확립, 유저 리서치, 와이어프레임 작성, UX writing)
디자인	진성이	디자인 리드, UX/UI 디자인, GUI 디자인, Lottie 애니메이션
디자인	박세린	UX/UI 디자인, GUI 디자인, Lottie 애니메이션
프론트엔드	류주아	프론트엔드 리드, 화면 UI 구현, 서버 연동
프론트엔드	이예나	화면 UI 구현, 서버 연동
백엔드	김수진	백엔드 리드, DB 및 API 구축, 서버 배포
백엔드	유지선	DB 및 API 구축, 서버 배포

✅ USER RESEARCH (문제 인식)

❗

Main PAIN POINT : 기존 FIGMA 내 서비스 한계로 인한 생산성 저하와 협업의 불편함

핵심가설 : Figma를 활용한 협업시 사람들은 코멘트 기능과 관련하여 가장 불편함을 많이 느낄 것이다. ** 설문 조사 결과를 반영하여 가설 일부 채택 : 방대한 양의 프레임 관리** → 알림 기능 → 코멘트 기능 순으로 불편함을 느낌

✅ Problem (문제 정의)

Problem 1. 늘어만 가는 작업물과 코멘트, 효율적으로 관리할 수 없을까?

“작업을 하다 보면 프레임이 늘어나는데, 분류가 안되니까 관리가 안돼요.” ”코멘트까지 생기면 정말 뭐가 뭔지를 모르겠습니다.”

Problem 2. 태그하고 나서도 또 리마인드 해야 돼?

“제가 태그한거 보셨어요?” “피그마 이메일 알람이 왔어요?”

타겟층

1. 핵심 대전제: 피그마 사용자
2. 중전제
   1. 팀
      1. 피그마 내에서 다양한 파트의 팀원들과 협업하고자 하는 사람
      2. 피그마 이메일 알람이 왔음에도 인지를 못한적이 있는 사람
   2. 개인
      1. 늘어가는 피그마 작업물에 어려움을 겪고 있는 사람
         • 작업물 최신 관리가 안됨
         • 프레임의 양이 방대함
      2. 기존 피그마 코멘트 기능에 불편함을 겪고 있는 사람
         • 코멘트와 작업물이 뒤섞이게 되면 작업 화면이 번잡해짐
         • 코멘트의 양이 많아져서 관리가 안됨

페르소나

개인 작업자

팀 작업자

유저저니맵

✅ Solution (해결책)

💡

SHOOT YOUR CREATIVE OUTPUT !

Figma를 더 똑똑하게 사용하는 방법, SHOOT FOR FIGMA

Solution 1. SHOOT은 피그마 내 작업물과 코멘트를 ‘폴더와 파일’처럼 관리할 수 있는 피그마 플러그인 서비스입니다.

💡

작업물 폴더 생성, ARCHIVE

• ARCHIVE 란, BLOCK들이 모인 일종의 폴더를 의미합니다.
• 바탕화면에서 폴더를 생성하듯이 [Create 클릭 > 이름 설정 > Save 클릭] 을 통해 생성합니다.

💡

이슈 영역 설정과 팀원들과의 소통, BLOCK

• BLOCK 이란, 유저에 의해 지정되는 영역을 말합니다.
• [Create 클릭 > 영역 지정 > Save 클릭] 을 통해 생성합니다.
• 하나의 ARCHIVE 안에 여러 개의 BLOCK이 있을 수 있으며, 하나의 BLOCK 단위로 SHOOT COMMENT 를 통해 팀원과 소통이 가능합니다.

💡

코멘트에 대한 확실한 관리 기능 제공, SHOOT COMMENT

“수많은 코멘트들 중에서 내가 해결해야 할 일, 하고 있는 일, 해결했던 일들이 구분이 안돼요.” ”코멘트가 많아지면 화면이 번잡해져요.”

상단부 탭과 하단부 탭에서 SHOOT COMMENT 상태 변경을 통해 업무 상황 공유

나를 멘션한 SHOOT COMMENT만 모아볼 수 있는 ‘Mentioned 탭

• BLOCK 안에 SHOOT COMMENT 를 통해 팀과 소통할 수 있습니다.
• 이때 유저들은 각각의 SHOOT COMMENT 에 대해 [YET - DOING - DONE] 으로 상태 표시가 가능하며,
  • 서비스 상단부 SHOOT COMMENT 에서 각 상태별로 모아볼 수 있으며,
  • 해당 상태 표시가 팀원들에게 공유되어, 해당 테스크의 진행 상황 공유로 이어집니다.
• 상단부 탭에서는 ‘@’ 탭을 제공하여, 유저는 자신이 멘션된 SHOOT COMMENT 만 모아볼 수 있습니다.

Solution 2. SHOOT은 어떠한 알림도 놓치지 않도록 합니다.

💡

팀원 태그 시, 연동된 팀 메신저(Discord, Slack)로 알림 전송

이미지 설명

• 분명한 알람으로 혼선 최소화합니다.
• 메시지 클릭 시 해당 SHOOT COMMENT로 바로 이동할 수 있습니다.

IA (정보구조도)

✅ 차별성

경쟁사 분석

시중의 SaaS 툴 중, 웹 환경에서의 사용이 가능한 서비스를 대상으로 진행하였습니다.

	Notion Boost	Zeplin	InVision	Asana
주요 타겟층	Notion 사용자	- 디자이너- 개발자	프로토타입 관련 협업이 필요한 팀	모든 산업에서의 프로젝트 팀
프로그램사용 방식	크롬 확장 프로그램	- 웹 서비스- 데스크탑 앱	웹 서비스	- 웹 서비스- 데스크탑 앱- 모바일 앱 서비스
특징	Notion을 효율적으로 사용하기 위한 편의 기능 탑재	디자인과 개발자 간 협업을 지원하는 툴	디자인 프로세스 관리가 용이한 디자인 협업 플랫폼	팀 협업과 의사소통에 최적화된 툴
MVP	- 머리글 고정- 무한 스크롤 용이- 다양한 테마	- 디자인 사양 구체적으로 전달- UI 요소 자동 추출 및 공유	- 디자인 프로토타이핑- 실시간 협업 및 피드백 관리	- 협업 일정 관리- 프로젝트 작업물 관리
가격 정책	무료	- 무료 플랜 제공- 유로 플랜: $8/월 (1인당)	- 무료 플랜 제공- 유료 플랜: $9.95/월 (1인당)	- 무료 플랜 제공- 유료 플랜: $10.99/월 (1인당)

포지셔닝맵

핵심 차별점 (vs. 피그마 코멘트 기능)

🔫 디자인 무드보드

✅ 서비스 컨셉

✅ 디자인시스템

✅ GUI

웹사이트

메인 홈페이지 UI

MY PAGE UI (1)

MY PAGE UI (2)

플러그인

피그마 플러그인 로그인 UI	SHOOT COMMEN__EMPTY UI

SHOOT COMMENT YET UI	SHOOT COMMENT DOING UI

SHOOT COMMENT DONE UI	SHOOT COMMENT MENTINED UI

CRETE_ARCHIVE	CREATE_ARCHIVE

CREATE_BLOCK	CREATE_BLOCK

CREATE_SHOOT	CREATE_SHOOT

Stack

FE

PLUGIN

• boilerplate를 사용하여 프로젝트의 초기 설정과 기본 구조를 표준화해 개발 시간을 단축하고, 코드의 일관성을 유지하며, 중복 작업을 줄여 생산성을 높이는 동시에 유지 보수성을 향상시켰습니다.

• UI와 플러그인 코드는 서로 직접적으로 API에 접근할 수 없습니다. 이러한 문제를 해결하고 데이터를 주고받기 위해 postMessage와 onmessage를 사용합니다. UI는 브라우저 API를 통해 postMessage와 onmessage를 사용할 수 있고, 플러그인 코드는 플러그인 API에서 제공하는 postMessage와 onmessage를 통해 통신합니다. 이를 통해 두 영역 간의 통신이 가능해집니다.

• 플러그인에서는 외부 이미지를 직접 받아오거나 로드할 수 없습니다. 이는 플러그인이 실행되는 Sandbox 환경의 제약 때문으로, 외부 리소스에 대한 직접적인 네트워크 요청이 차단됩니다. 이를 해결하기 위해 프록시 서버를 설정하는 방법을 사용하였습니다. 프록시 서버는 플러그인과 외부 리소스 간의 중계 역할을 하며, 외부 이미지 URL에 대한 요청을 받아 필요한 데이터를 대신 가져온 뒤, 플러그인에 반환합니다. 이렇게 하면 플러그인은 외부 서버와 직접 통신하지 않고, 프록시 서버를 통해 데이터를 안전하게 받을 수 있습니다.

PLUGIN 기술 스택 선정 이유

boilerplate

• 프로젝트의 초기 설정과 기본 구조를 표준화하여 개발 시간을 단축하고, 코드의 일관성을 유지하며, 중복 작업을 줄여 생산성을 높이는 동시에 유지 보수성을 향상 시킵니다.

React

• 컴포넌트 기반 아키텍처를 제공하여 UI를 작은 단위로 나누어 재사용 가능하게 하고, 유지보수성과 확장성을 극대화합니다. 또한 Virtual DOM을 활용해 효율적인 렌더링 성능을 제공합니다.

Typescript

• javascript에 타입 시스템을 추가하여 코드의 오류를 사전에 방지합니다. 타입 안정성 덕분에 코드를 작성할 때 명확한 타입 정보를 제공하여 개발 중 오류를 줄이고, 코드 가독성과 유지보수성을 향상 시킵니다.

Recoil

• React와 자연스럽게 통합되는 간단하고 직관적인 API를 제공하며, 컴포넌트 기반으로 유연하게 상태를 관리할 수 있습니다. 또한 비동기 상태 관리와 파생 상태(Selector) 처리에 강점이 있어 데이터 흐름을 효율적으로 처리하며, 경량화된 구조로 대규모 애플리케이션에서도 성능과 확장성이 뛰어납니다.

WEB 기술 스택 선정 이유

React

• 컴포넌트 기반 아키텍처를 제공하여 UI를 작은 단위로 나누어 재사용 가능하게 하고, 유지보수성과 확장성을 극대화합니다. 또한 Virtual DOM을 활용해 효율적인 렌더링 성능을 제공합니다.

Typescript

• javascript에 타입 시스템을 추가하여 코드의 오류를 사전에 방지합니다. 타입 안정성 덕분에 코드를 작성할 때 명확한 타입 정보를 제공하여 개발 중 오류를 줄이고, 코드 가독성과 유지보수성을 향상 시킵니다.

TailwindCSS

• 유틸리티 클래스 기반으로 빠르고 직관적인 스타일링이 가능합니다. 커스텀 마이징을 쉽게 할 수 있어 다양한 디자인 요구에 유연하게 대응할 수 있습니다.

Vite

• 빠른 개발 서버와 빌드 속도를 제공하여 생산성을 높입니다. 모듈화를 지원하며 코드 변경 시 실시간 업데이트가 빠르게 이루어져, 개발 환경에서 즉각적인 피드백을 받을 수 있습니다.

Netlify

• Netlify는 Git과 연동되어 코드 변경만으로 자동 배포가 가능하며 HTTPS도 기본 제공해 보안과 편의성을 높일 수 있습니다. 전 세계에 분산된 CDN을 통해 빠른 속도로 콘텐츠를 제공하고, 서버리스 함수와 도메인 관리 기능을 통해 확장성과 간편함을 함께 제공합니다. 이러한 이유로 배포와 관리의 부담을 크게 줄이기 위해 선택하였습니다.

axios

• HTTP 요청을 간단하게 처리할 수 있는 라이브러리로, 비동기 통신을 쉽게 관리합니다. Promise 기반의 API로 데이터를 주고받는 작업을 효율적으로 처리하며, 요청 및 응답에 대한 세밀한 설정이 가능합니다.

BE

Stack

Spring Boot

• 설정이 간소화되어 있어 빠른 프로젝트 생성이 가능했고, 내장된 톰캣 서버로 간편한 애플리케이션 배포를 할 수 있습니다.
• 두 백엔드 팀원의 주 스택이 Spring Boot이기 때문에 선택하게 되었습니다.

MySQL

• 관계형 데이터베이스로, 데이터의 일관성과 무결성을 보장합니다.
• 대규모 데이터 저장 및 관리에 적합하며, 다양한 쿼리 기능을 제공합니다.

Redis

• 인메모리 데이터베이스로 빠른 읽기 및 쓰기 성능을 제공합니다.
• 리프레시 토큰 등을 저장하고, 실시간 데이터 처리를 위해 선택했습니다.

JUnit

• 자바 애플리케이션이 단위 테스트를 위해 사용합니다.
• 배포에서의 안정성을 위한 테스트 코드 작성을 위하여 선택했습니다.

Docker

• 애플리케이션을 컨테이너화하여 일관된 실행 환경을 제공합니다.
• 배포 및 확장이 용이하며, 개발, 테스트, 배포의 효율성을 높이기에 선택했습니다.

JPA

• 자바 애플리케이션에서 데이터베이스와의 상호작용을 단순화합니다.
• ORM 기능을 지원하고, 데이터베이스 독립성을 제공하여 선택했습니다.

Spring Security

• 애플리케이션의 인증 및 인가를 관리합니다.
• 다양한 보안 기능을 간단한 설정을 통해 진행할 수 있어 선택했습니다.

Jacoco

• 코드 커버리지 도구로, 테스트가 코드의 어떤 부분을 실행했는지 확인할 수 있으며, 시각화를 통해 테스트 범위를 측정할 수 있습니다.
• 테스트 코드 작성 시의 더욱 안전한 애플리케이션을 구성하기 위하여 선택했습니다.

Sentry

• 애플리케이션의 오류 추적 및 모니터링 도구로, 실시간으로 오류를 감지하고 보고합니다.
• 에러를 빠르게 확인할 수 있어 문제 발생 시 해결 시간을 단축할 수 있어 선택했습니다.

Github Action

• CI/CD 파이프라인을 자동화하여 코드 배포를 효율적으로 관리합니다. 다양한 이벤트 기반 워크플로우를 지원합니다.
• 다른 CI/CD 도구에 비하여 간편하게 설정 가능하고 다양한 동작을 수행할 수 있어 선택했습니다.

Terraform

• 다중 클라우드 배포 환경에서 선언적 구문을 통해 인프라의 현재 상태를 추적하고 효율적으로 관리할 수 있습니다.
• 배포환경에 대하여 상태관리 및 자동화를 통해 효율적이고 일관된 인프라 관리를 하기 위하여 선택했습니다.

ERD

Architecture

Convention

Commit Convention

feat : 구현한 내용

feat	새로운 기능 구현
add	파일 및 코드 추가
chore	부수적인 코드 수정 및 기타 변경사항
docs	문서 추가 및 수정, 삭제
fix	버그 수정(코드 고치기)
rename	파일 및 폴더 이름 변경
test	테스트 코드 추가 및 수정, 삭제
refactor	코드 리팩토링
ci/cd	ci/cd, 배포 관련

BRANCH

• 컨벤션명/#이슈번호

• pull request를 통해 develop branch에 squash & merge 후, branch delete

• 부득이하게 develop branch에 직접 commit 해야 할 경우,

  !hotfix : 구현 내용 사용

ISSUE TEMPLATE

---

[Feat] 구현할 내용

## ✨ 이슈 내용
> 

## 💡 작업 내용
- [ ]
- [ ]

## 📌 참고 사항

PR TEMPLATE

---

[Feat] 구현한 내용

## #️⃣ 관련 이슈
- #

## 💡 작업내용

## 📸 스크린샷(선택)

## 📝 기타
(참고사항, 리뷰어에게 전하고 싶은 말 등을 넣어주세요)