NextTag

NextTag App

Design System

운영 화면에서 실제 사용하는 토큰, 상태와 상호작용을 데이터 연결 없이 확인합니다.

70 components

Foundation

흑백을 primary로 유지하고 색은 성공, 경고, 오류처럼 의미가 있을 때만 사용합니다.

Primary
#171717
Secondary
#5c6169
Surface
#f5f6f7
Hairline
#e1e4e8

QR 운영을 더 명확하게.

도메인과 기능을 한 흐름에서 관리하세요.

기존 화면의 조밀한 운영 정보와 명확한 다음 행동을 같은 위계로 유지합니다.

domainId: 2c69f495-3814-46fe-a5d0-9c17f8b12043

Neutral palette

0
50
100
200
300
400
500
600
700
800
900

Type ramp

페이지 제목 28

섹션 제목 24

카드 제목 18

본문은 15px과 1.5 줄 높이를 사용해요.

보조 설명 12

Spacing

1
2
3
4
5
6
8
10
12
16
20

Interaction patterns

역할 기반 흑백 토큰과 명시적인 상태로 선택, 진행, 결과와 오버레이를 표현합니다.

선택과 값 조절

색만으로 상태를 구분하지 않고 native 상태와 텍스트를 함께 유지합니다.

3
QR 발급 진행률 64%

목록과 점진적 공개

목록 행 전체를 읽기 단위로 만들고 세부 정보는 필요할 때 펼칩니다.

QR ili.bz Cloud · 서울 연결됨
T nexttag.test Test · 로컬 준비 중
연결 정보 서버와 마지막 동기화 상태

API 서버는 정상이며 마지막 동기화는 2분 전에 끝났어요.

문제가 있나요?

연결을 다시 확인하거나 운영 담당자에게 서버 상태를 문의해 주세요.

페이지 상태와 결과

페이지 수준 안내와 작업 종료 상태의 위계를 분리합니다.

API 서버 연결을 확인해 주세요.
마지막 확인에 실패했어요. 서버 상태를 확인한 뒤 다시 시도해 주세요.

도메인을 만들었어요.

이제 도메인에 사용할 기능을 설정할 수 있어요.

맥락 메뉴와 모바일 시트

짧은 선택은 trigger 가까이, 중요한 모바일 보조 흐름은 시트에 표시합니다.

작업 선택
선택 전

화면 최하단의 강제 진행 행동에는 하나의 CTA만 사용합니다.

서버를 연결할까요?

연결 전에 선택한 서버 정보를 확인해 주세요.

API 서울 Cloud 서버 ap-northeast-2 정상

Operational patterns

도메인과 서버 운영에 필요한 읽기, 복사, 일괄 작업과 로딩 상태를 같은 규칙으로 제공합니다.

좌상단 네임스페이스

서비스 로고와 선택 도메인 이름을 같은 위치·크기에서 치환합니다.

Action 상태와 크기

일반 action은 크기별 radius를 사용하고 pill은 chip과 상태 표시에만 사용합니다.

계층 탐색과 상세 정보

운영 객체의 위치와 읽기 전용 속성을 card 중첩 없이 표현합니다.

도메인 이름
ili.bz
서버 유형
Cloud
리전
ap-northeast-2
상태
연결됨
Domain ID
2c69f495-3814-46fe-a5d0-9c17f8b12043
마지막 동기화
2분 전

복사와 도움말

식별자는 읽기 쉽게 표시하고 복사 결과를 스크린리더에도 알려 줍니다.

API endpoint
https://api.ili.bz/v1/scan
서버 audience

로딩 skeleton과 일괄 작업

페이지·폼·카드의 실제 레이아웃 윤곽을 유지하고 선택 작업은 한 곳에 모읍니다.

3개 선택됨

Actions

한 화면의 primary는 하나만 두고 나머지 행동의 위계를 낮춥니다.

Link button

Forms

label, 설명, 오류와 native form 값을 하나의 접근성 계약으로 묶습니다.

사용자가 구분할 수 있는 이름

비워 두거나 이메일 형식이 아니면 입력란 아래에 안내합니다.

서버 형태

저수준 wrapper specimen

폼 제목

폼에 대한 설명

Feedback

상태 수명에 따라 inline, toast, badge 또는 state view를 선택합니다.

서비스 연결이 완료되었습니다.
도메인 설정을 확인하세요.
기능을 활성화하기 전에 서버 연결 상태를 점검해야 합니다.
Draft Connected Pending Failed 정상 운영
도메인을 불러오는 중
등록된 도메인이 없습니다.

새 도메인을 만들어 시작하세요.

Structure

페이지, 패널과 단계를 기존 App의 카드 계층과 간격으로 구분합니다.

현재 탭: components
  1. 계정 연결
  2. 도메인 선택
  3. 기능 구성
  4. 배포

Dark inversion

브랜드 introduction처럼 명확한 대비가 필요한 큰 panel에만 사용합니다.

도메인 정보

Escape로 닫고 trigger로 focus가 돌아갑니다.

도메인을 삭제할까요?

이 작업은 되돌릴 수 없습니다.

Admin patterns

