[11/26] 프론트–디자이너 1차 회의

[yoorli]

회의 개요

• 날짜: 2025.11.26(수)
• 회의 안건
  • 기존 같이 달램 기획·디자인 초기화 및 신규 컨셉 공유
  • 주요 화면(홈 피드, 모임, 친구·채팅) UX 구조 설명
  • 디자인 시스템(컬러, 컴포넌트) 및 협업 방식 정의
  • 정기 회의 시간 및 커뮤니케이션 채널 확정
  • 기능 요구사항 문서 및 작업 범위·일정 논의
• 추가 참고 자료
  • 피그마

---

회의 내용 요약

1. 서비스 및 레이아웃 리디자인 방향
   • 기존 같이 달램 시안·기획은 대부분 폐기하고 재설계..
   • 새 컨셉: 인스타그램 피드형 커뮤니티 UI, 모바일 퍼스트·모바일 온리로 진행.
2. 주요 화면 및 UX 플로우
   • 홈 피드:
     • 작성자 프로필, 업로드 시간, 썸네일 이미지 슬라이더, 모임 정보(정원·참가 인원·진행률 바, 장소, 일시, 해시태그, 참여 버튼)로 구성.
   • 참여 플로우:
     • “참여하기” 버튼 클릭 → 참여 확인 모달(작성자·안내 문구) → 확인 시 토스트로 “모임 신청 완료” 표시 → 참가 인원/프로그레스 바 갱신 → 버튼 문구가 “채팅 입장”으로 변경되어 그룹 채팅방 진입.
   • 참가 중인 모임(캘린더 탭):
     • 하단 네비게이션의 캘린더 아이콘 탭.
     • 디폴트로 현재 참여 중인 모임을 홈 피드와 거의 동일한 형태로 전체 노출(상세 페이지는 없고 카드 자체가 상세 역할).
     • 참여 중인 모임 / 내가 생성한 모임 / 과거 참여 모임 3가지 필터 제공.
   • 모임 생성:
     • 입력 항목: 제목, 모임 장소, 상세 장소(예: OO카페 앞), 모임 일시, 최대 인원, 태그, 썸네일 이미지, 상세 설명.
   • 친구·1:1 채팅:
     • 프로필 영역과 채팅 시작 UX를 분리해 오동작을 줄이는 구조로 설명.
     • 친구 추가는 프로필에서 버튼으로 혹은 아이디 검색 모달로 진행.
3. UX·검색·정렬 관련 논의
   • 메인 피드의 SNS형 카드 컨셉은 유지하되,
   • 하단 검색 기능으로 필터링을 제공 : 기준 - 제목 / 지역(주소) / 해시태그.
4. 디자인 시스템·스타일 가이드 협의
   • 기존 같이 달램 피그마의 컬러 테이블·컴포넌트 구조를 참고해 색상 토큰·공통 컴포넌트 정의.
   • 현재 시안에서 사용 중인 청록(사이언 계열) 메인 컬러는 분위기만 유지하고, 디자이너가 팔레트·쉐이딩을 재구성하기로 함.
   • 생성해놓은 캔 모자 형태의 일러스트를 서비스 CI 로고 후보로 사용.
5. 작업 범위·일정·협업 방식
   • 로그인/회원가입 화면, 홈(피드) 화면 우선 디자인
   • 작업 방식 : 같이 달램 기존 피그마 파일과 유사하게 컬러 테이블·컴포넌트 페이지를 별도로 구성.
   • 커뮤니케이션 : 화면 단위 상세 피드백: Figma 코멘트 + 디스코드 멘션 조합으로 진행.
   • 정기 회의 : 매주 수요일 오후 6시, 프론트엔드·백엔드·디자이너 3팀 합동 회의로 진행.
   • Storybook 활용 : URL을 디자이너에게 공유해 구현 결과를 디테일하게 검수하는 용도로 사용.
6. 요구사항 문서·기획 공유
   • 현재 피그마에 있는 화면 범위에 대한 요구사항은 이번 주 안으로 정리하여 전달하기로 함.

---

회의 내용

리디자인 필요성 및 방향

• 프로젝트가 여러 기수에 걸쳐 동일 주제로 진행되어, 기존 같이 달램과 차별화 필요성 인식.
• 기존 디자인은:
  • 카드 폭이 지나치게 길고 정보 대비 공간 효율이 낮음.
  • 콘텐츠보다는 여백을 채우는 데 치중된 느낌.
• 이에 따라:
  • 기존 시안·기획서는 “참고용”으로만 인식하고, 새로운 구조·스타일로 재설계.
  • 인스타그램 피드 UI를 모티브로 한 SNS형 커뮤니티 서비스로 방향성 확정.
• 레이아웃·반응형 전략
  • 모바일 온리: 별도 PC·태블릿 전용 디자인 없이 모바일 화면만 제작.

주요 화면 구조 상세

• 홈 피드:
  • 상단: 작성자 아바타·닉네임·상태 메시지·작성 시간.
  • 본문: 썸네일 이미지 슬라이더, 모임 소개 텍스트.
  • 하단: 정원/참석 인원, 진행률 바, 장소, 날짜·시간, 해시태그 태그 리스트, 참여 버튼.
  • 참여 시:
    • 확인 모달 → 토스트 메시지 → 카드 내 인원 수·프로그레스 바·버튼 레이블(채팅 입장) 업데이트.
• 참가 중인 모임 목록(캘린더 탭):
  • 홈 피드와 거의 같은 카드 레이아웃 사용.
  • 하단 네비게이션의 캘린더 아이콘 탭.
  • 모임이 없을 때는 “현재 참여 중인 모임이 없습니다” 안내 표시.
  • 상단 필터 드로어로 참여 중 / 내가 생성 / 과거 참여 필터링 제공.
