LinkBuilder

Design System v1.0

UTM · AppsFlyer OneLink Builder

LinkBuilder 디자인 가이드

마케팅 링크를 안전하고 정확하게 생성하는 SaaS를 위한 디자인 시스템입니다. 심플하고 절제된 레이아웃, 신뢰감을 주는 블루 팔레트, 그리고 Pretendard GOV 타이포그래피를 기반으로 합니다. 순수 CSS로 구현되어 별도 빌드가 필요 없으며, 폰트는 jsDelivr CDN으로 불러옵니다.

Foundation

디자인의 기본 원칙과 토큰입니다.

Simple & Clear

여백을 넉넉히 두고 요소를 최소화합니다. 링크 생성이라는 핵심 작업에 집중하도록 시각적 잡음을 줄입니다.

Trustworthy

블루 중심의 팔레트와 명확한 상태 피드백으로 데이터 정확성과 전문성에 대한 신뢰를 전달합니다.

Consistent

4px 배수 간격, 통일된 radius·shadow 토큰으로 모든 화면에서 일관된 리듬을 유지합니다.

Radius

--r-sm · 6px
--r-md · 8px
--r-card · 14px
--r-full · pill

Shadow

--sh-card
--sh-float
--sh-focus

Spacing (4px 배수)

8px
16px
24px
32px

Color Palette

브랜드 컬러 + 중립 Slate + 시맨틱 컬러. 우측 패널에서 라이트/다크 테마와 SaaS 프리셋·컬러피커(신뢰 블루)로 전체 UI를 미리볼 수 있습니다.

Brand · --brand-600 Primary

50

100

200

300

400

500

600

700

800

900

950

Neutral · --ink (Slate)

50

100

200

300

400

500

600

700

800

900

Semantic

Success

#059669

Warning

#D97706

Danger

#DC2626

Info

#0284C7

Typography

본문·UI 전반에 Pretendard GOV Variable, 링크/파라미터 코드 표기에는 monospace.

Display · 36/800

.text-display

Heading 1 · 24/700

.text-h1

Heading 2 · 18/600

.text-h2

Body · 16/400 — UTM 파라미터를 입력하고 즉시 링크를 생성합니다.

.text-body

Small · 14/400 — 보조 설명 텍스트에 사용합니다.

.text-sm

Caption · 12/400 — 헬퍼/메타 정보.

.text-xs
https://app.appsflyer.com/id123?pid=google&c=summer_sale
.mono / .codeblock + .code-copy · 생성된 링크·파라미터

Buttons

Variant · Size · State. 기본 높이 40px, radius 8px.

Variants

Sizes

States

Form Controls

모든 입력 요소 — Input · Textarea · Select · Checkbox · Radio · Toggle · Search · File.

Text Input

utm_campaign 값으로 사용됩니다.

https://

올바른 URL 형식이 아닙니다.

Search · Textarea · Select · File

  • google / cpc
  • facebook / paid_social
  • naver / sa
  • kakao / display
  • instagram / paid_social
  • youtube / video
  • Shopping App — id6446901002
  • Travel App — com.example.travel
  • Food Delivery — id1234567890
  • Finance App — com.example.finance
  • Fitness Tracker — id9876543210
  • Puzzle Game — com.example.game
  • News Reader — id5556667778
  • Music Streaming — com.example.music
  • google
  • facebook
  • naver
  • kakao
  • instagram
  • youtube
  • tiktok
  • x (twitter)

선택 항목은 칩으로 표시(× 로 제거), hidden 값은 콤마로 결합됩니다.

Checkbox

Radio

Toggle Switch

Segmented Control

Date Picker (Air Datepicker · 브랜드 테마 · 공휴일 표시)

캠페인 시작일 등 단일 날짜 입력.

히스토리 조회·리포트 기간 필터에 사용.

Links, Badges & Feedback

텍스트 링크, 상태 배지, 알림 배너.

Links

기본 텍스트 링크

밑줄 강조 링크

문서 열기

비활성 링크

Badges / Tags

UTM ✓ 검증됨 경고 오류 Draft

Progress (대량 생성 진행 표시)

링크 생성 중…62%
완료100%
일부 실패45%

불확정 (진행률 미상)

Small · 4px

Large · 12px

안내

파라미터 매핑 규칙은 프로젝트 설정에서 미리 정의할 수 있습니다.

