[12/03] 프론트–디자이너-백엔드 2차 회의

[yoorli]

회의 개요

• 날짜: 2025.12.03(수)
• 회의 안건
  • 날짜·시간 선택 UI(달력·타임피커) 형태 결정 – 드로어 vs 모달, 라이브러리 사용 여부
  • 프로필 / 마이페이지 / 설정 화면 구조 재조정
  • 검색 결과 표시 방식 및 헤더 검색 아이콘 처리
  • 알림·채팅 뱃지(숫자/점) 정책 확정
  • 인풋/에러 메세지/토스트 색상 등 세부 UX 조정
  • 남은 디자인 작업 범위 및 완료 일정 확인

---

회의 내용 요약

1. 날짜·시간 선택 UI – 모달 + 라이브러리 활용 쪽으로 가닥
   • 모바일 친화 레퍼런스(하단 드로어형)를 검토했으나, PC·QHD 환경에서 화면 하단 드로어는 사용성이 떨어질 수 있다는 우려.
   • 정중앙 모달 형태의 날짜·시간 선택 UI 의견 제시
   • 프론트 측에서 결정 후 의견 전달
2. 프로필 / 마이페이지 / 설정 구조
   • 초기 안: 프로필 페이지 상단에 프로필 정보, 하단 구분선 아래에 알림 설정·탈퇴 등 설정 항목을 한 페이지에서 노출.
   • 새 제안: 설정을 별도 모달로 분리하는 방식도 고민.
   • 결론: 우선 한 페이지 안에 프로필 + 설정을 모두 배치한 버전으로 구현 후, 어색하면 그때 설정을 모달로 분리하는 방향으로 추후 조정.
3. 검색 결과·헤더 검색 아이콘 처리
   • 검색 결과 상단에 “검색 결과 N개” 텍스트를 노출하는 디자인은 유지하되, 스크롤 시 리스트와 함께 위로 올라가는 방식으로 정리.
   • 검색을 아예 시도하지 않은 홈 상태에서는 해당 문구를 표시하지 않음(“검색 결과 0개”가 아닌, 그냥 비노출).
   • 헤더의 돋보기 아이콘은 역할이 애매하고 메인 진입 경로가 중복되어, 상단 검색 아이콘은 제거하기로 결정.
4. 알림·채팅 뱃지 정책
   • 상단 알림 벨 아이콘:
     • 읽지 않은 알림 개수 숫자 뱃지 표시
     • 다만 디자인 붕괴를 막기 위해 표시는 최대 99까지만(이상은 모두 99로 표시).
   • 하단 채팅 탭 아이콘:
     • 숫자 대신 작은 동그라미만 표시해 읽지 않은 메시지 존재 여부만 알려주는 것으로 합의.
5. 토스트 색상
   • 토스트: 현재 색상이 눈에 잘 띄지 않아, 좀 더 밝게 수정하기로 함.
6. 디자인 진행 상황·일정
   • 남은 주요 화면: 알림, 프로필, 1:1 채팅, 하단 검색 플로우.
   • 디자이너 계획: 금요일까지 화면(레이아웃)은 모두 완성, 내부 그래픽·디테일은 이후 천천히 보완.

---

회의 내용

날짜·시간 선택 UI 논의

• 모바일 레퍼런스(하단 드로어형)
  • 모바일에서는 매우 직관적이고 예쁘지만, PC·QHD/4K 모니터에서는 화면 하단에 작게 떠 사용성이 떨어질 우려 제기.
• 구현 난이도 이슈
  • 완전 커스텀 캘린더 + 시간 선택 UI를 0부터 구현하면, 과거 경험상 캘린더만 1주일 이상 소요된 사례가 있어 공수 부담이 큼.
  • 날짜와 시간, 분 단위, 과거 시간 비활성화, 범위 선택 등까지 고려하면 로직 복잡도가 크게 증가.
• 대안 검토
  • 모달 방식: 중앙 정렬 모달로 띄우면 모바일·PC 모두에서 거리가 적당하고, 시선도 중앙에 모일 수 있어 실용적.

프로필 / 마이페이지 / 설정 레이아웃

