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

[yoorli]

회의 개요

• 날짜: 2025.12.10(수)
• 회의 안건
  • 로그인 필요 액션 시 토스트 위치 및 로그인 에러 메시지 노출 방식 전달
  • 회원가입 중복 확인/힌트 문구 색상 처리 방향 전달
  • 마감된 모임 카드/상세 화면의 시각적 인디케이션(그레이 처리, 마감 뱃지 등) 결정
  • 날짜·시간 선택 컴포넌트(AM/PM, 연도, 스크롤바, 간격) 상호작용 개선
  • 버튼/셀렉트의 hover/active 스타일 추가 요청
  • 팔로우 검색 방식 및 비로그인 가능 기능/API 정리 필요 사항 공유
  • 태그 최대 개수 안내 문구 위치 결정
  • 채팅 메시지 “더 보기” 동작 및 화면 설계 요청
  • 회원가입 약관 동의 UI(체크박스 + 모달) 방향 전달

---

회의 내용 요약

1. 로그인 필요 동작 시, 비로그인 상태라면 로그인 페이지로 리다이렉트하면서 상단 토스트로 “로그인이 필요한 서비스입니다”를 노출하는 방향으로 진행하며, 토스트는 상단에 배치해 시인성을 확보.
2. 로그인 실패(이메일/비밀번호 불일치) 메시지는 각 인풋 하단이 아니라 로그인 버튼 위 별도 영역에 노출.
3. 이메일/닉네임 중복 확인 성공 메시지는 기존 회색보다 더 눈에 잘 들어오는 색으로 변경하되, 비밀번호 필드와의 어색함은 실제 디자인을 보고 다시 판단.
4. 마감된 모임은 리스트에서 “모집 마감” 라벨과 썸네일에 검은 오버레이를 얹어 한눈에 종료 상태가 보이도록 하고, 상세 페이지 전체를 회색 톤으로 죽이기보다는 버튼 비활성화 + 이미지 오버레이 중심으로 인디케이션.
5. 날짜·시간 선택 UI에서는 AM/PM 두 버튼이 동시에 색이 들어가는 현재 방식 대신, 하나의 토글 영역에서 AM/PM이 교대로 표시되는 방식이 더 명확하다는 의견, 실제 시안 비교 후 결정.
6. 날짜 선택 상단의 연도 드롭다운은 선택 기능을 제거하고, 인디케이터(현재 연·월 표시) 역할만 남기거나 아예 숨기는 방향을 검토. 연도 변경은 max 1년 범위 내에서 월 이동으로만 처리.
7. 버튼류 전반에 hover/active 상태 스타일을 추가로 정의해 달라고 요청.
8. 팔로우 기능에서 유저 검색은 “이름 완전 일치” 기준으로만 동작시키고, 팔로우한 유저 목록 조회 API는 별도로 없으며, 비로그인에서도 사용 가능한 API 목록은 정리해 전달 필요.
9. 태그는 최대 10개까지 가능하며, “태그는 최대 10개까지 등록 가능합니다.” 같은 안내 문구를 태그 입력 영역 하단에 노출하는 방향으로 정리.
10. 채팅 메시지가 길어질 경우 카카오톡처럼 “더 보기”를 노출해 펼쳐 보도록 하는 디자인을 추가.
11. 회원가입 시 약관 동의 체크박스를 두고, “자세히 보기” 클릭 시 모달로 약관 전문을 보여주는 형태로 구성하며, 약관 본문은 추후 일부 수정 후 최종본을 공유.

---

회의 내용 상세

로그인 필요 액션과 토스트 위치

• 비로그인 상태에서 로그인이 필요한 액션(모임 참여, 팔로우 등)을 시도하면:
  • 로그인 페이지로 리다이렉트하면서 상단에 토스트를 띄우는 흐름으로 통일.
• 기존에는 토스트가 하단에 노출되었으나, 로그인 페이지 하단은 시선이 잘 가지 않아 놓칠 수 있다는 의견.
• 케이스에 따라 상·하단 토스트를 섞는 서비스들도 있지만, 지금은 상단 고정으로 개발하고, 실제 사용성 보면서 필요 시 조정하기로 함

로그인 에러 메시지 영역 및 이메일 라벨

• 이메일/비밀번호가 틀렸을 때 나오는 “이메일 또는 비밀번호를 다시 확인해 주세요” 같은 메시지는:
  • 각 인풋 하단이 아닌, 로그인 버튼 위 별도 영역에 통합 표시하는 방향으로 결정.
• 로그인/회원가입에서 필드 라벨이 “아이디”로 되어 있었는데, 라벨·placeholder 모두 “이메일”로 변경.

회원가입 힌트/중복 확인 문구 색상

• 이메일·닉네임 중복 확인 성공 시 나오는 문구가 회색이라 눈에 잘 들어오지 않는다는 의견.
• “사용 가능한 이메일입니다” / “사용 가능한 닉네임입니다” 문구는:
  • 기존보다 명도·채도가 높은 색상(성공 계열)으로 변경해 가시성을 높이기로 함.
• 다만, 이메일/닉네임만 컬러가 있고 비밀번호·비밀번호 확인은 회색 그대로 두면
  • 화면 밸런스가 애매해질 수 있어, 색상 시안을 만들어 본 뒤 실제 화면을 보고 최종 결정하기로 함.

마감된 모임 카드/상세 인디케이션

• 시작 시간이 지난 모임(마감된 모임)을 리스트 상에서 어떻게 표현할지 논의:
  • 카드 상단 또는 썸네일 위에 “모집 마감” 라벨 추가.
  • 썸네일 위에 검은 반투명 오버레이를 깔아 한눈에 마감 상태임을 알 수 있게 처리.
