독립 페이지 형태. 랜딩과 같은 배경(다크 + 블롭 + 노이즈) 위에 중앙 정렬 카드. 별도 카드 컨테이너 없이 콘텐츠가 배경 위에 직접 올라감 — 워드마크가 화면의 무게 중심.

독립 페이지와 동일 구조를 모달로 래핑. 미인증 상태에서 인앱 액션(랜딩 분석 시작, 보고서 공유 등) 클릭 시 호출. 탑 내비 없음, 현재 페이지 컨텍스트는 백드롭 뒤에 유지.

호출 트리거

랜딩 분석 시작 클릭 · 미인증 상태 보고서 진입 시도 · 공유 링크 외부에서 접속 시

구조 차이

탑 내비 제거 · 워드마크는 모달 헤더 자리에 32px로 축소 · 푸터 제거 · 모달 사이즈 md(560) · 닫기 X 우상단

인증 후

모달 닫고 호출 시점의 액션 자동 재개 (컨텍스트 유지). 예: 랜딩 분석 시작 → 모달 로그인 → 업로드 모달로 즉시 진입

모달 vs 독립 페이지 선택

인앱 액션 진입 → 모달 / 직접 URL 진입(/login) · 알림 메일 링크 · 북마크 → 독립 페이지

현재 반영 상태

M 섹션의 editorial-modals.html#login에 최신 모달 시안이 반영됨. 랜딩 내장 로그인 플로우도 동일한 소셜 로그인·이메일 폼·회원가입/비밀번호 찾기 구조를 사용한다.

그리드

중앙 정렬 단일 컬럼 · 카드 너비 360 (max-width) · 모바일 320

배경

랜딩과 동일 — 다크 그라데이션 + 블롭 드리프트 + 노이즈. 새로고침마다 시드 변경 없이 동일

키보드

Tab 순서: SSO 3 → 이메일 → 비밀번호 → 로그인 CTA → 회원가입 → 비밀번호 찾기. Enter 키로 폼 제출

검증

현재 구현: 이메일 형식 미준수 → 인풋 에러 + 올바른 이메일 형식이 아닙니다 · 비밀번호 빈 값 → 비밀번호를 입력해주세요. 서버 인증 실패/비밀번호 길이 정책은 API 연동 시 추가

로딩 상태

로그인 CTA 클릭 → 버튼 라벨 로그인 중 + 스피너 14px · 인풋 disabled · 응답 대기 평균 ~600ms

SSO 진입

현재 구현: SSO 버튼 클릭 → 연결 중 로딩 700ms → 데모 인증 저장 → 의도 URL 이동. 제품 구현 시 외부 OAuth 리디렉트 · 콜백 URL /auth/callback/:provider · 신규 사용자는 약관 동의 화면 1회 거침

의도된 다음 페이지

URL 파라미터 ?next= 처리 · 기본값 /library · 보호 페이지에서 리디렉트된 경우 원래 의도 URL로 복귀

모션

배경 블롭 드리프트만. 페이지 진입 시 콘텐츠 fade-in 200ms (reduced-motion 시 즉시 노출)

• SSO 신규 사용자 약관 동의 화면 (1회) — 별도 화면 vs 모달 vs 인라인
• 로그인 후 의도 URL 복귀 규칙은 현재 ?next=로 구현됨 — 허용 도메인/오픈 리다이렉트 방지 검증 필요
• 이메일 미인증 사용자 처리 — 인증 메일 발송 안내 화면
• "이메일 기억하기" 체크박스 도입 여부 — 페르소나 회사 PC + 개인 맥북 분리 사용
• 비밀번호 표시 토글 — 디자인 시스템 §7 input--password 패턴 적용 검토
• SSO 실패 시 폴백 UX — 토스트 vs 인라인 alert vs 리트라이

로그인과 동일한 셸(다크 배경 + 워드마크 + 360 너비 무카드 스택). 차이는 콘텐츠 — 이름 인풋, 비밀번호 확인 인풋 1개 추가, 약관 동의 3행, "가입하기" CTA. 검증 에러 상태는 인풋 보더 빨강 + 인라인 메시지 + CTA disabled. 상태별 시안은 전환 탭이 아니라 독립 프리뷰로 모두 노출한다.

탑 내비, 워드마크, SSO 3종, 디바이더, 푸터는 로그인(F2)과 동일. 아래는 회원가입에서 새로 등장하거나 달라진 요소만.

그리드

로그인과 동일 — 중앙 단일 컬럼 · 360 (모바일 320)

키보드

Tab 순서: SSO 3 → 이름 → 이메일 → 비밀번호 → 비밀번호 확인 → 전체 동의 → 필수 → 선택 → 가입 CTA → 로그인 링크

실시간 검증

이름: 빈값 검증 · 이메일: blur 시 형식 검증 · 비밀번호: keyup 시 규칙 평가 (8자 + 2가지 조합) · 비밀번호 확인: keyup 시 일치 검증 — 모두 충족 시 CTA 활성화

이메일 중복

현재 구현 없음. 후속 구현: blur 시점 서버 조회 · 중복 시 인풋 빨강 + 이미 가입된 이메일입니다. 로그인하시겠어요? + 인라인 "로그인" 링크

비밀번호 강도

규칙 미충족: 인풋 빨강 + 영문·숫자·특수문자 중 2가지 이상 조합, 8자 이상 · 규칙 충족: 헬프 텍스트 green + 안전한 비밀번호입니다

약관

"전체 동의" 클릭: 하위 2개 모두 토글 · 하위 모두 체크: "전체 동의" 자동 체크 · 필수만 체크해도 가입 가능 (선택은 마케팅 수신만)

SSO 가입

현재 구현: SSO 버튼 클릭 → 연결 중 로딩 → 데모 인증 저장 → 이메일 인증 완료 상태로 이동. 제품 구현에서는 SSO 신규 사용자 약관 동의 화면 1회 필요

가입 성공

현재 구현: 데모 가입 성공 → 입력한 이름과 이메일 저장 → editorial-verify-email.html#state-2. 제품 구현: 가입 API 200 → display_name 저장 → /verify-email state 1 리디렉트(메일 자동 발송 + 안내) · 5,000 크레딧 지급은 인증 완료 시점