• 모임 생성 화면:
  • 레이블과 실제 입력 내용 예시까지 공유하며 설명.
  • 태그 입력 후 엔터 시 하단에 태그 칩이 하나씩 추가되는 구조 구상.
  • 이미지 영역 클릭 시 기기에서 이미지 선택 → 썸네일 리스트 및 슬라이더에 반영.
• 친구 목록·1:1 채팅:
  • 친구 탭: 친구 목록 + 각 친구 카드에 “채팅하기” 버튼.
  • 프로필 진입과 채팅 시작을 분리하기 위해 채팅 버튼을 별도로 둠(닉네임이 매우 길어도 프로필만 눌리는 상황 방지).
  • 최초 채팅은 친구 목록의 버튼으로 진입, 이후에는 최근 메시지 목록에서 접근.
  • 프로필 화면에서 “친구 추가” 버튼으로 요청 가능하고, 아이디 검색으로 친구 추가하는 모달도 별도 제공 예정.

기능 범위·우선순위

• 1차 기능 범위:
  • 로그인/회원가입, 회원 정보 조회·수정(MyPage 성격),
  • 모임 생성·조회·수정·삭제,
  • 모임 참여 및 참여 모임 조회.
• 채팅 기능:
  • MVP 이후 추가 기능으로 보고, 우선은 텍스트 중심의 1:1 및 모임 단체 채팅만 고려.
  • 이미지·동영상 전송, 고급 메시지 기능은 범위에서 제외.
• 에디터:
  • WYSIWYG는 구현 난도 대비 이득이 적다고 판단, plain text 입력으로 시작.

UX·검색·정렬 관련 논의

• 디자이너:
  • 인스타그램형 긴 카드 피드는 모임 탐색과 선택에 비효율적일 수 있음(보통은 리스트/카드형 그리드를 많이 사용).
  • 필터·정렬 요소가 UI에서 보이지 않는 점도 우려.
• 프론트:
  • 화면을 더 쪼개는 것보다, 작은 모바일 화면에서 카드 하나로 정보를 충분히 보여주는 편이 낫다고 판단.
• 결론:
  • 메인 피드의 “SNS형 카드” 컨셉은 유지하되,
  • 하단 검색 기능으로 필터링을 제공:
    • 검색 기준: 제목 / 지역(주소) / 해시태그.
    • 예: “동탄” 해시태그나 주소 기준으로 모임 목록 필터링.

디자인 시스템·협업 프로세스

• 디자이너:
  • 기존 같이 달램 피그마의 구조(컬러 테이블, 컴포넌트 시트)를 최대한 재사용/참고.
  • 현재 시안에서 사용한 색의 무드는 유지하면서도, 컬러 팔레트·조화·명도 대비는 재설계.
  • 로고 시안은, CI·아이콘으로 활용하는 방향으로 구체화 예정.
• 프론트:
  • Storybook로 실제 구현 컴포넌트의 상태를 한 곳에 모아, 디자이너가 레이아웃·상태 전환을 직접 확인할 수 있게 할 계획.
• 커뮤니케이션:
  • 디스코드: 진행 상황 공유, 문의, 피드백 요청.
  • Figma 코멘트: 화면·컴포넌트 단위의 세부 피드백.

작업 범위

• 우선 디자인 범위:
  • 1차: 로그인/회원가입 화면, 홈(피드) 화면.
  • 이후: 참여 중인 모임 목록(캘린더 뷰), 친구 목록·1:1 채팅, 프로필 화면, 검색 모달 등.
• 디자이너 작업 방식:
  • 소규모 프로젝트에서는 와이어프레임 없이 바로 하이파이 디자인 진행.
  • 현재 정의된 화면(추가되는 프로필·검색 모달 포함) 기준으로 10일 정도면 1차 시안 완성 가능하다고 판단.

협업 방식

• 디자인 시스템:
  • 같이 달램 기존 피그마 파일과 유사하게 컬러 테이블·컴포넌트 페이지를 별도로 구성.
• 커뮤니케이션:
  • 일상 소통·피드백: 디스코드 텍스트 채널.
  • 화면 단위 상세 피드백: Figma 코멘트 + 디스코드 멘션 조합으로 진행.
• 정기 회의:
  • 매주 수요일 오후 6시, 프론트엔드·백엔드·디자이너 3팀 합동 회의로 진행.
• Storybook 활용:
  • 프론트엔드에서 컴포넌트 상태(변형, 인터랙션)를 모두 모은 Storybook 페이지를 운영.
  • URL을 디자이너에게 공유해 구현 결과를 디테일하게 검수하는 용도로 사용.

일정·요구사항 공유 계획

• 디자이너:
  • 현재 범위(로그인/회원가입, 홈 피드, 참가 모임·친구·채팅, 프로필, 검색 모달)에 대해 1차 시안 제작을 목표로 작업 시작.
• 기획:
  • 작성 중인 요구사항 문서를 이번 주 내 1차 정리 후 공유.
  • 이후 변경·추가 사항은 디스코드 및 정기 회의에서 수시로 업데이트.

---

후속 액션

• Storybook 환경 구성 및 URL 공유.
• 서비스 컨셉에 맞는 레퍼런스(앱·웹 사례)와 선호 컬러·톤앤매너를 정리해 디자이너에게 전달.
• 로그인/회원가입, 회원 정보, 모임 CRUD·참여 기능에 대한 요구사항 문서를 이번 주 안으로 정리·공유.
• 추후 필요한 추가 화면(프로필, 검색 모달 등)에 대한 요구사항도 단계적으로 전달.