• 기존 논의:
  • 프로필 페이지 내에
    • 상단: 사용자 프로필 정보(이름, 이미지, 태그 등)
    • 하단: 구분선을 두고 알림 설정, 탈퇴 등 설정 항목 나열.
• 새 제안:
  • 설정 항목을 프로필와 분리해 드롭다운·모달로 별도 분리하면 더 자연스러울 수 있다는 의견.
• 추가 논의:
  • 타 유저 프로필도 동일 레이아웃을 공유하므로, 정보만 있는 화면이 너무 밋밋하지 않도록 디자인 요소를 더 넣고 싶다는 디자이너 의견.
• 결론:
  • 우선은 한 페이지 내에서 프로필 + 설정을 모두 포함하는 버전으로 구현.
  • 실제 구현 후 어색하다 판단되면, 설정 영역을 모달(또는 별도 화면)로 분리하는 2차 개선을 검토.

검색 결과 및 헤더 검색 아이콘

• 검색 결과 텍스트
  • “검색 결과 N개” 텍스트는 검색 결과 리스트 상단에 표시.
  • 스크롤을 내리면 리스트와 함께 위로 사라지며, 고정(sticky) 헤더로 남기지는 않음.
  • 사용자가 아직 검색을 시도하지 않은 홈 상태에서는 이 텍스트를 출력하지 않음.
• 빈 상태 처리
  • “검색 결과 없음”의 경우에는 별도로 준비된 Empty State UI를 사용.
• 헤더 검색 아이콘 문제
  • 헤더에 돋보기 아이콘이 있었으나,
    • 어디서든 검색창으로 이동하는 전역 검색인지,
    • 메인 페이지로 이동하는 진입점인지 역할이 모호했고,
    • 이미 로고·탭 등 다른 진입 경로와 중복.
  • 결론: 헤더 상단 검색 아이콘 제거, 하단 네비의 검색/탐색 흐름만 사용.

알림·채팅 뱃지 정책

• 알림(벨 아이콘)
  • 현재 안 읽은 알림 개수를 숫자 뱃지로 표시하는 UX 채택.
  • 다만,
    • 숫자가 너무 커질 경우 뱃지가 UI를 뚫고 나오는 문제를 방지하기 위해
    • 최대 표시값을 99로 제한(실제 값 > 99여도 표시는 99).
• 채팅(하단 GNB 탭)
  • 채팅 탭에는 숫자 대신 **작은 동그라미(도트)**로만 “읽지 않은 메시지가 있다”는 신호를 주는 것으로 결정.
• 벨 아이콘 그래픽
  • 기존 예시에 점이 찍힌 벨 아이콘이 있어, 이 자체를 Notification 전용 아이콘으로 사용해도 좋겠다는 논의.
  • 최종 그래픽은 디자이너가 수정·비교 후 선택하기로 함.

인풋·에러 메시지·토스트 UX

• 검색/친구 추가 인풋
  • 작은 인풋 컴포넌트는 별도 스타일로 두고, 에러 발생 시 아래에 빨간 에러 텍스트를 노출.
  • 에러가 생길 때 높이가 달라지는 레이아웃 시프트는 용인하기로 함. (기본 상태를 예쁘게 유지하는 것이 우선.)
• 친구 검색 모달 UX
  • 잘못된 닉네임/ID로 검색 시
    • 모달을 닫지 않고, 모달 내부에서 “사용자를 찾을 수 없습니다” 메시지를 보여주고
    • 같은 모달 내에서 재입력·재검색이 가능하도록 설계.
• 토스트 색상
  • 현재 토스트가 눈에 잘 띄지 않아, 알림이 왔다가 사라진지 인지하기 어려운 문제를 공유.
  • 더 밝고 컬러풀한 색으로 조정하기로 하고, 디자이너가 새로운 토스트 컬러안을 시도해 보기로 함.

---

후속 액션

• 날짜, 시간 선택 UI 방향 선택 후 전달
• 헤더 검색 아이콘 제거 및 검색 플로우 정리.
• 알림/채팅 뱃지 로직(숫자·도트, 최대 99 표시) 구현.