성공

120개의 링크가 성공적으로 생성되었습니다.

오류

3번째 행의 URL에 필수 파라미터 pid가 누락되었습니다.

Tabs, Tooltip & Pagination

콘텐츠 전환 탭, 보조 설명 툴팁, 목록/히스토리용 페이지네이션.

Tabs (언더라인 · 패널 전환, ← → 키 지원)

GA4에서 추적 가능한 UTM 파라미터로 링크를 생성합니다. Source·Medium·Campaign을 입력하세요.

AppsFlyer OneLink(원링크)를 생성합니다. 딥링크·리다이렉트 옵션을 설정할 수 있습니다.

CSV/Excel 업로드로 대량 링크를 한 번에 생성합니다.

최근 생성한 링크 기록을 검색·재사용합니다.

Tooltip (hover / 키보드 focus)

요소에 class="tooltip" + data-tooltip="...". 방향은 tooltip-bottom/right/left.

Pagination

숫자 버튼 + 맨앞/이전/다음/맨뒤 이동, 현재 위치는 현재/총로 축약 표시.

Listbox

계층 선택(캐스케이딩) · 검색 · 단일/다중 선택 리스트 패널. 좁은 폭에서 옵션을 항상 노출하고 드릴다운(매체 › 캠페인 › 광고그룹 › 소재)할 때 사용합니다. 여러 개를 .listbox-grid로 나열하면 왼쪽 선택이 오른쪽 열을 채우는 캐스케이딩 구성이 됩니다.

매체 * 2개
  • YouTube — Google Ads
  • Instagram — Meta
캠페인 5개
  • summer_sale_2026
  • brand_always_on
  • retargeting_q3 — YouTube
광고그룹 · 비우면 전체
  • 로딩 중
소재
  • 캠페인을 먼저 선택하세요

Tree

계층 구조를 펼침/접힘으로 탐색. 폴더/리프 노드, 선택 하이라이트, 가이드 라인(.tree-lines), 체크박스형(.tree.checkable)을 지원합니다. 펼침·선택은 앱 JS로 클래스 토글해 연결합니다.

  • 2026 여름 캠페인 12
    • YouTube 8
      • 15초 세로 소재
      • 15초 와이드 소재
  • 전체 매체
    • YouTube
    • Instagram
    • TikTok

Summary Cards

대시보드 상단 지표 요약 카드 — 라벨·값·증감 트렌드.

총 생성 링크
12,480
12.5% 지난달 대비
이번 달 클릭
48,209
8.2% 지난달 대비
검증 완료율
96.4%
1.1% 지난달 대비
활성 캠페인
24
변동 없음 지난달 대비

Table

헤더 고정(sticky) 테이블 — 히스토리·대량생성 결과 목록용. 스크롤해도 헤더가 상단에 유지됩니다.

생성 히스토리

총 24건
생성일 유형 Campaign 링크 상태 클릭 액션
2026-07-21 UTM summer_sale_2026 https://ex.com/?utm_source=google&utm_medium=cpc ✓ 검증됨 1,204
2026-07-20 OneLink app_install_kr https://app.appsflyer.com/id123?pid=google&c=install ✓ 검증됨 876
2026-07-19 UTM newsletter_july https://ex.com/?utm_source=newsletter&utm_medium=email 대기 0
2026-07-18 UTM retargeting_meta https://ex.com/?utm_source=facebook&utm_medium=paid_social 오류 342
2026-07-17 OneLink event_signup https://app.appsflyer.com/id456?pid=naver&c=event ✓ 검증됨 2,051
2026-07-16 UTM blog_post_seo https://ex.com/?utm_source=blog&utm_medium=organic ✓ 검증됨 158
2026-07-15 OneLink push_reengage https://app.appsflyer.com/id789?pid=kakao&c=push ✓ 검증됨 640
2026-07-14 UTM promo_coupon https://ex.com/?utm_source=sms&utm_medium=message ✓ 검증됨 993

헤더 고정: .table-wrap(max-height) + thead th { position: sticky }. 정렬: data-sortable + th[data-sort] 클릭 시 오름/내림 전환.

Composition Example

위 컴포넌트를 조합한 실제 링크 생성 카드 예시.

UTM 링크 생성

https://example.com/landing?utm_source=google&utm_medium=cpc&utm_campaign=summer_sale_2026