회의 개요
날짜: 2025.12.18(목)
회의 안건
MVP 발표 이후 향후 일정 및 추가 기능 범위 공유
디자인 피드백 반영 방향 재확인(토스트 위치, 테두리, 섀도우 등)
파비콘 제작 및 구글 간편 로그인 버튼 추가 요청
디폴트 이미지(모임/프로필) 컬러 톤 논의
알림(SSE) 테스트 방식 및 이벤트 스펙 논의
정기 회의 일정 통합(주 2회 → 주 1회)
모임/알림 v2 명세서 작성 및 협업 방식 논의
카드 섀도우·하단 네비 아이콘 색 등 UI 디테일 점검
이미지 비율 및 크롭/대표 이미지 선택 기능 고도화 아이디어 공유
회의 내용 요약
최종 발표(1/5)까지는 스프린트 기간 구분 없이 알림·채팅 등 추가 기능과 2–3개의 보완 기능을 선정해 개발. 구체 기능 목록 및 계획은 다음 주 월요일까지 정리해 공유 예정.
디자이너가 Figma에 남긴 코멘트는 그대로 반영하되, 로그인 토스트는 “하단 노출” 방향으로 우선 구현해 보고 필요 시 이후 조정.
구글 간편 로그인 도입에 맞춰, 로그인 화면 UI에 “구글 로그인 버튼”을 추가.
회색 계열 디폴트 모임 이미지는 부정 상태(404/empty) 인상을 줄 수 있어, 컬러가 들어간 디폴트 이미지(브랜드 CI 활용 포함) 시안을 추가로 만들어 비교 후 결정.
알림은 SSE 기반으로 구현하며 /subscribe로 연결 후 /test 엔드포인트로 테스트 알림을 발행하는 구조를 사용. 현재는 팔로우 시 알림만 우선 구현되어 있고, 이벤트 이름·데이터 형식은 프론트/백엔드 추가 협의 후 확정.
기존 화요일(백엔드)·수요일(디자인) 분리 회의를 통합해, 앞으로는 매주 수요일 오후 6시에 전원 합동 회의로 진행.
모임 도메인 v2(방장 위임, 강퇴, 쿨다운 등 확장)를 위해 백엔드가 구조를 재설계 중이며, 완성 후 명세서를 작성해 프론트 요구사항 문서와 함께 상호 검토.
카드/마이페이지 섀도우, 하단 네비 활성 색상, 채팅 아이콘 색상 등은 Figma에 정의된 드롭 섀도우 수치와 아이콘 스타일에 맞춰 Tailwind 토큰·에셋을 수정.
정사각형 원본 이미지가 카드 컨테이너 비율과 달라 잘리는 문제는 현재 구조상 불가피하나, v2에서 인스타그램처럼 업로드 시 크롭/포커스 위치 선택, 드래그 앤 드롭으로 대표 이미지 변경 기능까지 고도화하는 방안을 검토.
회의 내용 상세 MVP 이후 일정 및 추가 기능 범위
현재 시점: 12월 18일, 최종 발표일은 1월 5일.
스프린트 2/3 등의 기존 내부 일정 구분은 크게 신경 쓰지 않고,
MVP 기본 기능은 완료 상태로 보고
최종 발표까지 “추가 기능 패키지”를 완성하는 것을 목표로 함.
추가 기능 후보:
알림(SSE 기반)
채팅
그 외 2–3개의 기능(강퇴, 쿨다운, 지도 표시, 힐링 요소 등 브레인스토밍 중)
기능 후보를 정리한 문서를 준비 중이며, 다음 주 월요일까지 최종 후보와 우선순위를 확정해 공유하기로 함.
디자인 피드백 반영 방향 (테두리, 토스트, 파비콘, 구글 로그인 버튼)
로그인 토스트 위치
앞선 논의에서는 상단 토스트도 검토되었으나, 로그인 영역에서는 하단 토스트가 더 자연스럽다고 판단.
“로그인 토스트 = 하단 노출”로 우선 구현 후, 실제 사용성을 보고 필요 시 다시 조정하기로 함.
파비콘
현재는 임시 파비콘이 적용되어 있음. 서비스 정식 파비콘을 별도 파일로 제작해 전달하기로 함.
구글 간편 로그인 버튼
인증/인가에 구글 로그인을 추가하기로 한 상태라, 로그인 페이지에서 일반 로그인 버튼과 별도로 “구글 로그인 버튼”을 노출
버튼 스타일은 기존 디자인 시스템과 조화되도록 디자이너가 추가 작업 후 전달.
디폴트 이미지 톤(그레이 vs 컬러) 논의
현재 디폴트 모임/리스트 이미지는 회색 위주의 PNG라, “404 / 데이터 없음 / 에러”와 같은 부정적 상태를 연상시킬 수 있다는 피드백이 있었음.
실제 레퍼런스:
“소모임” 앱 등에서는 디폴트 이미지를 브랜드 CI가 컬러로 들어간 형태로 사용 중.
결정:
회색 그레이톤 버전과 컬러가 들어간 버전을 모두 만들어 실제 화면에 올려 비교 후 최종 선택.
필요 시 로고/캔 일러스트를 활용한 CI 스타일 디폴트 이미지도 후보로 검토.
알림(SSE) 구조 및 테스트 방식
SSE 엔드포인트 구조
/subscribe: 클라이언트가 SSE(EventSource)로 연결하는 엔드포인트./test: 연결이 완료된 상태에서 테스트용 알림 이벤트를 발행하는 엔드포인트.
현 상황:
프론트에서 /test 엔드포인트를 일반 fetch로 호출하면 HTTP 응답은 정상적으로 오지만, EventSource로 연결했을 때 이벤트 수신에는 이슈가 있었음.
백엔드가 Nginx 설정 등 SSE 관련 서버 설정을 수정한 상태이며,
/test가 HTTP + SSE 응답을 함께 내려줄 수 있어 현재는 HTTP 응답만 보고 있는 상황
알림 트리거
현재는 “팔로우 발생 시 알림”만 우선 구현해 둔 상태.
추후 어떤 액션(모임 관련, 채팅 관련 등)에 알림을 붙일지,
이벤트 이름(event name)
데이터 페이로드 구조를 프론트/백엔드가 협의해 명세화할 필요가 있음.
액션 아이템
프론트에서 EventSource 기반 연결을 다시 테스트.
이벤트 네임·데이터 구조는 문서로 구체화해 상호 합의.
회의 일정 통합(주 2회 → 주 1회)
기존 구조:
화요일: 백엔드 중심 회의
수요일: 디자이너와의 디자인 회의
현재 MVP 기능이 어느 정도 안정 단계에 들어가,
기능·디자인 논의가 분리될 필요성이 줄어들었다고 판단.
결정:
앞으로는 매주 수요일 오후 6시 에 프론트·백엔드·디자이너가 함께 참여하는 단일 정기 회의로 통합.
모임 도메인 v2 및 명세 협업
백엔드 측 상황:
모임 도메인에 대한 v2 설계를 진행 중.
방장 위임, 참가자 강퇴/추방, 모임 참여 쿨다운 등 확장 기능들을 수용할 수 있는 구조 로 다시 설계하고 있음.
프론트 요구사항 문서
프론트 측에서도 현재까지의 MVP 구현 및 기획 피드백을 바탕으로
모임 상태
참여자 상태
권한 흐름 등을 더 명확히 정리한 요구사항 명세서를 작성 중.
초안을 작성해 공유하기로 함.
협업 프로세스
백엔드는 v2 구조와 함께 API 명세를 문서화.
프론트는 자체 요구사항 문서와 비교·검토 후 피드백.
다음 주 월요일까지 추가 기능과 함께 명세를 정리하고, 이후 구현 우선순위와 범위를 최종 조정하기로 함.
카드 섀도우·하단 네비 아이콘 색 등 UI 디테일
모임 카드 섀도우
메인 화면 모임 카드의 그림자(depth)가 디자인과 다르다는 지적.
Tailwind 기본 shadow-sm과 Figma에서 지정한 Drop Shadow 수치가 달라 Tailwind 커스텀 섀도우 값을 Figma 수치에 맞춰 조정하기로 함.
마이페이지 섀도우
마이페이지 섀도우 역시 모임 카드와 동일한 스타일(shadow-sm 커스텀 값)로 맞추기로 함.
하단 네비 활성 색·채팅 아이콘
하단 내비게이션의 활성 상태 색상, 채팅 아이콘 색상이 현재 디자인과 일부 다름.
아이콘 파일 업데이트 시점에 색상·스타일을 일괄 수정하기로 함.
이미지 비율 및 크롭/대표 이미지 고도화 아이디어
현 구조
리스트 카드: 100×200 비율,
상세 페이지: 440×240 비율 등 직사각형 컨테이너 사용.
정사각형 원본 이미지는 컨테이너 비율과 맞지 않아 위/아래 또는 좌/우가 잘려 보이는 현상 발생.
고도화 아이디어 (v2 대상)
인스타그램 업로드 UX처럼,
업로드 후 사용자가 크롭 위치를 직접 조정할 수 있는 기능(줌·드래그) 추가.
다중 이미지 업로드 시
드래그 앤 드롭으로 순서를 변경하고 대표 이미지를 직접 지정할 수 있는 기능 도입.
주의사항
모임 v2에서 이미지 관련 필드 구조가 일부 변경될 수 있어, 프론트에서도 향후 이 부분을 고려한 개발이 필요하다는 점 공유.
후속 액션
일정 및 추가 기능
1/5 최종 발표까지 MVP는 안정화 상태로 두고, 알림·채팅 + 2–3개의 추가 기능을 선정해 개발.
기능 후보 및 우선순위는 다음 주 월요일까지 기획 측에서 정리해 공유.
디자인·UI 작업
로그인 토스트: 하단 노출로 우선 구현, 필요 시 추후 조정.
파비콘: 디자이너가 정식 파일 제작 → 프론트가 적용.
구글 로그인 버튼: 로그인 화면에 추가, 스타일은 디자인 시스템에 맞춰 제공.
디폴트 이미지: 그레이/컬러 시안을 비교 후 최종 톤 결정.
섀도우/아이콘: Figma 수치를 기준으로 Tailwind 섀도우 및 네비/채팅 아이콘 색상 정리·적용.
알림(SSE) 및 명세
프론트: /subscribe 기반 SSE 연결 재테스트, /test 응답 및 EventSource 수신 확인.
백엔드: 이벤트 이름·데이터 구조를 문서화해 공유, 팔로우 외 알림 트리거 후보 정리.
모임 v2 및 요구사항 정의
백엔드: 모임 도메인 v2 구조·API 명세 작성.
프론트: 모임 관련 요구사항 문서를 작성해 공유.
👀 React with 👀 1coderabbitai
