BIZKET

자영업자를 위한 AI 기반 마케팅 지원 서비스

2025.04 - 2025.05

사이드 프로젝트 프로그램 스위프를 통해 진행한 프로젝트입니다. PM 1명, 디자이너 2명, FE 3명, BE 3명으로 구성된 팀에서, 프론트엔드 개발자로 참여하였습니다.
AI 마케팅 문구 생성, SNS 비즈니스 보고서 분석, 검색어 트렌드 파악 등의 기능을 통해 SNS 마케팅 콘텐츠를 효율적으로 제작할 수 있도록 돕는 서비스입니다. (발표자료)
마이페이지, 검색어 트렌드 페이지, 비즈니스 보고서의 그래프, 모달을 맡아 구현하였습니다.
* 현재 서버가 중단된 상태로, 주요 기능을 사용할 수 없습니다.

💻 기술 스택

Next.js
Typescript
Zustand
React Query
tailwindcss

🧩 구현 기능

1. 검색 트렌드 분석

  • 검색어에 대한 월별 관심도, 검색량 등 데이터 시각화

  • react-hook-form을 사용하여 효율적으로 입력폼 관리

  • 검색 버튼 클릭 또는 입력란 엔터 입력 시, 분석 결과 위치로 자동 스크롤

  • Recharts 라이브러리를 사용하여, 디자인 시안에 맞게 커스터마이징한 차트 컴포넌트 구현

  • 에러나 데이터 부족 시, 차트 UI가 깨지지 않도록 더미 데이터를 적용하고 에러 UI 표시

2. 마이페이지

  • 사용자가 회원가입 시 입력한 사업자 정보, 플랫폼 정보 조회 및 수정

  • 컨텐츠 생성 이력 조회 및 검색

3. 모달

  • 서비스 전반에 사용되는 모달 구현

  • 일관된 디자인을 유지하면서 모달마다 다른 레이아웃을 유연하게 구성할 수 있도록, Compound Component 패턴의 공통 모달 컴포넌트 구현

  • 모달이 페이지 전체 또는 부모 요소만 가릴지를 prop을 통해 설정할 수 있도록 하여, 다른 팀원들이 쉽게 필요한 모달을 만들 수 있도록 함

📌 이슈

트렌드 분석 결과의 화면 전환이 매끄럽지 않아 사용자 경험이 저하되는 문제

➕ 기타 내용

Feature-Sliced Design(FSD) 패턴 기반 프로젝트 설계

  • 기능별로 도메인을 나누고 관심사를 분리함으로써 유지보수성과 개발 효율성을 높임

Confluence, Jira, GitHub, Discord를 기반으로 애자일 프로세스로 협업

  • 주 1회 회의를 진행하고, 회의 내용과 API 문서를 문서화하여 공유

  • Jira 이슈와 GitHub 브랜치를 연동해 작업 관리

  • PR 알림을 실시간으로 받아 빠르게 피드백을 주고 받음

🌱 배운점

디자인에 맞춰 UI를 구현한 상태에서, 백엔드 기능에 문제가 생기며 UI를 전면 수정해야 했습니다. 이 과정에서 로직과 UI가 강하게 결합되어 있으면 작은 변경에도 수정 범위가 매우 커질 수 있다는 점을 실감했습니다. 이를 통해 기능 변경에도 유연하게 대응할 수 있는 구조적 설계의 필요성을 배웠습니다.

협업 도구를 단순히 사용하는 것을 넘어, 체계적인 프로세스가 개발 속도와 품질에 직접적으로 기여한다는 점을 배웠습니다.