• 약관 분리 — 외부 제공·국외 이전·만 14세 분리 동의 항목 필요 여부 (법무 검토)
• 약관 본문 모달 — [필수] 항목 클릭 시 본문 모달 vs 별도 페이지
• SSO 신규 사용자 약관 동의 화면 — 별도 화면 vs 모달 vs 인라인
• 회사 이메일 도메인 차단 여부 — 페르소나는 개인 Gmail 선호하나 회사 가입 케이스 처리
• 5,000 크레딧 지급 시점 — 가입 즉시 vs 이메일 인증 후 (현재 안: 인증 후)
• 비밀번호 표시 토글 — 디자인 시스템 §7 input--password 적용 검토
• 가입 직후 온보딩 — 첫 업로드 가이드 vs 빈 라이브러리

단일 URL에 3개 상태. state 1·2는 같은 페이지에서 폼 제출로 전환, state 3은 메일 링크의 토큰으로 별도 진입. SSO 가입자는 비밀번호가 없으므로 state 2에서 안내 추가. 상태별 시안은 각각 독립 프리뷰로 노출한다.

토큰 수명

재설정 링크 30분 유효 · 1회용 (사용 즉시 만료)

계정 존재 누설 방지

state 1 제출 시 미가입 이메일이어도 state 2 노출 — 계정 enum 공격 차단

SSO 가입자 처리

이메일로 비밀번호 재설정 요청 시: 메일 본문에 SSO로 가입하셨습니다. {provider}로 로그인해주세요 안내만 발송 (재설정 링크 미포함). state 2 화면 자체는 동일하게 노출

재전송 제한

현재 구현은 즉시 재전송 피드백만 제공. 제품 구현은 60초 쿨다운 · 동일 IP 시간당 10회 · 초과 시 reCAPTCHA

state 3 토큰 만료

만료된 링크 진입 시: 별도 안내 화면 + 링크가 만료되었습니다. 다시 요청해주세요 + state 1로 돌아가는 CTA (디자인 v1.2)

변경 후

비밀번호 변경 성공 시 모든 기존 세션 무효화 (보안) · 사용자에게 알림 메일 발송 (해킹 인지)

키보드

각 state Enter 키로 폼 제출 가능

• state 3 토큰 만료 화면 — 별도 디자인 화면 추가 (현재 안: F2.4 verify-email state 3과 동일 패턴)
• SSO 가입자가 비밀번호 재설정 요청 시 — 메일 본문 안내 카피 확정
• 변경 후 자동 로그인 여부 — 현재 안: 미로그인 (보안 우선)
• 변경 후 알림 메일 본문 — IP / 시간 / 디바이스 표시 수준
• 2FA 도입 시점 — v2 (현재는 단일 인자)

state 1은 가입 직후 메일 발송 안내, state 2는 인증 완료, state 3은 링크 만료 화면이다. 현재 시안은 해시와 상단 스위처로 상태를 강제 표시하며, 실제 제품에서는 같은 URL에서 서버 토큰 검증 결과에 따라 다른 뷰가 렌더링된다. 상태별 시안은 각각 독립 프리뷰로 노출한다.

토큰 수명

인증 링크 24시간 유효 · 1회용

state 1 확인

현재 구현은 폴링 없음. 해시/스위처로 상태를 전환하고, 재전송 버튼은 라벨 변경과 토스트만 제공. 제품 구현은 5초 간격 GET /me/verification-status · verified=true 시 자동 state 2 전환

state 2 자동 이동

현재 구현은 5초 후 자동으로 이동합니다 문구와 라이브러리 CTA만 제공하며 자동 이동 없음. 제품 구현은 카운트다운 종료 또는 CTA 클릭 시 라이브러리 이동 · URL ?next= 우선

토큰 만료 분기

링크 클릭 시 GET /verify-email?token=... · 응답: valid(state 2) · expired(state 3) · invalid(state 3 — 같은 화면 다른 카피 v1.2)

이메일 변경

현재 구현은 버튼 배치만 있고 모달 없음. 제품 구현은 state 1 "이메일 변경" 클릭 → 인풋 모달 · 변경 시 기존 미인증 토큰 모두 폐기 + 새 메일 발송 + state 1 카운터 리셋

크레딧 지급

state 2 도달 시점 (= 토큰 검증 성공) — DB 트랜잭션으로 verified=true와 동시에 5,000 크레딧 지급

미인증 계정 보존

24시간 내 미인증: 계정 보존 + 재발송 무한 · 24시간 경과: 계정 자동 삭제 + 동일 이메일 재가입 가능

스팸함

state 1 보조 카피 v1.2: 메일이 오지 않으면 스팸함을 확인해주세요 추가 검토

• SSO 가입자의 이름 fallback — provider profile name이 없거나 한글 이름이 아닐 때 이메일 로컬파트를 그대로 쓸지, 추가 이름 입력을 요구할지 결정 필요
• state 2 자동 이동 — 현재는 텍스트만 있고 타이머 없음. 실제 자동 이동을 도입할지, CTA만 유지할지 결정 필요
• state 1 "이메일 변경" 모달 디자인 및 실제 버튼 연결
• state 3 invalid 토큰(만료가 아닌 위변조) 화면 카피 분기 — v1.2
• SSO 가입자는 이메일 인증 자체 생략 — 현 안: SSO 이메일은 검증된 것으로 간주 (네이버·카카오는 검증 안 됨, 이슈)
• 인증 완료 알림 — 환영 메일 발송 여부 (영업 메일 vs 첫 사용 가이드)
• 미인증 24시간 경과 안내 — 삭제 직전 알림 메일 vs 즉시 삭제

