yuyu.com

로고
aboutpostsguestbook
썸네일

Dev

UX 중심 사고와 실전 협업으로 완성한 첫 팀 프로젝트, Fresh Table

2025-06-18

프론트엔드 개발 공부를 본격적으로 시작하면서 ‘코딩알려주는누나’의 React 강의를 한 달 동안 수강하게 됨
매일 강의를 듣고 과제를 수행하면서 React, 상태관리 등 기초와 미니 프로젝트를 만들었고,
마지막까지 모든 과제를 pass를 해서 실전 팀 프로젝트를 진행하는 기회가 주어짐
이렇게 시작된 프로젝트가 바로 요리 추천 플랫폼 Fresh Table임
단순한 구현을 넘어서 기획–디자인–개발–배포까지 전 과정을 경험했으며,
애자일 개발 방식과 스크럼 프로세스를 실습처럼 체험한 첫 협업이었음
 
 

🧩 프로젝트 개요

Fresh Table은 "오늘 뭐 먹지?"라는 고민을 덜어주는 요리 추천 플랫폼으로,
재료 기반 검색, 사용자 맞춤 레시피, 좋아요 저장, 댓글 기능 등을 제공함
“완성도보다 빠른 피드백 수용”
→ 짧은 기간인 만큼, 초기 기능(MVP)을 빠르게 구현하고, 매일 디스코드를 통해 사용자 입장에서 서로가 개발한 기능들을 점검하고 개선했음
 
 

🔄 실전 애자일 & 스크럼 방식 경험

✔ 스크럼 기반 협업 구조

  • 팀원들은 PO, Scrum Master, Developer 역할로 나눠 진행함
  • 나는 개발자 역할을 맡아 마이페이지 기능, 공용 컴포넌트 구현, 상태관리 로직 등을 담당함
  • 매일 약 2-30분간 디스코드로 스탠딩 미팅을 하며 “어제 한 일 / 오늘 할 일 / 막힌 점” 등을 짧고 간결하게 공유함

✔ Sprint Planning & User Story 작성 (with Figjam)

  • PO가 작성한 기능 아이디어 백로그를 바탕으로 스프린트를 구성하고,
      • “사용자는 어떤 작업을 할 수 있어야 하는가”라는 User Story 방식으로 각자의 작업을 명확히 정의함
      예: “사용자는 좋아요한 레시피를 마이페이지에서 확인할 수 있다.”

✔ 개발 환경 정리

  • VSCode 확장, Prettier 설정, 폴더 구조, 스타일 방식, Zustand 상태관리 구조 등 공통 개발 환경을 세팅하여 협업의 기반을 통일함
 
 

🧑‍💻 담당한 역할 및 기술

📌 주요 구현 기능
  • Zustand 기반 좋아요 기능 전역 상태관리
  • 마이페이지 UI 구성 및 반응형 구현
  • 공용 컴포넌트(RecipeCard, Carousel) 분리 및 재사용성 강화
  • 사용자 행동 흐름에 맞춘 UI/UX 최적화
🛠️ 사용 기술 스택
  • React, Tailwind CSS, React Query, Zustand, Supabase, Vite, Vercel 등
 
 

🔗 GitHub Flow 기반 협업 경험

처음으로 실전에서 사용한 Git이라 많이 어려웠지만 팀원분들이 알려주셔서 많이 배웠음!

✔ GitHub Flow 워크플로우

  • main 브랜치는 항상 배포 가능한 상태로 유지
  • 기능 단위 브랜치 생성 (feature/이름-페이지) → PR 작성 → 리뷰 후 Merge
  • PR 제목, 커밋 메시지, 이슈 번호 연결 등 GitHub 협업 문화 익힘

✔ 실전 흐름 예시

  1. 작업 전 git checkout -b feature/yj-mypage
  1. 기능 구현 후 git commit -m "feat: 마이페이지 UI 구현 (#12)"
  1. GitHub에서 PR 생성 → dev로 merge (짧은 프로젝트 기간으로 직접 merge) → 이슈 자동 종료 → 배포 전 main에 merge

✔ 어려움 & 성장

  • 프로젝트 초반부터 clone하는 법도 모르겠고 터미널 명령어도 익숙하지 않아 화면 공유로 도움을 받으며 배웠고,
  • 이후에는 다른 팀원이 만든 기능을 dev에서 최신화해 merge하는 방식까지 익숙해지며, 혼자만의 프로젝트가 아닌 팀 프로젝트를 실감함
      •  
 

💬 프로젝트를 통해 성장한 역량

