프로젝트의 기획부터 디자인까지 : buddy-guard 탄생기
사이드 프로젝트를 시작할 때 가장 먼저 고민했던 부분은 주제 선정이었습니다.
프론트엔드 개발자로서 구현하고 싶은 기능도 많고, 평소 불편했던 점들도 떠올리며 아이디어를 모아갔습니다.
그러나 주제 선정이 생각보다 쉽지는 않았습니다. 각자의 의견과 관심사가 다양했기 때문에, 여러 아이디어를 비교하고 고민하는 시간이 필요했습니다.
이미 서비스 되고 있는 것들도 많았습니다..😂
브레인스토밍으로 주제 선정
우리는 브레인스토밍 기법을 사용해 각자 생각해 온 주제와 관심 있는 기능들을 나눴습니다. 팀원들이 어떤 문제를 해결하고 싶어 하는지, 어떤 기능을 구현해 보고 싶은지 이야기를 나누며 점차 프로젝트의 윤곽이 잡혀갔습니다. 이를 통해 주제를 좁혀나갔지만, 빠른 진행을 기대했던 것과 달리 주제를 정하는 데 생각보다 시간이 걸렸습니다.
회의 기록을 남기기 위해 노션(Notion)을 사용했는데, 매 회의마다 회의록을 작성하면서 의견이 어떻게 발전해 나갔는지 추적할 수 있었습니다.
같은 내용을 들어도 각자의 해석이 달라질 수 있기 때문에, 단순한 텍스트보다는 간단한 그림을 그리며 설명하는 것이 큰 도움이 됐습니다.
여기서 Excalidraw라는 온라인 협업 도구를 활용해 아이디어를 시각적으로 표현했습니다.
디자인과 기획: Figma로 시각화
주제가 확정되자, 우리는 사용자 흐름을 기반으로 한 화면 구성이 필요했습니다.
기능을 나누고 우선순위를 정하기 위해서는 각 기능이 어떻게 연결될지 시각적으로 볼 필요가 있었기 때문입니다. 이를 위해 피그마(Figma)를 사용해 디자인과 기획서를 작성했습니다.
사용자 경험(UX)과 실사용 서비스들을 많이 참고하며, 유저의 흐름을 따라가며 화면을 구성해 보았습니다. 디자인 과정에서는 어떤 요소가 더 사용하기 편리할지, 어떤 디자인이 더 직관적일지 등을 고민하며 여러 선택을 비교했습니다.
기능명세서를 작성할 때, 초반에는 단순히 기능들을 나열하다가,
기능명세서 작성법을 참고하여 기능을 체계적으로 정리했습니다.
이 과정이 피그마 디자인 작성에도 큰 도움이 되었고, 빠진 부분이나 추가해야 할 기능을 한눈에 파악할 수 있었습니다.
비록 전문 디자이너는 아니지만, 기능을 시각화하면서 빠르게 개선할 수 있었고, 사용자 흐름을 명확하게 그릴 수 있었습니다.
그러나 디자인 시스템을 체계적으로 정리하지 못한 점과, 피그마 AI의 AI 디자인 기능을 제대로 사용해보지 못한 것이 아쉬웠습니다.
초기 프로토타입을 만드는 입장에서 더 빠른 개선을 할 수 있는 좋은 도구였을 텐데, 다음 기회에 꼭 시도해 보고 싶은 기능입니다.
AI가 사용안되는 분야가 없는 세상인 것 같다.
협업 도구와 전략
기획과 디자인을 마친 후, 실제 개발에 앞서 팀원들 간의 협업을 원활하게 하기 위한 그라운드 룰을 정했습니다.
FE/BE 전략, 코드 컨벤션, 깃 브랜치 전략, 커밋 메시지 스타일, PR 템플릿 등을 사전에 협의하고, 개발이 진행되면서 생길 혼란을 최소화하고자 했습니다.
- FE/BE 개발 환경
- 깃 브랜치 전략
- 깃 커밋 메세지 규칙
- 깃 PR 및 이슈 템플릿 설정
이런 전략들이 프로젝트의 일관성을 유지하고, 효율적인 협업을 가능하게 해주었습니다.
그렇게 탄생한 buddy-guard😎
이렇게 해서 😺🐶Buddy-Guard😎 프로젝트가 탄생했습니다!
처음에는 주제를 선정하는 것조차 쉽지 않았지만, 각자의 의견을 조율하며 실제로 동작하는 프로토타입을 만들어 낸 과정이 매우 보람 있었습니다.
앞으로 남은 개발 과정에서 더 많은 도전과 성장을 위해.. 나 자신 파이팅