기존 qr.service.auth 운영 화면에서 반복 사용한 shell, 지표, panel과 기록 표현입니다.

통합관리 대시보드

좌측 관리 메뉴, 핵심 지표와 작업 기록 panel을 한 화면에서 조합합니다.

BrandAdminShell · integrated-management.vue
Integrated management

통합관리

접속 중 작업자 0
활성 클라이언트 0
금일 팔레타이징 0 오늘 기록 없음
최근 QR 활성 로그 8

이동/적재 기록

최근 변경된 팔레트와 박스를 표시합니다.

입고 팔레트 CB-235

박스 4개 · 제품 2,688개

이동 팔레트 CB-368

물류센터 A → B

입출고 기록

최근 처리된 수량을 표시합니다.

입고 팔레트 CB-235

제품 2,688개 · 박스 4개

출고 팔레트 CB-367

제품 0개 · 박스 0개

필터와 데이터 표

기간, 검색, 상태 전환과 서버 페이지네이션을 조밀한 운영 도구막대로 제공합니다.

ProductQrLinkTable · ProductReachMap
today 조회 결과 모두 3개
today 조회 결과
제품국가상태접속
팔레트 CB-235대한민국입고125
팔레트 CB-368미국이동44
팔레트 CB-367일본출고18

Content patterns

에셋, 국가별 상세, HTML 미리보기처럼 콘텐츠 중심 관리 화면을 구성합니다.

에셋 라이브러리

이미지와 일반 파일을 같은 카드 계약으로 표시하고 행동은 snippet으로 주입합니다.

assets.vue
asset-product-centella.jpg

image/jpeg · 40.3 KB · 2026. 09. 20.

brand-guideline.pdf

application/pdf · 2.1 MB · 2026. 09. 20.

Master-detail과 도달 현황

왼쪽 순위·국가 목록과 오른쪽 상세 시각화를 독립 slot으로 구성합니다.

ProductReachMap · PageTemplateEditModal
대한민국 · 125회미국 · 44회일본 · 18회독일 · 9회브라질 · 6회

대한민국에서 125회 확인됐어요.

국가별 페이지 연결 설정

기본 페이지와 국가별 예외 규칙을 연결합니다. 페이지 콘텐츠 편집이나 미리보기를 담당하지 않습니다.

product page country targets

국가별 페이지 연결 설정

접속 국가에 따라 연결할 페이지를 지정해요. 조건이 없으면 기본 페이지가 열려요.

기본 연결

국가별 규칙이 없거나 비활성화된 경우 사용하는 페이지예요.

2개 국가 규칙 사용 중 4개 페이지 중 연결 대상을 선택할 수 있어요.

대상 조건 편집

국가·접속 이력·생성일 조건을 route 업무 로직과 분리한 입력 컴포넌트입니다.

TargetConditionEditor
적용 국가 대상

이벤트 또는 정책을 적용할 국가를 선택합니다.

국가 선택

검색하거나 목록에서 조회할 국가를 선택해요.

대한민국, 일본
대상 국가 접속 이력 횟수

대상 국가에서 접속한 고유 IP 이력이 특정 횟수 이상인 경우에만 적용합니다.

회 이상
링크 고유 인식 횟수

서로 다른 접속 IP 기준으로 특정 횟수 이상 인식된 경우에만 적용합니다.

회 이상
묶음 생성일자

생성일 기준으로 이상/이하 범위를 지정합니다.

조건 요약
  • 적용 국가 KR, JP
  • 링크 고유 인식 3회 이상

QR 코드 상세

QR 이미지, 원본 값, 복사와 다운로드 행동을 하나의 표시 계약으로 제공합니다.

QrCodeImageModal
제품 QR · CEN-100 이미지

제품 QR · CEN-100

묶음 NEXTTAG-2026-09 · 인덱스 184

QR 값
ili.bz/r/01J9YQK3S8N5GZ

물류 관계 변경과 이력

현재 연결과 저장 전 변경 예정 상태를 색으로 구분하고, 완료된 물류 관계 이력을 시간순으로 표시합니다.

BrandScannerRelationshipTree · scanner relationship history
현재 소속 입고 예정 이동 예정 출고 예정
  1. 위치 물류센터 A

    팔레트 1개

    현재 소속
  2. 팔레트 CB-235

    박스 2개

    물류센터 B로 이동 예정
  3. 박스 CB-235-01

    제품 1,344개

    현재 소속
  4. 박스 CB-235-02

    제품 1,344개

    출고 예정
  5. 박스 CB-410-01

    제품 720개

    입고 예정
입고 팔레트 CB-235 입고

박스 2개 · 제품 2,688개

연결 없음 물류센터 A
작업자 Kim
입고 박스 CB-235-02 연결
연결 없음 팔레트 CB-235
작업자 Lee
이동 팔레트 위치 이동
검수 구역 물류센터 A
관리자 Park
출고 박스 CB-190-04 연결 해제
팔레트 CB-190 연결 없음
작업자 Kim

Complete component stories

catalog에 등록된 컴포넌트 중 다른 section에서 다루지 않는 항목을 실제 상태로 렌더링합니다.