역량
상세 내용
협업 & 커뮤니케이션
매일 스탠딩 미팅, PR 리뷰, 기능 분담 및 피드백을 통해 실전형 협업을 경험
UI/UX 중심 사고
사용자 흐름을 중심으로 기능과 화면 배치 설계, 반응형 대응, 사용자 피드백 반영
개발자 도구 사용 경험
Git/GitHub, Figma, Vercel, 상태관리 툴 등을 실무 방식에 맞게 활용
실전 Agile 경험
계획 → 실행 → 피드백 → 개선의 반복을 통해 빠르고 유연한 개발 사이클 체득
 
 

🔗 프로젝트 링크

👉 https://fresh-table.vercel.app
 
 

✨ 마무리하며

“협업은 단순히 역할을 나누는 것이 아니라, 함께 고민하고 함께 성장하는 과정”이라는 걸 이번 팀 프로젝트를 통해 배움

첫 번째 팀 프로젝트, Fresh Table을 마치며

프론트엔드 개발 공부를 본격적으로 시작한 지 3달이 지났을 때, 우연히 '코딩알려주는누나'의 React 스터디를 알게 되었는데, 모든 과제를 통과한 수강생들에겐 실전 팀 프로젝트 참여 기회가 주어진다고 하여 매일같이 강의를 들으며 미니 프로젝트를 수행함
솔직히 말하면 처음엔 나같이 취미로 하는 사람도 팀 프로젝트가 가능한가? 하는 생각에 많이 두렵기도 했음 혼자서 코딩하는 것과 팀으로 개발하는 것은 완전히 다른 영역이라는 걸 유튜브로 자주 찾아봐서 알고 있었기 때문임 하지만 "지금이 아니면 언제 이런 경험을 해볼 수 있을까?"라는 도전 가득한 생각으로 참여하게 됨

프로젝트 시작: "오늘 뭐 먹지?"라는 고민에서 출발

스터디 주최자 ‘코딩알려주는누나’님이 팀 프로젝트 오리엔테이션을 진행하여 팀을 구성해 주셨고, 주제는 ‘세상 모든 문제를 해결할 수 있는 사이트를 만들어보자’였음
팀 프로젝트 기간이 일주일로, 짧은 만큼 당일 주제를 정하기로 함 우리가 만들게 된 서비스는 Fresh Table이라는 요리 추천 플랫폼이었음 누구나 한 번쯤은 겪어봤을 "오늘 뭐 먹지?"라는 고민을 해결해주는 서비스를 만들어보자는 아이디어에서 시작됨
재료 기반 검색, 사용자 맞춤 레시피 추천, 좋아요 기능, 댓글 시스템 등 기본적인 기능들을 구현하기로 했음 하지만 짧은 프로젝트 기간을 고려해 "완성도보다는 빠른 피드백 수용"이라는 원칙을 세움 MVP(Minimum Viable Product)를 빠르게 구현하고, 매일 서로의 기능을 점검하며 개선해나가는 방식을 택함

처음 경험해본 스크럼과 애자일 방식

팀 프로젝트라고 해서 단순히 기능만 나눠서 개발하는 줄 알았는데, 생각보다 체계적인 프로세스가 있었음 팀원들은 PO(Project Owner), Scrum Master, Developer 역할로 나뉘었고, 나는 개발자 역할을 맡게 되었음 (내가 가장 개발 공부 기간이 적고, 다들 현직 개발자, 취준생, 퍼블리셔였음ㄷㄷ)
가장 인상 깊었던 건 매일 진행한 스탠딩 미팅이었음 디스코드를 통해 2-30분 정도 "어제 한 일, 오늘 할 일, 막힌 점"을 간단하게 공유하는 시간이었는데, 처음엔 형식적으로 느껴졌지만 점점 현재 개발 상황을 파악하고 서로 도움을 주고받는 소중한 시간이 되었음 (특히 개발 초짜인 나에겐 더더욱 도움이 되는 시간이었음!)
Figjam을 활용한 Sprint Planning도 새로운 경험이었음 "사용자는 좋아요한 레시피를 마이페이지에서 확인할 수 있다"와 같은 User Story 방식으로 각자의 작업을 명확히 정의하니, 개발 방향이 훨씬 명확해졌음

내가 맡은 역할과 기술적 도전