• 기존 같이 달램 디자인에서도 이미지만 어둡게 처리하는 패턴이 있었고, 이를 참고하기로 함.
• 상세 페이지에서는:
  • 페이지 전체를 그레이톤으로 죽이기보다는, 상단/버튼 영역에 “모집 마감” 텍스트 또는 배지 노출,
  • 참여/참여 취소 등 상호작용 버튼은 disabled 처리.
• 전체 톤은 기본 상태를 유지하되,
  • 이미지 오버레이 + 버튼 비활성화 + 텍스트 안내로 “종료됨”을 명확히 전달하는 방향으로 정리.

날짜·시간 선택 컴포넌트 (AM/PM, 연도, 간격, 스크롤바)

• 현재 시간 선택에서 AM/PM이 각각 하나씩 버튼으로 표시되고 둘 다 색이 들어가는 구조:
  • 정보량이 많아 보이고, 상태 인지가 어려운 면이 있음.
• 제안:
  • AM/PM은 하나의 자리에만 표시되게 하고,
  • 클릭 시 AM ↔ PM이 토글되는 형태로 단순화.
• 기존 2버튼 버전과 나란히 비교해서 최종 선택하기로 함.
• 상단 연도 표기에 대해:
  • 모임 예약 허용 범위가 최대 1년 정도라 사용자가 직접 연도를 바꿀 필요성은 낮음.
• 연도 드롭다운으로 바꾸는 기능은 제거하고, 단순히 “현재 연/월 표시 인디케이터”로만 사용하거나, 필요 없으면 숨기는 쪽으로 검토.
• 시간/분/AM·PM 스크롤 리스트:
  • 스크롤바가 나타날 때 버튼 폭이 줄어드는 이슈가 있어, 셀 폭을 고정하고 스크롤바 영역을 항상 고려한 레이아웃으로 수정.
  • 시간 간격(예: 10분/30분)과 리스트 높이는 현재 안을 유지하되, 실제 사용성이 불편하면 이후 조정하기로 함.

버튼 hover/active 스타일

• 현재 버튼/셀렉트 등 인터랙티브 컴포넌트에 기본/선택 상태만 정의되어 있어,
  • hover/active 상태가 있으면 사용자 피드백이 더 좋아질 것이라는 의견.
• 기본 / hover / active(pressed) / disabled 네 상태까지
• 컬러/테두리/그림자 기준을 정의해 전달하기로 함.
• 프론트는 전달 받은 스타일 가이드를 기반으로 공통 버튼 컴포넌트와 날짜·시간 선택 버튼에 동일하게 적용.

팔로우 검색 및 비로그인 가능 API

• 팔로우 기능에서 유저 검색 조건:
  • “이름 완전 일치” 기준으로만 검색.
  • 부분 일치(contains) 검색이나 추천 검색은 이번 스코프에서 제외.
• 팔로우한 유저 목록 조회 API는 현재 설계에는 포함되어 있지 않으며,
  • 필요성이 커지면 추후 기능 확장 시점에 별도 도입하는 것으로 정리.
• 비로그인 상태에서도 호출 가능한 API 목록에 대해:
  • “비로그인 허용 API 리스트”를 문서로 만들어 공유하기로 함.

태그 개수 안내 문구

• 태그는 최대 10개까지 등록 가능(이전 합의 유지).
  • 태그 입력 영역 하단에
    • “태그는 최대 10개까지 등록 가능합니다.”
      같은 설명 문구를 노출하는 방식으로 정리.
  • 카운터 형식은 우선 사용하지 않음.

채팅 메시지 “더 보기” UX

• 채팅 메시지가 너무 길어질 경우:
  • 전체를 한 번에 보여주면 채팅창이 지나치게 길어지는 문제.
• 카카오톡 레퍼런스 참고:
  • 일정 줄 수까지만 표시하고, 하단에 “더 보기” 버튼을 두어 클릭 시 전체 내용이 펼쳐지게 하는 구조를 도입.
• 최대 줄 수, “더 보기” 문구 위치, 펼친 뒤 다시 접을지 여부 등은 시안으로 먼저 만들어 보고 논의.

회원가입 약관 동의 UI

• 회원가입 화면에 약관 동의 체크박스 추가:
  • “전체 동의” 또는 “서비스 이용약관 동의” 형태.
• “자세히 보기”를 누르면 모달로 약관 전문을 띄우는 구조로 진행.
• 약관 본문은 초안이 있으나, 일부 문구를 손보고 나서 최종본을 공유하기로 함.
• 회원가입 페이지:
  • 체크박스 + “자세히 보기”만 노출,
  • 실제 긴 텍스트는 모달 안에만 표시.

---

후속 액션

1. 회원가입 및 힌트 문구
   • 이메일/닉네임 중복 확인 성공 문구는 더 눈에 잘 띄는 색상으로 변경 시안을 제작 후 검토.
   • 약관 동의는 체크박스 + “자세히 보기” 모달 구조로 구현, 약관 문구는 다듬은 후 최종 공유.
2. 날짜·시간 선택 UI
   • AM/PM은 단일 위치 토글 방식으로 개선한 시안을 추가로 제작해 비교.
   • 상단 연도 드롭다운은 선택 기능 제거, 인디케이터 역할만 남기거나 숨김 검토.
   • 관련 버튼/셀렉트의 hover/active 스타일을 정의해 전달.
3. 팔로우/태그/채팅
   • 비로그인에서도 사용 가능한 API 목록은 정리해 제공.
   • 채팅 메시지 길어질 경우 “더 보기” 디자인 및 동작을 시안으로 추가.