국가 다중 선택

전체 국가 또는 선택한 국가 집합을 검색 가능한 dialog에서 편집합니다.

CountryMultiSelect
적용 국가

이 정책을 적용할 국가를 선택해요.

국가 선택

검색하거나 목록에서 조회할 국가를 선택해요.

대한민국, 미국

미디어 선택 카드

물류 관계와 분리된 이미지 기반 선택 항목의 선택·비선택·비활성 상태입니다.

MediaCard

페이지 콘텐츠 폼과 미리보기

국가별 페이지 연결과 별개로 HTML·redirect 콘텐츠와 sandbox 결과를 시험합니다.

PageTemplateForm · PreviewDevice

페이지 콘텐츠

HTML 또는 URL 콘텐츠를 입력합니다.

제공 방식
페이지 HTML

HTML 스크립트에서 $qr로 접근 가능한 정보

  • $qr.productId: 검증된 현재 제품 ID
  • $qr.productRevision: 현재 제품 리비전
  • $qr.batchId: 현재 묶음 번호
  • $qr.index: 묶음 내 QR 번호
  • $qr.canonicalUrl: 검증된 원본 제품 페이지 URL

HTML 스크립트에서 $form으로 사용할 수 있는 고객정보 수집 함수

  • await $form.list(): 현재 QR에서 사용할 수 있는 고객정보 수집 폼 목록을 조회합니다.
  • $form.open(): 현재 제품에서 사용할 수 있는 수집 폼 화면을 엽니다.
  • await $form.submit(formId, values, consentAccepted): 동의 여부와 필드 값 객체로 고객정보를 제출합니다.

HTML 스크립트에서 $report로 사용할 수 있는 신고 함수

  • await $report[ruleId]({reason, note}): 이상 조건 ID와 신고 사유·메모로 현재 QR을 신고합니다.
  • reason: packaging_mismatch, product_mismatch, invalid_seller, duplicate_qr, other 중 하나입니다.

공유 미리보기 설정

공유, 크롤러와 미리보기 표시 정보를 설정해요.

페이지 콘텐츠 편집 dialog

variant가 있는 wide 편집 dialog의 열기·저장·초기화 흐름을 시험합니다.

PageTemplateEditor

하단 스낵바 Toast

앱 하단 중앙에서 성공·경고·오류 tone, 자동 닫기와 queue 동작을 시험합니다.

Toast · ToastViewport
기본 알림

일반적인 작업 상태를 알려요.

저장 완료

변경 사항을 저장했어요.

확인 필요

계속하기 전에 입력값을 확인하세요.

가품 페이지 편집

가품으로 판정된 링크에 표시할 안내 페이지를 설정합니다.

가품 페이지 설정

QR 접속 뒤 표시할 페이지를 설정해요.

제공 방식
가품 페이지 HTML

HTML 스크립트에서 $qr로 접근 가능한 정보

  • $qr.productId: 검증된 현재 제품 ID
  • $qr.productRevision: 현재 제품 리비전
  • $qr.batchId: 현재 묶음 번호
  • $qr.index: 묶음 내 QR 번호
  • $qr.canonicalUrl: 검증된 원본 제품 페이지 URL

HTML 스크립트에서 $form으로 사용할 수 있는 고객정보 수집 함수

  • await $form.list(): 현재 QR에서 사용할 수 있는 고객정보 수집 폼 목록을 조회합니다.
  • $form.open(): 현재 제품에서 사용할 수 있는 수집 폼 화면을 엽니다.
  • await $form.submit(formId, values, consentAccepted): 동의 여부와 필드 값 객체로 고객정보를 제출합니다.

HTML 스크립트에서 $report로 사용할 수 있는 신고 함수

  • await $report[ruleId]({reason, note}): 이상 조건 ID와 신고 사유·메모로 현재 QR을 신고합니다.
  • reason: packaging_mismatch, product_mismatch, invalid_seller, duplicate_qr, other 중 하나입니다.

공유 미리보기 설정

공유, 크롤러와 미리보기 표시 정보를 설정해요.

Component catalog

공용 index에서 노출하고 이 페이지가 추적하는 전체 목록입니다.

AccordionActivityItemAdminPageShellAppHeaderAssetCardBadgeBreadcrumbBottomCTABottomSheetBulkActionBarButtonCheckboxChipConfirmDialogConnectionPageEditorCopyFieldCountryMultiSelectDashboardPanelDataTableDialogDescriptionListDomainCardFileFieldFilterToolbarFormCardFormFieldHierarchyTreeIconButtonInlineAlertListRowLoadingSkeletonLogisticsHistoryMasterDetailMediaCardMetricCardMenuNamespaceBrandPageBannerPageHeaderPageTemplateEditorPageTemplateFormPaginationPreviewDeviceProgressBarProfileCardQuantityPickerQrCodePanelRadioCardRelationshipStatusResultSectionSearchableSelectSegmentedControlSelectFieldSideNavigationSkeletonSpinnerSpecimenStateViewStatusIndicatorStepperSurfaceSwitchTabsTargetConditionEditorTextAreaFieldTextFieldToastToastViewportTooltipWorldReachMap