나는 마이페이지 기능 구현, 공용 컴포넌트 개발, 그리고 Zustand를 활용한 상태관리를 담당했음
특히 좋아요 기능의 전역 상태관리가 가장 흥미로운 도전이었다. 여러 컴포넌트에서 좋아요 상태를 공유해야 했는데, Zustand를 사용해보면서 상태관리의 중요성을 체감할 수 있었음
RecipeCard나 Carousel 같은 공용 컴포넌트를 분리하며 재사용성을 고려한 설계도 배울 점이 많았음 처음엔 각자의 페이지에서 비슷한 컴포넌트를 따로 만들다가, 나중에 가장 UI적으로 좋은 컴포넌트를 공통으로 빼내면서 코드의 일관성과 유지보수성이 훨씬 좋아지는 것을 경험했음

Git과 GitHub, 그리고 협업의 실전

사실 이 프로젝트에서 가장 어려웠던 부분은 개발보다도 Git이었음.. 혼자 공부할 때는 git add, git commit, git push 정도만 알면 됐는데, 팀 프로젝트에서는 브랜치 관리, PR(Pull Request), merge 충돌 해결 등 훨씬 복잡한 과정들이 필요했음
GitHub Flow 워크플로우를 따라 feature/이름-페이지 형식으로 브랜치를 만들고, PR을 작성하고, 각자 merge하는 과정을 반복했음 (원래 dev로 merge하기 전, 리뷰를 받는 게 FM이지만 프로젝트 기간이 짧은 관계로 각자 PR하고 merge하기로 하고, 배포 직전 main에 merge하는 것만 PO가 함) 프로젝트 초반에는 vscode로 clone하는 법,branch만드는 법도 제대로 몰라서 팀원들과 화면 공유를 하며 배웠던 기억이 남 (이때 너무 기본적인 것을 모르는 느낌이라 수치스럽고 죄송했지만, 이때다 싶어 모르는 것을 엄청 물어봄..)
이런 과정을 거치면서 "내가 만든 코드가 다른 사람의 작업에 영향을 줄 수 있구나", "내가 정말 모르는 게 많았구나"라는 걸 몸소 체험하며 개발자로써(?) 한 단계 나아갈 수 있었음

사용자 중심(UX)으로 생각하기

개발을 하다 보면 기술적인 구현에만 몰두하기 쉬운데, 이번 프로젝트에서는 계속해서 사용자 관점을 놓치지 않으려고 노력했음
마이페이지를 구현할 때도 "사용자가 어떤 흐름으로 이 페이지에 들어올까?", "어떤 정보를 가장 먼저 보고 싶어할까?"를 고민하며 UI를 배치했음 반응형 웹 구현도 단순히 화면 크기에 맞춰 레이아웃을 조정하는 것이 아니라, "모바일에서 사용하는 사용자는 어떤 경험을 원할까?"라는 관점에서 접근했음
매일 디스코드에서 서로의 기능을 테스트해보며 피드백을 주고받는 과정도 인상 깊었음

이 프로젝트가 내게 남긴 것들

팀 프로젝트를 진행한 건 일주일이라는 짧은 기간이었지만, 정말 많은 것들을 배움!
기술적으로는 React, Zustand, React Query, Tailwind CSS 등을 실전에서 사용해보며 각 도구들의 역할과 장단점을 체감할 수 있었음 Supabase를 백엔드로 사용하며 프론트엔드와 백엔드가 어떻게 연결되는지도 경험함 (물론 supabase는 PO님이 개발함)
협업 측면에서는 스크럼 프로세스, Git 워크플로우 등 실무에서 사용되는 개발 프로세스를 직접 경험할 수 있었음 특히 "소통"의 중요성을 많이 느꼈음 기술적인 문제도 중요하지만, 팀원들과 어떻게 소통하고 협력하느냐가 프로젝트의 성공을 좌우한다는 걸 배웠음
가장 중요했던 것은 사용자 중심의 사고방식이었음 단순히 기능을 구현하는 것을 넘어서, "사용자가 정말 원하는 것이 무엇일까?"를 끊임없이 고민하는 자세를 기름

마무리하며

Fresh Table 프로젝트는 내게 첫 번째 팀 프로젝트여서, 처음엔 막막하고 두려웠지만 팀원들과 함께 고민하고 성장하는 과정 자체가 정말 값진 경험이었음
혼자서는 절대 만들 수 없었을 서비스를 팀원들과 함께 완성하며, 개발자로서의 성장뿐만 아니라 협업자로서의 성장도 이룰 수 있었음
물론 여전히 부족한 점들이 많아서 앞으로도 이런 팀 프로젝트를 할 기회가 있다면 망설이지 않고 도전해보려고 함
 
🔗 프로젝트 결과물: Fresh Table
 
© Powered by yuyu