데스크톱은 사이드바 240 + 본문. 태블릿(iPad Pro 11" 가로)에서 사이드바 200으로 축소 + 본문 패딩 축소 + 행 액션 상시 노출. 모바일은 사이드바 드로어 + 테이블 가로 스크롤(향후 카드 변환은 미결).

그리드

데스크톱 사이드바 240 + 본문 max-width 1280 · 본문 패딩 40 / 태블릿 사이드바 200 · 본문 패딩 24 / 모바일 사이드바 드로어 · 본문 패딩 16

상태 흐름

업로드 모달 완료 전에는 별도 행 자동 삽입 없음. 현재 목록에는 샘플 "분석 중 62%" 행이 있으며, 실패 행의 다시 시도는 "업로드 모달에서 다시 처리할 수 있습니다" 토스트를 노출

행 클릭 vs 액션

행 본문 클릭 → 보고서 진입 (완료 상태만) · 행 액션 버튼은 stopPropagation 처리. 행 hover 시 cursor pointer + Gray 50 배경

정렬

현재 구현: 파일 이름 컬럼에 desc 시각 상태만 표시. 헤더 클릭 정렬, 사용자 선택, localStorage 보존은 후속 구현

검색 동작

검색 버튼 또는 ⌘K/Ctrl+K → 오버레이. 입력 즉시 파일 이름 부분 일치 결과 최대 8개 표시, 결과 클릭 시 해당 문서 진입. 자동완성 없음. 현재 결과 보조 상태값은 내부 키(done/processing/failed/waiting)로 표시되어 로컬라이즈 필요

Empty state

원고 0건일 때: 일러스트 + "아직 원고가 없습니다" + 본문 + "원고 업로드" CTA. 검색 결과 0건일 때: 검색 키워드 인용 + 다시 시도 안내

키보드 · 접근성

데스크톱 Tab 순서: 사이드바 → 검색 → 알림 → 프로필 → 필터 → 테이블 행 → 페이지네이션. 모바일: 햄버거 → 패널 상단 알림/닫기 → 메뉴 항목 또는 알림 뒤로가기/모두 읽음/목록. 행 위에서 Enter → 보고서 진입

실시간 갱신

현재 구현은 정적 샘플 상태 + 클라이언트 필터링. 분석 중 행의 폴링/SSE 상태 업데이트는 인프라 결정 후 확정

모달 호출

현재 구현: 업로드 모달 · 공유 모달 · 다운로드 모달 · 분석 중 모달. 더보기 메뉴의 이름 변경/삭제 confirm은 메뉴 항목만 있고 별도 모달은 후속 구현

• 실패 행 클릭 동작 — 에러 상세 모달 vs 토스트 안내
• 필터 적용 후 카운트 표기 — 페이지 타이틀 옆 vs 페이지네이션 메타 옆 (현재 두 곳 분리)
• 실서비스 연동 시 알림 SSE 재연결/refetch 정책과 실패·업로드·취소 클릭 후 해당 문서 강조 여부 검증. HTML 시안 검증용 샘플은 ?notifications=seed로 재주입
• 업로드 모달 5단계는 M 섹션과 랜딩 내장 플로우에 반영됨. 라이브러리 진입 시 동일 공용 플로우를 호출하도록 연동 방식 확정 필요
• 테이블 정렬 실제 동작 — 현재는 정렬 가능 시각 표시만 존재
• 검색 오버레이 결과 보조 상태값 로컬라이즈 — 현재 내부 키(done/processing/failed/waiting)가 표시됨

데스크톱은 사이드바 240 + 본문(max 980). 태블릿은 사이드바 200 + 본문 패딩 축소. 모바일은 드로어 + 카드 패딩 축소. 항목 카드는 모든 뷰포트에서 동일 구조 (가로 분할 없음 — 원문/제안 수직 스택).

키보드 단축키

현재 구현: K/→ 다음 항목 · J/← 이전 항목. A 승인 · X 무시 · B 북마크 · G B 북마크 위치 · ? 도움말 · ⌘K 검색은 후속 구현

현재 항목 표시

키보드 J/K 또는 좌우 화살표로 이동 시 현재 필터에서 보이는 항목 목록을 기준으로 다음/이전 항목을 뷰포트 중앙으로 부드럽게 스크롤하고, 이동된 항목에는 선택 상태 primary stroke를 유지한다. 브라우저 기본 focus ring과는 별개로 카드 선택 상태를 표시

변경 저장

현재 구현: 승인·무시·승인 취소·무시 취소는 클라이언트 상태만 즉시 변경하고 토스트 표시. 서버 저장, 실패 롤백, 인라인 제목 수정 저장은 API 연동 후 구현

다운로드 동작

다운로드 클릭 → 모달에서 포함할 제안 상태(모든 제안 / 승인 / 무시 / 미선택)와 받을 파일(보고서 PDF / 주석 원본 파일)을 체크박스로 선택. 상태 또는 파일 선택이 0개이면 경고 토스트, 정상 선택 시 다운로드 시작 토스트

공유 모달

공유 클릭 → 공유 모달. 경고 배너 + 만료 기간 7일/30일/무기한 + 원본 다운로드 허용 토글 + 링크 생성. 생성 후 같은 모달 안에 공유 링크, 복사 버튼, 공유된 보고서 보기 링크를 노출

실시간 동기화

본 페이지는 단일 사용자 가정 (v1). v2에서 협업 시 실시간 동기화 고려 (편집자 + 작가 공동 검토 시나리오)

접근성

항목 카드는 <article> 시맨틱 · 액션 버튼은 명시적 라벨 · diff는 색에 의존하지 않고 strikethrough/bold로 구분 · 단축키는 화면 외 도움말 메뉴로 안내

모바일 처리 효율

모바일에서는 키보드 단축키 없음 → 버튼만 사용. 항목 카드 액션 영역 더 크게 (flex 1로 풀너비 분배). 페르소나는 모바일을 검토 용도로만 가정 — 처리는 데스크톱·태블릿

• 스타일 분석 모달은 보고서 런타임에서 3탭(용어집/문장 길이/반복어)으로 구현, M 갤러리는 정적 용어집 중심 시안 — 어느 쪽을 기준 컴포넌트로 삼을지 정리 필요
• 공유 모달은 M 섹션에 before/after 상태로 반영됨 — 워터마크·접근 로그 알림 범위는 추가 결정 필요
• 업로드 모달 5단계는 M 섹션과 랜딩 내장 플로우에 반영됨 — 라이브러리 호출 시 상태 동기화 방식 확인 필요
• 스타일 분석 결과의 항목 카드 연결 — 예: 용어집의 의도 표기/예외어를 해당 교정 항목 묶음으로 보기
• 이전 다운로드 이력 — 보고서가 여러 번 다운로드된 경우 버전 관리
• 다국어 출판 시나리오 — 번역 원고(영→한)의 교정 vs 창작 원고의 교정 구분 표시
• 편집자 vs 작가 권한 분리 — 공유받은 작가가 직접 무시·승인 가능한지
• 이동 외 단축키(A 승인, X 무시, B 북마크, ? 도움말) 구현 범위와 키보드 도움말 오버레이 디자인
• 좌측 항목 리스트 사이드 패널 도입 검토 — 데스크톱에서 항목 점프 인덱스

고정 탑 내비 + 8개 세로 섹션. 섹션 경계는 하드 컬러 블록으로 전환하고, 실제 구현은 Hero·한국어 최적화·Final 안에서만 제한적으로 그라데이션/블롭을 사용한다. 다크/라이트 교차로 시각적 호흡과 위계를 만들고, 다크 bookend가 진입·이탈 시점에 안정감을 준다. 페이지 전체는 약 4,800px (데스크톱 1920 기준).

다크 5 · 라이트 3 — 다크가 시작과 끝을 잡는다.

인칭

1인칭 복수 "우리는". 자신감 있되 자랑 없이. 회사를 "북엔드"로 호명하지 않고 도구 이름 "editorial"로 호명 → 회사 자랑 회피

문체

합쇼체 (~합니다, ~입니다) · 단정조. 해요체 금지 (~해요는 톤이 가벼움) · 학술 만연체 금지

금지어

"AI로 편집자를 대체" · "효율" · "생산성 제고" · "기계가 낫다" · "혁신적" · "차세대" — 편집자를 부정하는 어휘 일체 금지

핵심 메시지

"당신이 더욱 도서 편집의 본질에 집중할 수 있도록" — 모든 섹션이 이 한 줄로 환원되어야 함. 카피 작성 시 이 문장과 어긋나는지 자가 점검

비교 어휘

경쟁사·외주 교정과 자기를 나란히 놓지 않음. "외주 교정 대신" 같은 직접 비교 회피. 카드 안에서 페르소나가 자기를 어디에 두는지 자연히 위치하게 함

크레딧

인증·온보딩 안내처럼 "5,000 크레딧" 단독 표기. "자" 환산 노출은 /pricing·/plan·업로드 단계에만

회사 호명

회사명 "주식회사 북엔드"는 푸터에만. 본문에서 회사 배경(투자/이력) 노출 안 함. 회사 메시지는 제품 메시지로 갈음

강조 컬러

Tiger Orange는 핵심 어구 1개만 (H1 한 줄당 1군데). "예외 없이" "세 번" "작품의 본질에" — 의미 핵을 짚는 용도. 액센트 남발 금지

탑 내비

고정 (fixed) · backdrop blur 12px · 배경 rgba(17,17,17,0.72) — 라이트 섹션 진입 시에도 다크 유지 (전체 페이지 일관성)

섹션 패딩

각 섹션 상하 12~14rem · 좌우 4.8rem (모바일 1.6rem). 다크↔라이트의 섹션 경계는 하드 컬러 블록으로 처리하고, 내부 그라데이션은 Hero·한국어 최적화·Final처럼 구현상 필요한 다크 섹션에만 제한

최대 너비

본문 그리드 1180px · 작동방식 카드 그리드 1240px (3 카드 호흡)

스크롤 모션

v1.0: 정적 (스크롤 리빌·패럴럭스 없음) · v1.2에서 reveal 검토 — 다만 reduced-motion 우선 정책 유지

블롭

Hero·Final에만. 중간 다크 섹션은 정적 그라데이션 또는 단색 (블롭 남발 금지)

이미지

실제 이미지 없음 — 헤더는 타이포, 발췌는 마크업 텍스트, 푸터는 추상 블롭. 실제 사진/일러스트 도입은 v2 검토

반응형

1199 이하: 작동방식 3→2+1 카드 · 수치 4→2×2 · 이런 분에게 3→세로 적층 / 767 이하: 모든 grid 단열 · stat band 세로

접근성

각 섹션 aria-labelledby로 H2 연결 · 블롭/노이즈 aria-hidden · CTA 텍스트 명시 (icon-only 금지) · 컬러 대비 AA 충족

• 섹션 06 수치 — 모두 placeholder. 출시 전 실제 내부 벤치마크로 교체. 정확도 측정 기준 문서화 필요
• 섹션 02 발췌 예시 — placeholder. 사내 코퍼스에서 익명화된 실 사례로 교체 (저작권 영향 검토)
• 스크롤 리빌 모션 — v1.0 정적. v1.2에서 fade-up 정도 도입 검토 (reduced-motion 분기 필수)
• IA v1.3에 있던 "결과물 쇼케이스"(보고서/라이브러리/스타일 분석 스크린샷) 자리 — 본 라운드 누락. 실 스크린샷 확보 후 §3 한국어 최적화 ↔ §4 사이에 삽입 검토
• 비교 섹션 — IA v1.3 "맞춤법 검사기 vs 외주 교정 vs editorial" 비교표는 자기 비교를 회피하는 UX 라이팅 원칙과 충돌. 페르소나 카드로 흡수했으나, 페르소나가 도구를 어디에 두는지를 더 명시할지 결정 필요
• 크리덴셜 노출 — KAIST·NVIDIA Inception·TIPS 등 IA v1.3 자리. "회사 자랑 회피" 결정에 따라 본 라운드 삭제. 미인증 사용자가 신뢰 신호를 어디서 얻는지 별도 검토 (FAQ? 푸터?)
• /brand 진입은 §7 브랜드 브리지에 반영됨. 남은 과제는 F11 브랜드북 placeholder 본문을 실제 브랜드 내러티브·시스템 링크로 확장하는 것
• SEO meta — title/description/og:image 별도 명세 필요

고정 탑 내비 + 5개 세로 섹션 모두 다크. 섹션 간 그라데이션 미세 변화로 호흡을 만들되 라이트 전환은 없음. /about과 달리 가격은 신뢰의 톤이라 톤 일관성을 우선.

단위

1 크레딧 = 한국어 10자. 개별 구매 기본가는 1 크레딧 = 1원이며, 1만 크레딧 이상부터 7–20% 차등 할인. 처리 분량은 원본 파일의 본문 텍스트(공백 포함) 길이로 측정. 그림·표·각주는 본문 분량에서 제외

구독 vs 종량제

구독은 같은 가격으로 종량제 대비 약 2배 분량 제공 — 매월 정기 사용자에게 유리한 구조. 종량제는 비정기 사용자용 · 만료 없음

크레딧 우선순위

처리 시 구독 크레딧이 먼저 소진된 뒤 충전 크레딧이 사용됨. 구독 크레딧은 해당 결제기간 종료 시 미사용분이 소멸하므로 사용자 선택 없이 우선 차감

이월

구독 크레딧 — 다음 결제기간으로 이월되지 않음. 해당 결제기간 종료 시 미사용분 소멸. 종량제 충전 크레딧 — 별도 고지 없는 한 만료 기간 없이 유지

환불

결제 7일 이내, 해당 결제건의 크레딧 미사용 시 전액 환불 · 일부 사용 시 실제 결제 단가 기준으로 사용분 차감 · 원고 처리 개시 후 맞춤형 결과물 생성 시 결제 화면 별도 동의 범위와 관계 법령상 허용 범위에서 환불 제한 가능 · 승인 환불은 3영업일 이내 원 결제 수단 취소/환급

플랜 변경

상위 플랜: 즉시 변경 + 남은 기간 차액 결제 + 추가 크레딧 일할 지급 · 하위 플랜: 다음 결제일부터 적용

연간 결제

월 가격의 10/12 (2개월 무료) · 표시는 "월 환산가" 기준으로 보여줘 비교 용이 · 보조 라인에 "연 ~원 · 17% 절감" · 중도 환불 요청 시 제공 완료분/사용분/할인 정산분을 제외한 잔여 미제공 기간 기준으로 산정

크레딧 표기

가격/플랜/업로드 단계에서만 "10자" 환산 노출. 인증·온보딩·라이브러리·보고서·푸터 등 모든 다른 화면에서는 "5,000 크레딧"처럼 크레딧 단독 표기

CTA 동작

현재 구현: Basic/Pro CTA 클릭 → showAuthGate 모달 → 인증 완료 후 editorial-checkout.html?plan=basic|pro&cycle=monthly|annual. 최종 CTA는 인증 후 업로드 모달로 진입. Enterprise는 mailto:hello@bookend.tech

표시 통화

대한민국 원 (KRW). 부가세 별도/포함 표기는 결제 화면에서 명시. 가격 페이지는 표시가 기준

• 플랜별 분량 — Basic 50,000 / Pro 150,000 크레딧은 임시. 실제 사용자 패턴 데이터 확보 후 조정 (페르소나 김민경 월 1~2권 = 30~60만자)
• 연간 절감율 17% — 정확한 비율 확정 (현 안: 10/12 = 16.67%, 표기 17%)
• Enterprise 가격 비공개 정책 — 표시 vs 시작가 노출(예: "월 200만원~")의 트레이드오프 검토
• 충전 크레딧 만료 없음 — 정책 확정. 회계상 미사용 충전 크레딧 처리 (선수금 vs 매출 인식 시점)는 법무·세무 검토
• 구독 해지·전환 시 잔여 구독 크레딧 처리 — 다음 결제일까지 사용 가능, 이후 미사용분 소멸. 충전 크레딧은 유지
• 학생·교육기관 할인 — 별도 플랜 vs 프로모코드 (현 안: 미배치)
• FAQ 8항목 — 출시 후 실제 문의 누적으로 갱신. 검색·필터링 추가 검토
• 가격 표시 단위 — 단행본 권수 환산 ("4~5권 분량")의 정확성 — 권당 평균 분량 기준 명시 필요
• SEO meta — title/description/og:image · 검색 인텐트 "AI 교정 가격", "한국어 교정 비용" 대응

중앙 정렬 단일 컬럼. 상단 메타(버전·적용일·최종 갱신) → TOC → 본문 17조. 본문은 word-break: keep-all로 한국어 줄바뀜 최적화.

• 결제 및 환불정책 v2 — 상세 환불 산식·프로모션 크레딧·부분 사용분 처리 기준 문서화 완료. 운영 전 PG/회계 정합성 최종 확인 필요
• 법인·팀 계정 약관 — 개인 가입을 기본으로 하되 팀·법인 플랜은 별도 절차/계약/세금계산서 정보 수집을 허용
• 약관 동의 이력 보존 — 사용자가 동의한 시점의 약관 버전 추적 (DB 설계)
• 약관 변경 시 사전 고지 채널 — 메일 + 인앱 배너 + 강제 재동의 화면 결정
• 원고 보존 설정 — 기본값 보관, 사용자가 보관/즉시 삭제/자동 삭제를 선택할 수 있도록 DB·설정 UI 설계
• 모바일 reading 경험 — 17조 긴 본문의 TOC 고정 vs 스크롤 spy 검토
• 인쇄용 레이아웃 — print stylesheet 필요

셸·TOC 구조는 F7 이용약관과 동일. 차이는 본문 구성과 핵심 노출 항목.

• 원고 데이터 처리 공급자와 반출 위치는 내부 운영 문서에서만 관리
• 이전 버전 보관 URL 확정
• 맞춤형 광고·제3자 행태정보 수집 도구 도입 시 쿠키/CMP 고지 추가
• 가명정보 처리 또는 통계 목적 데이터 활용을 도입하는 경우 별도 조항 추가

• 사업자 카드와 공정거래위 등록 정보의 정합성 정기 검수
• 고객 지원 채널 다양화 검토 — 이메일 외 채팅(인앱) 도입 시 안내 추가
• 다국어(영문) 표시 — 해외 사용자 대응 시 별도 영문 페이지

단일 파일 3상태. 우상단 STATE 스위처(디자이너 chrome) 또는 URL hash #state-404 / #state-500 / #state-empty로 전환 가능하지만, 기획서에서는 각 상태 시안을 독립 프리뷰로 모두 노출한다.

• 503 점검 / 401 인증 만료 / 403 권한 없음 등 세분화 상태 추가 여부
• 500 오류 코드 자동 생성 규칙 — 서버 trace 연결
• 오프라인 / 네트워크 단절 상태 — Service Worker 캐시 폴백 검토
• 404 시 추천 페이지 (가장 가까운 매치) 노출 여부
• 라이브러리 inline empty 컴포넌트 → 본 페이지 빈 상태 디자인 일관 동기화

• 본격 작업 라운드 — 3~4턴 헤비. 다이내믹 그라데이션 + 스크롤 리빌 + 6 섹션 narrative
• 푸터에 /brand 링크 추가 여부 — 현재 미배치, /about §6.5 단일 진입로만
• /brand/system 라우트 — 디자인 시스템 페이지를 /brand 하위로 둘지, 독립 유지할지 결정
• 브랜드 모션 — 풀 앰비언트 모션 시드 / reduced-motion 정책
• 실제 발췌 콘텐츠 — 사내 코퍼스 익명화 또는 외부 인용 (저작권 검토)

사이드바 + topbar는 라이브러리(F3)와 동일. 본문은 1180px max, 5개 섹션이 세로 적층 — 현재 플랜 카드(다크 강조) → 사용량(라이트 2-col) → 충전 프리셋(6-card) → 사용 내역(8-row table) → 해지(저시인성). 헤더 우측 시안 확인용 토글로 구독 화면/미구독 화면을 전환한다.

• 전체 사용 내역 페이지 또는 무한 스크롤 — 현재는 10행 정적 테이블 + 페이지 토스트
• 플랜 해지 상세 흐름은 F16 별도 페이지로 구현. 마이 플랜 하단은 링크 진입만 유지
• 크레딧 충전은 준비 중 상태. + 크레딧 충전 CTA는 구독/미구독 화면 모두 비활성화하고, hover/focus 시 크레딧 충전은 곧 출시됩니다. 툴팁만 노출
• 플랜 변경 시 다운그레이드 케이스 — 즉시 변경 / 다음 결제일 변경 / 잔여 일수 환불 정책
• 법인 결제 회원의 플랜 카드 표시 — 사업자 정보 노출 / 세금계산서 발행 이력 진입로
• 구독 크레딧 소진·소멸 임박 알림 — 80% 도달 또는 결제기간 종료 전 미사용 잔량이 있을 때 인앱 알림 / 메일 발송 검토

단일 페이지에 4상태 — default(폼 입력) · processing(오버레이 + 스피너) · failed(상단 배너 + 폼 유지) · success(폼 영역 전환 + 영수증 카드). 우상단 STATE 스위처 또는 URL hash #state-{name}로 디자인 리뷰 전환 가능하지만, 기획서에서는 각 상태 시안을 독립 프리뷰로 모두 노출한다.

결제 처리 주체

제품 구현 기준: 토스페이먼츠 — 카드 번호·CVC 등 민감 정보는 토스에서 토큰화 처리. 현재 HTML은 데모 폼/상태 전환만 구현되어 실제 결제 요청 없음

자동 갱신

월간/연간 모두 자동 갱신 기본. 자동 갱신 약관 동의 [필수]. 갱신 7일 전 메일 안내. 갱신 후 영수증 자동 발송

세금계산서

현재 구현은 법인 선택 시 사업자 정보 필드 노출까지만 제공. 제품 구현은 결제일 다음 날 자동 발행 · 입력 이메일 발송 · 설정 → 결제 → 청구 내역 다운로드

환불

F7 이용약관 제10조 — 결제 7일 이내 해당 결제건의 크레딧 미사용 시 전액 환불. 일부 사용 시 실제 결제 단가 기준으로 사용분 차감 후 환불 가능. 승인 환불은 3영업일 이내 원 결제 수단 취소/환급. 연간 결제 중도 환불은 제공 완료분과 사용분을 제외한 잔여 미제공 기간 기준

실패 처리

현재 구현은 #state-failed 또는 상태 스위처로 실패 배너를 확인하고, 스위처 클릭 시 토스트를 노출한다. 제품 구현은 카드사 거절 메시지/오류 코드 표시 · 5회 연속 실패 시 10분 잠금

중복 결제 방지

현재 구현: CTA 클릭 → processing 상태 즉시 전환 + 폼 pointer-events 차단. 제품 구현: 토스 webhook idempotency key 적용

이탈 방지

processing 중 페이지 닫기 시도 → beforeunload 경고 · success/failed 도달 전 미결제 상태 유지

약관 본문 노출

구매 약관·환불 정책 모두 새 탭 (target=_blank) — 결제 폼 컨텍스트 유지

금액 표기

tabular-nums · 부가세 포함 명시 · 12개월 합계와 할인 분리 표기로 사용자가 절감액 인지

• 체크아웃 URL 파라미터 반영 — 현재 페이지는 ?action=topup&credits=…를 읽어 크레딧 충전 주문 요약으로 전환. ?plan, ?cycle, ?action=payment-method의 요약 전환은 후속
• 업로드 모달의 크레딧 부족 시 결제 진입 — 크레딧 구매는 ?action=topup&credits=… 진입으로 구현. 플랜 업그레이드는 체크아웃의 플랜/주기 요약 반영 정책 확정 필요
• 크레딧 충전 단건결제 — ?action=topup&credits=… 진입 시 checkout 본문이 구매 크레딧·할인율·최종 결제금액으로 전환
• 토스 SDK 통합 — 카드 토큰화 + 결제창 호출 + webhook 처리
• 해외 카드/결제 지원 — Stripe 등 추가 PG 검토 (v2)
• 법인 카드 + 세금계산서 발행 — 사업자번호 검증(국세청 API) · 자동 발행 트리거 명세
• 3D Secure / ARS 인증 등 추가 인증 단계 — processing 상태 내부 단계 표시
• 구독 변경 시 일할 정산 표시 — summary 카드에 "기존 플랜 잔여 환불" 라인 추가 검토

경량 탑바 (워드마크 + "공유된 보고서" 라벨 + 만료일 표시) + 읽기 전용 배너 (주황 톤) + 좌측 필터 사이드바 + 우측 교정 제안 아이템 리스트. 보고서 F4와 구조 유사하되 수정/승인 인터랙션 없음.

토큰

제품 구현 기준: 예측 불가 토큰 (예: x9k2-p4mb-7n3q) · 12자 이상 랜덤 · 보고서마다 공유 셋당 여러 개 발급 가능. 현재 HTML은 정적 공유 페이지

만료

제품 구현 기준: 7일 / 30일 / 무기한 (Pro 이상) 설정. 현재 페이지는 만료일 문구만 노출하며, 만료/비활성화 상태 화면은 미구현

비활성화

작성자가 보고서(F4) 공유 설정에서 즉시 토글로 비활성화 가능. 비활성화 후 접근 · "공유가 종료되었습니다" 화면

다운로드 차단

현재 UI에는 다운로드 액션이 없다. 제품 구현에서는 원고·보고서 PDF 다운로드 차단, 출력 시 원고 본문 숨김 처리 등 서버/스타일 정책을 추가

접근 로그

현재 미구현. 제품 구현에서는 링크 접근 시 IP · 접속 시각 · (로그인 사용자는 계정) 기록 · 작성자에게 로그 제공 (v1.2 검토)

SEO/인덱싱

noindex, nofollow, noarchive 메타 적용 · 검색엔진 수집 차단

링크 공유 채널

링크 복사 단일 채널 (도메인+토큰) · 메신저/메일 전달은 사용자 재량 · 메일 수신자 입력 기능은 미배치 (v2)

• 만료/비활성화 상태 화면 설계 — 별도 페이지 vs 인라인 메시지
• 활성화 링크 접근 로그 · 작성자에게 접근 통계 제공 (v1.2)
• 외부인의 코멘트 기능 — 읽기 전용이나 특정 항목에 코멘트 달기 가능성 (v2)
• 다국어 자동 프레임 — 공유 받는 외국인 컨텍스트 (영문 톤)
• 워터마크 · 타임 스탬프 — 스크린샷 유출 방지 검토 (v2)

데스크톱 200px secondary nav + 1fr panel. 탭 선택 시 URL hash 동기화 — 외부 링크로 특정 탭 직접 진입 가능. 데스크톱 상단바 우측은 공통 알림 패널 진입점과 사용자 칩을 유지하고, 모바일은 알림 진입점을 햄버거 패널 상단으로 이동한다. 1199px 이하에서는 탭이 가로 wrap 행으로 전환. 기획서 프리뷰도 탭으로 전환해 한 번에 하나의 설정 화면만 확인하고, 쿠폰 성공은 입력 영역 아래 카드로 노출한다.

저장 모델

현재 구현: 프로필 탭의 표시 이름·언어·시간대가 저장된 값과 달라졌을 때만 되돌리기와 변경사항 저장 버튼 활성화. 저장 클릭 → 600ms 로딩 → 현재 값을 새 저장 기준값으로 갱신 + 성공 토스트. 토글은 클릭 즉시 성공 토스트

쿠폰 입력 탭

쿠폰 입력은 설정의 5번째 탭 #coupon으로 제공한다. 프로필 탭 save-bar에는 쿠폰 입력 버튼을 노출하지 않고, 좌측 설정 탭에서 항상 접근 가능하게 한다. 실패는 입력창 아래 붉은 inline 텍스트로, 성공은 입력 폼 영역을 성공 상태 블록으로 전환해 안내한다. 회원가입 기본 지급 쿠폰 WELCOME-5000은 가입일 사용 완료 이력으로 표시한다

되돌리기

활성화 상태에서 클릭 시 표시 이름·언어·시간대를 마지막 저장 기준값으로 복원하고 버튼을 다시 비활성화. 변경사항 없음 상태에서는 disabled

토글 즉시 적용

현재 구현은 토글 변경 시 성공 토스트만 노출. 제품 구현은 서버 호출(낙관적 UI) + 실패 시 롤백 + 오류 토스트

탭 간 미저장 변경

탭 전환 시 미저장 변경 있으면 확인 모달 (v1.1) — 현재는 hash 전환만

접근성

각 탭 button에 role=tab + aria-selected · 패널에 aria-labelledby. URL hash로 직접 진입 시 해당 탭 자동 활성

• 2FA 실 구현 — 토글 UI만 있고 활성화 흐름(QR / 백업 코드 / 복구) 미설계
• 계정 삭제 확인 모달은 구현됨. 비밀번호 재인증 + 30일 유예 vs 즉시 삭제 정책은 미정
• 알림 — 카카오 알림톡 채널 도입 시 이메일/인앱과 별도 채널 토글 추가
• SSO 연결 해제 흐름 — 비밀번호 미설정 회원이 해제할 때 비밀번호 강제 설정
• 다국어 — 영어/일본어 출시 시 시간대 옵션 확장 + 카피 번역
• 모바일 — 5개 탭 기준으로 가로 wrap 유지. 더 좁은 화면에서 가로 스크롤 전환 필요 여부 확인

사이드바 없는 미니 topbar + 중앙 정렬 단일 컬럼. 결제(F13)와 같은 컨버전 집중 패턴 — 다만 여기는 머무름이 primary, 해지가 destructive.

다크 패턴 회피

해지 버튼은 보더만 있는 destructive 스타일로 시인성 충분히 유지. disabled·축소·숨김 처리 금지

머무름 우선 시각

"계속 사용하기"가 primary fill(머무름 유도). 다만 "해지 진행"도 동등하게 클릭 가능 — 사용자 의사 존중

해지 즉시 효과

자동 갱신 중단은 즉시 적용. 기능 제한은 다음 결제일에 적용한다. 환불은 별도 요청이 있을 때 환불정책 v2 기준으로 산정한다

충전 크레딧 보존

해지해도 충전 크레딧은 만료 없이 유지. 미구독 상태에서도 사용 가능

이탈 사유 수집

익명 통계로만 사용. 자유 의견에 이메일 명시한 경우만 회신. 마케팅 재유치 거부 옵션 제공 (v1.1)

해지 완료 안내

현재 구현: "해지 진행" 클릭 → 확인 모달(선택한 사유 요약, 경고, 돌아가기/해지 확인) → 확인 시 성공 토스트 후 editorial-plan.html로 이동. 완료 화면/메일 발송은 후속

접근 제한

Free 회원이 직접 URL 진입 시 마이 플랜으로 리다이렉트 (해지할 구독 없음)

• 해지 확인 모달은 구현됨. destructive 액션 후 비밀번호 재확인 vs 현재처럼 즉시 처리할지 정책 결정 필요
• 해지 완료 안내는 현재 마이 플랜 이동 + 토스트. 별도 완료 페이지/메일 발송 도입 여부 결정
• 해지 후 재가입 시 동일 플랜·할인 유지 정책
• 연간 구독 중도 환불 — v2 기준 반영. 제공 완료분/사용분/할인 정산/PG 수수료 공제 가능 범위는 운영 전 최종 확정
• 이탈 사유 → 제품팀 dashboard 연결 (v1.2)
• 가격 부담 사유 선택 시 할인 쿠폰 제안 (v2 retention) — 다크 패턴 우려, 신중 검토 필요

프리뷰는 탭으로 전환한다. 상태가 있는 모달은 해시를 분리하되 한 화면에는 하나의 시안만 노출해 검토 길이를 줄인다.

인앱 컨텍스트에서 인증 필요 시 호출. 독립 페이지(다크)와 구조 동일, 탑 내비/푸터 제거 + 닫기 X 우상단 + 라이트 테마.

호출 트리거

랜딩 분석 시작 · 미인증 보고서 진입 · 공유 링크 외부 접속 · 세션 만료

독립 페이지와의 차이

탑 내비 제거 · 푸터 제거 · 워드마크 48px · 다크→라이트 테마

닫기

X · backdrop 클릭 · Esc 모두 허용 (로그인 폼 입력은 짧고 복구 가능하므로)

성공 후

호출 시점의 액션 자동 재개 — 랜딩 업로드 CTA → 로그인 완료 → 업로드 모달 즉시 진입

라이브러리·랜딩에서 업로드 진입 시 호출. 실제 런타임은 ① 원고 선택 → ② 크레딧 확인 → ③ 교정 서브스테이지 5개 → ⑤ 완료로 진행한다. ④ 검증은 정적 시안과 코드 분기는 남아 있으나 현재 정상 플로우에서는 직접 도달하지 않는 참고 상태다.

보고서 공유 링크 생성. 실제 런타임은 디자이너용 before/after 스위처를 노출하지 않고, 같은 모달 안에서 링크 생성 후 링크 박스와 비활성화된 생성 버튼 상태를 보여준다.

상태

생성 전: 공유 링크를 생성합니다 + 링크 생성 CTA. 생성 후: 제목은 유지하고 공유 링크 박스 노출, CTA는 생성됨 disabled로 전환

구조

경고 배너 · 만료 기간 (7일 / 30일 / 무기한) · 원본 다운로드 허용 체크박스 · 생성 후 공유 링크 + 복사 + 공유된 보고서 보기 링크 노출

경고

미공개 원고가 노출됩니다. + 링크를 가진 누구나 보고서를 열람할 수 있습니다. — 실제 런타임 카피 기준

기본값

만료 30일 · 다운로드 허용 off

링크

editorial.kr/shared/x9k2-p4mb-7n3q — 추측 불가 토큰. /shared/:token 라우트

닫기

closeOnBackdrop=false. 취소 버튼 또는 X/Esc로 닫는다. 링크 비활성화, 완료 액션은 현재 런타임에서 제공하지 않는다.

보고서/라이브러리의 다운로드 액션에서 호출. 포함할 제안 상태와 받을 파일을 모달 안에서 직접 선택한다.

제목

보고서를 어떻게 받을까요? · 포함할 제안 상태와 받을 파일을 직접 선택할 수 있습니다.

포함할 제안

모든 제안 포함 체크박스 + 하위 상태 승인, 무시, 미선택. 하위 상태 일부 해제 시 상위 체크박스는 indeterminate

받을 파일

보고서 PDF · 주석 원본 파일. 주석 원본은 DOCX/HWPX/PDF 파일을 받는 설명으로 표기

검증

포함할 제안 상태 또는 받을 파일이 0개이면 경고 토스트. 정상 선택 시 모달 닫힘 + 선택한 조건으로 다운로드를 시작했습니다. 성공 토스트

CTA

취소 ghost · 선택한 파일 받기 primary + 다운로드 아이콘

라이브러리나 외부 진입에서 이미 분석이 진행 중인 작업을 보여주는 독립 진행 상태. 업로드 ③·④의 단계형 진행과 달리, 전체 분석 진행 상황을 한 장으로 요약한다.

상태 표시

워드마크 · 40% 원형 파이 · 회전 카피 4종(문장을 읽고 있습니다 / 맥락을 잡고 있습니다 / 제안을 다듬고 있습니다 / 일관성을 점검하고 있습니다)

단계

구조 · 맞춤법 완료, 어법 active, 문체 · 일관성 pending. role="status" + aria-live="polite"

안내

평균 7분 안에 완료 · 화면을 닫아도 진행 지속 · 완료 시 메일과 알림 안내

CTA

분석 취소 ghost · 라이브러리로 돌아가기 primary

보고서에서 호출. 수치가 과도한 평가가 아닌 관찰 — 편집자의 조감 판단을 도와주는 자료.

구성

실제 런타임 기준: 상단 3개 지표 카드(일관성 지수 86/100 · 평균 문장 길이 24.8자 · 검토 후보 26개) + 탭 3개(용어집 / 문장 길이 / 반복어)

용어집

기본 탭. 작가가 일관되게 사용한 표기 3개: 밀리미터 · 로테르담 · 에디터

문장 길이

5,840개 문장 기준 히스토그램. 25자 전후 구간을 peak로 표시하되 평가는 하지 않는다.

반복어

윤문 검토 후보: 문득 42회 · 어쩐지 31회 · 가만히 24회. 반복 표현 리스트는 현재 구현에 포함된다.

톤

"단행본 평균 대비 짧음" 식 서술 — 평가가 아닌 관찰

CTA

PDF로 받기 (ghost) · 보고서로 돌아가기 (primary)

어휘

"토큰" 금지. 결제·업로드 비용 확인에서는 크레딧으로 통일하고, 원고 길이는 자 단위로 병기한다. "사용량"은 플랜/설정 화면에서만 제한적으로 사용

취소 vs 다음

좌상 ghost "취소"/"이전" · 우하 primary 구체 동사 ("교정 시작" "보고서 열기")

닫기 X

step ③·④ 교정/검증 중에는 X 제거 — 백그라운드로 유도

backdrop

런타임 공통 모달은 기본적으로 backdrop 클릭 닫힘을 허용하되, 공유 생성처럼 위험 확인이 필요한 모달은 closeOnBackdrop=false로 차단. M 갤러리의 닫기/백드롭은 시안 요소

focus

런타임 공통 모달은 첫 인터랙티브에 초기 포커스 + Esc 닫기를 제공. Tab 순환 focus trap과 닫힌 후 트리거 복귀는 후속 구현

백그라운드 이행

교정/검증 모달 이탈 → 현재 구현은 토스트로 업로드 처리는 백그라운드에서 계속됩니다 안내. 상태 변화는 우상단 알림 패널에 누적되며, 진행 인디케이터와 완료 알림 자동 열림은 후속 구현

모바일

768 미만: backdrop 하단 정렬 (sheet) · 최대 높이 92vh · 내부 스크롤

• 업로드 ② 부족 시 플랜 업그레이드와 크레딧 구매가 각각 체크아웃의 어떤 요약 상태로 진입할지 URL 파라미터 정책 확정
• 편집장 선 결재 한도 · 대표 결재 필요 시 UX (결제 승인 대기 모드)
• 플랜/프레이밍 명칭 (Basic / Pro)
• 스타일 분석 지표의 과학적 근거 — 어떤 코퍼스와 비교하는지
• 공유 링크 접근자 행동 추적 · 공유자에게 알림 제공
• 모바일 업로드 — 파일 선택 UI