App Patterns
생산성 도구
제품의 생산성 도구 UI를 그대로 재현했습니다 — QR 스튜디오 · 벌크 업로드 큐 · 통합/애드온 그리드 · 레시피 플레이북. 전부 입력|미리보기 2열 · 다크 표면 · 폴링 상태 텍스트 동반. 정적 데모 — 동작 JS 없음.
QR 도구
app/links/qr · share — 듀얼 컬럼. 좌측 내용·옵션, 우측 미리보기 + 색·도트·모서리 셀렉트 + 하단 문구 + PNG/SVG. 색은 type=color 인풋, 다운로드는 qr-code-styling.
내용
유형을 바꾸면 입력 필드가 달라집니다 — WiFi·문자·vCard·좌표 등. 스마트링크 QR은 각 링크 공유 탭에서 생성됩니다.
QR
.field-row · input[type=color] · select(도트/모서리/ECC) · .actions-row PNG/SVG · 미리보기 QR = 정적 SVG 플레이스홀더
벌크 업로드 큐
app/newsroom_bulk · .nrb-* — .nrb-bar/.nrb-fill 진행 바(그린 그라데이션) + 상태 티커(완료/총/실패) + .nrb-ecard 인라인 편집 카드. 진행은 폴링 텍스트 동반.
번역 진행 상황
기사 목록이 페이지를 열어두면 더 빠르게 처리됩니다. 탭을 닫아도 백그라운드(cron)에서 자동으로 이어서 번역합니다.
새 앨범 「Aurora」 발매 안내
글로벌 팬미팅 투어 일정 공개
신곡 「Supernova」 뮤직비디오 티저
.nrb-bar / .nrb-fill(64%) · 상태 티커 done/total/error · .nrb-ecard 인라인 필드 + 이미지 버튼
통합 · 애드온 카드 그리드
app/addon · .ig-* — .ig-card(아이콘 타일 + 이름 + 설명 + 상태 .ig-dot + .ig-sw 토글 / .ig-badge on·off·soon). 이모지 타일은 .ig-ic SVG·모노그램으로 대체.
.ig-grid · .ig-ic(SVG/2자 모노그램) · .ig-sw 토글(knob) · .ig-dot on/off/soon/set · .ig-badge on/soon
레시피 · 플레이북
app/ads · .pb-* / .cm-conn — sticky .pb-side 필터(검색 + .pb-fgroup/.pb-f) | .pb-grid/.pb-card 그라데이션 카드 + .cm-conn/.cm-cc 연결 상태. 모달은 .pb-dialog 인라인으로 표시.
스마트링크 방문자
스마트링크를 본 모든 팬을 다시 공략하는 따뜻한 오디언스.
실제로는 .pb-modal backdrop + .pb-dialog 모달로 떠오릅니다.
.pb-side sticky 필터 · .pb-card 그라데이션 + .pb-chan/.pb-srcs · .cm-conn/.cm-cc(.ok/.no) · .pb-modal/.pb-dialog/.pb-x
사용 규칙
- · 도구는 입력 | 미리보기 2열 — QR·생성기 모두 같은 구조
- · 진행 바엔 항상
폴링 상태 텍스트동반 (완료/총/실패 · 처리 중…) - · 카드 그리드 상태는
.ig-dot색으로 일관 (on/off/soon/set) - · 모달은
backdrop + x— 닫기 버튼 항상 우상단
- · 실파일·실연동 토큰을 가이드/데모에 노출
- · 이모지 아이콘 — 무조건
icon()SVG·2자 모노그램 - · 라이트 배경 위 도구 컴포넌트 배치 (앱은 다크 전용)
- · 진행 바만 두고 상태 텍스트 생략
source: app/links/share·qr·newsroom_bulk·addon·ads — 샘플 데이터