NARU / DESIGN

종이배

나루의 디자인 언어예요. 로고의 픽셀 종이배에서 출발했어요. 먹색 선, 종이 바탕, 깃발 파랑. 각진 모서리에 흐림 없는 그림자, 그리고 주소·숫자·아이디처럼 기계가 읽는 글자는 고정폭 글꼴로 써요.

원칙

  1. 01

    선은 먹, 면은 종이

    테두리는 2px 먹색 하나. 흐린 그림자, 둥근 모서리, 카드 속 카드는 쓰지 않아요. 가는 1px 선은 목록을 나눌 때만.

  2. 02

    색은 깃발 하나

    파랑은 누르거나 고를 수 있는 것에만 써요. 노랑은 형광펜처럼 화면에 하나, 템플릿 표시나 강조에.

  3. 03

    주인공은 사용자 사이트

    나루의 화면은 조용히 물러서고, 사용자들의 알록달록한 홈페이지가 가장 먼저 보이게 해요.

색

모든 색은 globals.css의 토큰이에요. 컴포넌트에 gray-600, green-100 같은 날색을 직접 쓰지 말고 토큰을 쓰세요. 밝은 테마와 어두운 테마는 같은 이름에 다른 값이 들어 있어요.

토큰밝게어둡게쓰는 곳
ground
--background · bg-background
…
…
페이지 바탕
surface
--card · bg-card
…
…
카드, 내비게이션, 바닥글
ink
--foreground · text-foreground
…
…
본문 글자
ink-2
--muted-foreground · text-muted-foreground
…
…
설명, 메타 정보
line
--line · border-line
…
…
2px 테두리, 단단한 구분선
hairline
--border · border-border
…
…
1px 목록 구분선
flag
--primary · bg-primary
…
…
주 버튼, 선택 표시, 그래프
flag text
--link · text-link
…
…
바탕 위 링크 글자
wash
--accent · bg-accent
…
…
가리킨 항목, 옅은 강조 면
sun
--sun · bg-sun
…
…
형광펜: 템플릿, 제목 밑줄
danger
--destructive · text-destructive
…
…
삭제, 오류
success
--success · text-success
…
…
완료, 해결됨
warning
--warning · text-warning
…
…
주의, 만료 예정

상태 색은 글자로 쓰거나 bg-success/10 처럼 옅게 깔아 써요. 깃발 위 글자는 text-primary-foreground, 바탕 위 링크는 대비가 더 높은 text-link예요.

글꼴

IBM Plex Sans KR과 IBM Plex Mono. 한 가족이라 섞어 써도 획이 맞아요. 고정폭은 주소, 숫자, 아이디, 코드처럼 라틴 글자로 된 기계의 말에만 써요. 한글은 낱말이든 단추든 늘 Sans로.

당신의 공간이 되는Display · 44–68 / 700 / -0.035em
방금 고쳐진 사이트들H2 · text-3xl / 700
게시판 안내H3 · text-xl / 700
HTML 파일 몇 개면 충분해요.Body · text-base / 400 / 1.7
설명과 메타 정보는 한 단계 작게.Small · text-sm / ink-2
seaunion.naru.pub · 12,251Mono · font-mono / 500

본문은 word-break: keep-all로 낱말 사이에서만 줄을 바꿔요. 숫자는 tabular-nums로 자릿수를 맞춰요.

모양

각진 모서리

--radius는 0. rounded-full은 점과 아바타에만.

rounded-none

누르는 면

흐림 없는 먹색 그림자. 가리키면 떠오르고, 누르면 들어가요.

.press · shadow-hard

떠오르는 카드

링크인 카드는 가리킬 때만 그림자가 생겨요.

.lift

픽셀 물결

나루터의 물. 큰 구획 사이에 한 줄만.

<PixelWave />

브라우저 틀

사용자 사이트는 늘 주소줄과 함께 보여 줘요. 스크린샷이 아직 없으면 muted 면이 자리를 지켜요. <BrowserFrame />

example.naru.pub

형광펜

화면에서 가장 중요한 낱말 하나에만 sun 밑줄을 그어요.

당신의 공간

구성 요소

src/components/ui의 실제 컴포넌트예요. 왼쪽은 밝은 테마, 오른쪽은 어두운 테마.

버튼

ui/button.tsx

태그

ui/badge.tsx · board/KindBadge.tsx
default
광고
link
sun
해결됨
만료 예정
오류
secondary
템플릿
사이트 자랑
질문
잡담
default
광고
link
sun
해결됨
만료 예정
오류
secondary
템플릿
사이트 자랑
질문
잡담

입력

ui/input · textarea · select · checkbox · radio-group
연합우주에 알리기
연합우주에 알리기

카드

ui/card.tsx
템플릿으로 시작하기
누군가 나눈 폴더를 한 번에 적용해요.
제목 없음3회 적용
템플릿으로 시작하기
누군가 나눈 폴더를 한 번에 적용해요.
제목 없음3회 적용

탭

ui/tabs.tsx · 페이지 이동 탭은 tabLinkClass()
탭을 눌러 보세요.
탭을 눌러 보세요.

대화상자와 확인

ui/dialog.tsx · ui/confirm.tsx (useConfirm)

window.confirm() 대신 await confirm({ title, destructive })

window.confirm() 대신 await confirm({ title, destructive })

오른쪽 클릭 메뉴

ui/context-menu.tsx
여기를 오른쪽 클릭
여기를 오른쪽 클릭

쓰는 법

이렇게

  • 테두리는 border-2 border-line, 목록 구분은 border-border
  • 누를 수 있는 채운 버튼에만 .press 그림자
  • 링크인 카드는 .lift, 제목 링크에 after:absolute after:inset-0
  • 주소·숫자·아이디·코드는 font-mono, 한글은 늘 Sans
  • 빈 목록에는 안내 문장과 첫 행동 링크
  • 버튼·입력·선택·탭·대화상자는 늘 components/ui에서
  • 지우기 전 확인은 useConfirm(), destructive: true
  • 새 색이 필요하면 globals.css에 토큰부터, 그다음 이 페이지에

이렇게 말고

  • shadow-lg 같은 흐린 그림자, rounded-lg 같은 둥근 모서리
  • 카드 안에 또 카드, 회색 머리띠를 두른 카드 머리
  • text-gray-600, bg-green-100 같은 날색
  • 한글을 고정폭 글꼴로 (띄어쓰기가 벌어져요)
  • 아이콘 대신 이모지
  • <button>, <select>, window.confirm()을 직접 쓰기
  • 한 화면에 sun 강조 여러 개

고칠 곳을 찾았다면 게시판에 알려 주세요.