⚡ BEYOND WELLNESSTech / Editorial / Brutalism / Dark Studio
스타일 다변화 샘플 쇼케이스 (보더 & 컬러 혁신)
마음건강 힐링풍 일변도를 벗어나, 핀테크 블루, 에디토리얼, 네오 브루탈리즘, 미드나잇 다크 등 4대 장르의 보더 및 컬러 시스템을 한눈에 비교 검토할 수 있습니다.
하이테크 신뢰감#2563EB
1. Modern Tech Fintech
토스 · Linear · Stripe 스타일슬레이트 쿨그레이와 일렉트릭 블루, 초정밀 1px 헤어라인과 절제된 12px 곡률로 구현한 엔지니어링 핀테크 룩
0.5px/1px HairlineElectric BlueSlate SurfaceTabular Nums
지적 에디토리얼#B45309
2. Editorial Warm Minimal
노션 · 킨포크 · 브라운 매거진차분한 린넨 베이지, 딥 차콜 활판 인쇄 타이포그래피, 절취선(Dashed) 보더와 8px 각진 박스의 지적인 감성
Dashed DividersLinen BeigeHigh Contrast Serif/SansMuted Amber
인더스트리얼 힙#FF5722
3. Bold Neo-Brutalism (오렌지)
Figma · Gumroad 힙스터2px 볼드 블랙 솔리드 라인, 3px 하드 드롭 섀도우, 비비드 탠저린 오렌지와 바이올렛의 캐주얼 스트리트 무드
2px Solid Black3px Hard ShadowVivid TangerineHigh Energy
★ 브랜드 브루탈#00C474
4. Neo-Brutalism + 브랜드 그린 (★요청)
다양한 색감 베이스 + 그린 포인트옐로우·페리윙클 등 상황별 멀티 컬러 베이스는 그대로 유지하고, 뱃지와 메인 액션 버튼에만 마인드짐 그린(#00C474)을 포인트로 적용한 균형 잡힌 브루탈리즘
2px Solid Black3.5px Hard ShadowMulti-Color PaletteGreen Point Accent
압도적 몰입감#10B981
5. Deep Studio Midnight
애플 프로 · GitHub Dark · 스튜디오 랩딥 스페이스 블랙/네이비 캔버스, 미세 글래스모피즘 아웃라인(8% White), 네온 백라이트의 전문가용 다크 테크
Specular RimSpace Midnight #0B0F19Neon GlowGlass Backdrop
동일 컴포넌트의 5대 스타일 변신 비교 (Horizontal Side-by-Side)
TECH FINTECH1px Hairline
SYSTEM ACTIVE03:00 SEC
⚡ 01
집중 몰입 세션
흐트러진 주의력을 재정렬합니다
EFFICIENCY+94.2%
WARM EDITORIALDashed Line
Vol. 12 — 마음의 기록3분 읽기
단정한 하루를 여는 아침의 숨
속도를 늦추고 차분하게 오늘의 기준점을 세웁니다.
실천 여정14일차 기록 중
BRUTAL (ORANGE)2px Solid
LEVEL UP!+100 EXP
🔥
스트레스 분쇄기
고민을 파쇄하고 비우기
STREAK7 DAYS 🔥
BRUTAL (BRAND)Point Only
LEVEL UP!+100 EXP
🔥
스트레스 분쇄기
고민을 파쇄하고 비우기
STREAK7 DAYS 🔥
STUDIO MIDNIGHTGlass Rim
LIVE SESSION432Hz Audio
🎧
알파파 딥 이완
수면 뇌파 동기화 세션
AUDIO ENGINESPATIAL 3D
보더(Border) 두께 및 스트로크 패턴 명세
무경계(Borderless) 일변도를 탈피하여 제품 목적에 따라 선택 가능한 5단계 스트로크 시스템입니다.
0.5px Hairline핀테크 정밀 라인
1px Standard표준 카드 경계
2px Bold강조 포커스 라인
1px Dashed에디토리얼 절취선
Glass Specular다크 글래스 림
6. Magazine & E-Book Reader Component System (Left Favorite Button Spec)
즐겨찾기 버튼이 맨 왼쪽 뱃지 및 제목 앞으로 이동된 가독성 강화 스펙
LEFT FAVORITE POSITION
100% REM & GodUI SpecBookmark Button Placed at the Far Left
월간 마음건강 매거진
마인드짐 아이콘 & 카테고리별 디자인 시스템 (ICON SHOWCASE)
단일 아이콘 컴포넌트(RitualGlassIconCard)부터 72개 전체 리추얼 카탈로그까지 한눈에 확인하는 시스템 가이드입니다.
SINGLE ICONS (`RitualGlassIconCard`)
단일 리추얼 아이콘 컴포넌트 (4가지 림 테두리 옵션 & 사이즈)
1) 4가지 림 스타일 (Border Rim Options)
Option 1: Soft Mint
미소 명상1분 · 명상
Option 2: Refined Slate
마음챙김 벨1분 · 소리
Option 3: Ice Frost
스트레스 분쇄2분 · 글쓰기
Option 4: Rainbow Aurora
바디스캔5분 · 이완
2) 사이즈 규격 (sm / md / lg)
sm (3.6rem)미소명상
md (5.0rem 기본)미소명상
lg (6.0rem 대형)미소명상
3) 다크 테마 단일 아이콘 (Dark Glass)
4) 72개 단일 아이콘 그리드 컬렉션73개
아이콘에 마우스를 올리면 회전 광택 모션이 동작합니다
TYPE 1 (Dark Theme)
1. 글래스모피즘 플로팅 카탈로그 (Dark Theme)
Dark Glass
미소 명상
1분
초급
매일
+10
Dark Glass
마음챙김 벨
1분
초급
매일
+10
Dark Glass
시선고정명상
1분
초급
매일
+10
Dark Glass
횡경막 호흡
1분
초급
매일
+10
Dark Glass
망할 확률 계산기
2분
중급
매일
+20
Dark Glass
긍정 만약에
2분
중급
매일
+20
Dark Glass
걱정 유통기한 라벨링
2분
초급
매일
+10
Dark Glass
스트레스 분쇄
2분
초급
매일
+10
Dark Glass
걱정 저금통
2분
중급
매일
+20
Dark Glass
333 나비포옹
1분
초급
매일
+10
Dark Glass
미래 그림일기
3분
중급
매일
+20
Dark Glass
내편일기
5분
고급
한달
+30
Dark Glass
미고사
1분
초급
매일
+10
Dark Glass
자존감 칠판
1분
중급
매일
+20
Dark Glass
공수치 폭풍칭찬
1분
초급
매일
+10
Dark Glass
오늘의 상장
5분
고급
한달
+30
Dark Glass
달의 뒷편 롤링페이퍼
15분
고급
한달
+30
Dark Glass
지우개 테라피
3분
초급
매일
+10
Dark Glass
셀프 하이파이브
1분
초급
매일
+10
Dark Glass
원라인드로잉
2분
고급
한달
+30
Dark Glass
거절 연습장
5분
고급
한달
+30
Dark Glass
투데이 확언
2분
초급
매일
+10
Dark Glass
감정개명
2분
초급
매일
+10
Dark Glass
마음날씨 기록
3분
고급
한달
+30
Dark Glass
Y 7 질문법
5분
중급
매일
+20
Dark Glass
객관화일기
5분
고급
한달
+30
Dark Glass
사실과 견해 분리하기
3분
중급
매일
+20
Dark Glass
불평일기
5분
고급
한달
+30
Dark Glass
긍정해석연습
3분
초급
매일
+10
Dark Glass
스몰 모닝페이지
3분
초급
매일
+10
Dark Glass
어른이 그림일기
10분
고급
한달
+30
Dark Glass
마음필사
3분
고급
한달
+30
Dark Glass
존재소개
5분
고급
한달
+30
Dark Glass
나 사용설명서
10분
고급
한달
+30
Dark Glass
나만의 집그리기
10분
고급
한달
+30
Dark Glass
자기인식 상태점검
5분
중급
매일
+20
Dark Glass
셀프 QnA
3분
중급
매일
+20
Dark Glass
자문자답 글쓰기
5분
고급
한달
+30
Dark Glass
과거분석표
10분
고급
한달
+30
Dark Glass
에너지 가계부
5분
고급
한달
+30
Dark Glass
저자소개 독서법
30분
고급
한달
+30
Dark Glass
모닝 드로잉
1분
초급
매일
+10
Dark Glass
단어 조합 시
5분
중급
매일
+20
Dark Glass
짝꿍소개
10분
초급
매일
+10
Dark Glass
연간 편지 릴레이
15분
고급
한달
+30
Dark Glass
바디스캔
5분
초급
매일
+10
Dark Glass
케렌시아 만들기
5분
중급
매일
+20
Dark Glass
공간사진 101
2분
고급
한달
+30
Dark Glass
마이크로산책
5분
초급
매일
+10
Dark Glass
빈손산책
10분
초급
매일
+10
Dark Glass
오프먼트
5분
중급
매일
+20
Dark Glass
백색소음 테이스팅
3분
초급
매일
+10
Dark Glass
구부정 사감
1분
초급
매일
+10
Dark Glass
일몰수집
3분
고급
한달
+30
Dark Glass
스위치 온 키링
1분
초급
매일
+10
Dark Glass
1분 정리
1분
초급
매일
+10
Dark Glass
셀프호텔링
2분
초급
매일
+10
Dark Glass
한칸 완벽주의
3분
초급
매일
+10
Dark Glass
셀프디제잉
2분
초급
매일
+10
Dark Glass
랜덤독서
3분
초급
매일
+10
Dark Glass
친절 수집장
3분
고급
한달
+30
Dark Glass
소확행 박스
3분
중급
매일
+20
Dark Glass
타인을 위한 기도
2분
초급
매일
+10
Dark Glass
셀프안부 스몰톡
1분
중급
매일
+20
Dark Glass
생즉카
1분
초급
매일
+10
Dark Glass
반려 존재 발견하기
2분
고급
한달
+30
Dark Glass
사일런스 식사
3분
초급
매일
+10
Dark Glass
발바닥인사
1분
초급
매일
+10
Dark Glass
오늘의 감정단어
1분
초급
매일
+10
Dark Glass
오늘의 색깔
1분
초급
매일
+10
Dark Glass
3-2-1 그라운딩
3분
초급
매일
+10
Dark Glass
위시플래너
3분
중급
매일
+20
Dark Glass
시선 맑음
4분
중급
매일
+20
TYPE 2 (Light Theme)
2. 파스텔 웰니스 소프트 그리드 (Light Theme - Option 1, 2, 3, 4 보더 시스템)
Option 1 (무경계)
미소 명상
1분
초급
매일
+10
Option 2 (헤어라인)
마음챙김 벨
1분
초급
매일
+10
Option 3 (파스텔 틴트)
시선고정명상
1분
초급
매일
+10
Option 4 (카테고리 뱃지)
횡경막 호흡
1분
초급
매일
+10
Option 1 (무경계)
망할 확률 계산기
2분
중급
매일
+20
Option 2 (헤어라인)
긍정 만약에
2분
중급
매일
+20
Option 3 (파스텔 틴트)
걱정 유통기한 라벨링
2분
초급
매일
+10
Option 4 (카테고리 뱃지)
스트레스 분쇄
2분
초급
매일
+10
Option 1 (무경계)
걱정 저금통
2분
중급
매일
+20
Option 2 (헤어라인)
333 나비포옹
1분
초급
매일
+10
Option 3 (파스텔 틴트)
미래 그림일기
3분
중급
매일
+20
Option 4 (카테고리 뱃지)
내편일기
5분
고급
한달
+30
Option 1 (무경계)
미고사
1분
초급
매일
+10
Option 2 (헤어라인)
자존감 칠판
1분
중급
매일
+20
Option 3 (파스텔 틴트)
공수치 폭풍칭찬
1분
초급
매일
+10
Option 4 (카테고리 뱃지)
오늘의 상장
5분
고급
한달
+30
Option 1 (무경계)
달의 뒷편 롤링페이퍼
15분
고급
한달
+30
Option 2 (헤어라인)
지우개 테라피
3분
초급
매일
+10
Option 3 (파스텔 틴트)
셀프 하이파이브
1분
초급
매일
+10
Option 4 (카테고리 뱃지)
원라인드로잉
2분
고급
한달
+30
Option 1 (무경계)
거절 연습장
5분
고급
한달
+30
Option 2 (헤어라인)
투데이 확언
2분
초급
매일
+10
Option 3 (파스텔 틴트)
감정개명
2분
초급
매일
+10
Option 4 (카테고리 뱃지)
마음날씨 기록
3분
고급
한달
+30
Option 1 (무경계)
Y 7 질문법
5분
중급
매일
+20
Option 2 (헤어라인)
객관화일기
5분
고급
한달
+30
Option 3 (파스텔 틴트)
사실과 견해 분리하기
3분
중급
매일
+20
Option 4 (카테고리 뱃지)
불평일기
5분
고급
한달
+30
Option 1 (무경계)
긍정해석연습
3분
초급
매일
+10
Option 2 (헤어라인)
스몰 모닝페이지
3분
초급
매일
+10
Option 3 (파스텔 틴트)
어른이 그림일기
10분
고급
한달
+30
Option 4 (카테고리 뱃지)
마음필사
3분
고급
한달
+30
Option 1 (무경계)
존재소개
5분
고급
한달
+30
Option 2 (헤어라인)
나 사용설명서
10분
고급
한달
+30
Option 3 (파스텔 틴트)
나만의 집그리기
10분
고급
한달
+30
Option 4 (카테고리 뱃지)
자기인식 상태점검
5분
중급
매일
+20
Option 1 (무경계)
셀프 QnA
3분
중급
매일
+20
Option 2 (헤어라인)
자문자답 글쓰기
5분
고급
한달
+30
Option 3 (파스텔 틴트)
과거분석표
10분
고급
한달
+30
Option 4 (카테고리 뱃지)
에너지 가계부
5분
고급
한달
+30
Option 1 (무경계)
저자소개 독서법
30분
고급
한달
+30
Option 2 (헤어라인)
모닝 드로잉
1분
초급
매일
+10
Option 3 (파스텔 틴트)
단어 조합 시
5분
중급
매일
+20
Option 4 (카테고리 뱃지)
짝꿍소개
10분
초급
매일
+10
Option 1 (무경계)
연간 편지 릴레이
15분
고급
한달
+30
Option 2 (헤어라인)
바디스캔
5분
초급
매일
+10
Option 3 (파스텔 틴트)
케렌시아 만들기
5분
중급
매일
+20
Option 4 (카테고리 뱃지)
공간사진 101
2분
고급
한달
+30
Option 1 (무경계)
마이크로산책
5분
초급
매일
+10
Option 2 (헤어라인)
빈손산책
10분
초급
매일
+10
Option 3 (파스텔 틴트)
오프먼트
5분
중급
매일
+20
Option 4 (카테고리 뱃지)
백색소음 테이스팅
3분
초급
매일
+10
Option 1 (무경계)
구부정 사감
1분
초급
매일
+10
Option 2 (헤어라인)
일몰수집
3분
고급
한달
+30
Option 3 (파스텔 틴트)
스위치 온 키링
1분
초급
매일
+10
Option 4 (카테고리 뱃지)
1분 정리
1분
초급
매일
+10
Option 1 (무경계)
셀프호텔링
2분
초급
매일
+10
Option 2 (헤어라인)
한칸 완벽주의
3분
초급
매일
+10
Option 3 (파스텔 틴트)
셀프디제잉
2분
초급
매일
+10
Option 4 (카테고리 뱃지)
랜덤독서
3분
초급
매일
+10
Option 1 (무경계)
친절 수집장
3분
고급
한달
+30
Option 2 (헤어라인)
소확행 박스
3분
중급
매일
+20
Option 3 (파스텔 틴트)
타인을 위한 기도
2분
초급
매일
+10
Option 4 (카테고리 뱃지)
셀프안부 스몰톡
1분
중급
매일
+20
Option 1 (무경계)
생즉카
1분
초급
매일
+10
Option 2 (헤어라인)
반려 존재 발견하기
2분
고급
한달
+30
Option 3 (파스텔 틴트)
사일런스 식사
3분
초급
매일
+10
Option 4 (카테고리 뱃지)
발바닥인사
1분
초급
매일
+10
Option 1 (무경계)
오늘의 감정단어
1분
초급
매일
+10
Option 2 (헤어라인)
오늘의 색깔
1분
초급
매일
+10
Option 3 (파스텔 틴트)
3-2-1 그라운딩
3분
초급
매일
+10
Option 4 (카테고리 뱃지)
위시플래너
3분
중급
매일
+20
Option 1 (무경계)
시선 맑음
4분
중급
매일
+20
TYPE 3
3. 배너 & 퀵 체크인 카드 (프로덕션 가로 리추얼 카드 스펙)
스트레스 비우기
미소 명상
1분
초급
매일
+10
스트레스 비우기
마음챙김 벨
1분
초급
매일
+10
스트레스 비우기
시선고정명상
1분
초급
매일
+10
스트레스 비우기
횡경막 호흡
1분
초급
매일
+10
스트레스 비우기
망할 확률 계산기
2분
중급
매일
+20
스트레스 비우기
긍정 만약에
2분
중급
매일
+20
스트레스 비우기
걱정 유통기한 라벨링
2분
초급
매일
+10
스트레스 비우기
스트레스 분쇄
2분
초급
매일
+10
스트레스 비우기
걱정 저금통
2분
중급
매일
+20
스트레스 비우기
333 나비포옹
1분
초급
매일
+10
스트레스 비우기
미래 그림일기
3분
중급
매일
+20
자기자비 명상
내편일기
5분
고급
한달
+30
자기자비 명상
미고사
1분
초급
매일
+10
자기자비 명상
자존감 칠판
1분
중급
매일
+20
자기자비 명상
공수치 폭풍칭찬
1분
초급
매일
+10
자기자비 명상
오늘의 상장
5분
고급
한달
+30
자기자비 명상
달의 뒷편 롤링페이퍼
15분
고급
한달
+30
자기자비 명상
지우개 테라피
3분
초급
매일
+10
자기자비 명상
셀프 하이파이브
1분
초급
매일
+10
자기자비 명상
원라인드로잉
2분
고급
한달
+30
자기자비 명상
거절 연습장
5분
고급
한달
+30
자기자비 명상
투데이 확언
2분
초급
매일
+10
감정 정돈
감정개명
2분
초급
매일
+10
감정 정돈
마음날씨 기록
3분
고급
한달
+30
감정 정돈
Y 7 질문법
5분
중급
매일
+20
감정 정돈
객관화일기
5분
고급
한달
+30
감정 정돈
사실과 견해 분리하기
3분
중급
매일
+20
감정 정돈
불평일기
5분
고급
한달
+30
감정 정돈
긍정해석연습
3분
초급
매일
+10
감정 정돈
스몰 모닝페이지
3분
초급
매일
+10
감정 정돈
어른이 그림일기
10분
고급
한달
+30
감정 정돈
마음필사
3분
고급
한달
+30
몰입과 집중
존재소개
5분
고급
한달
+30
몰입과 집중
나 사용설명서
10분
고급
한달
+30
몰입과 집중
나만의 집그리기
10분
고급
한달
+30
몰입과 집중
자기인식 상태점검
5분
중급
매일
+20
몰입과 집중
셀프 QnA
3분
중급
매일
+20
몰입과 집중
자문자답 글쓰기
5분
고급
한달
+30
몰입과 집중
과거분석표
10분
고급
한달
+30
몰입과 집중
에너지 가계부
5분
고급
한달
+30
몰입과 집중
저자소개 독서법
30분
고급
한달
+30
몰입과 집중
모닝 드로잉
1분
초급
매일
+10
몰입과 집중
단어 조합 시
5분
중급
매일
+20
몰입과 집중
짝꿍소개
10분
초급
매일
+10
몰입과 집중
연간 편지 릴레이
15분
고급
한달
+30
휴식과 충전
바디스캔
5분
초급
매일
+10
휴식과 충전
케렌시아 만들기
5분
중급
매일
+20
휴식과 충전
공간사진 101
2분
고급
한달
+30
휴식과 충전
마이크로산책
5분
초급
매일
+10
휴식과 충전
빈손산책
10분
초급
매일
+10
휴식과 충전
오프먼트
5분
중급
매일
+20
휴식과 충전
백색소음 테이스팅
3분
초급
매일
+10
휴식과 충전
구부정 사감
1분
초급
매일
+10
휴식과 충전
일몰수집
3분
고급
한달
+30
휴식과 충전
스위치 온 키링
1분
초급
매일
+10
휴식과 충전
1분 정리
1분
초급
매일
+10
휴식과 충전
셀프호텔링
2분
초급
매일
+10
휴식과 충전
한칸 완벽주의
3분
초급
매일
+10
휴식과 충전
셀프디제잉
2분
초급
매일
+10
휴식과 충전
랜덤독서
3분
초급
매일
+10
관계와 경계
친절 수집장
3분
고급
한달
+30
관계와 경계
소확행 박스
3분
중급
매일
+20
관계와 경계
타인을 위한 기도
2분
초급
매일
+10
관계와 경계
셀프안부 스몰톡
1분
중급
매일
+20
관계와 경계
생즉카
1분
초급
매일
+10
관계와 경계
반려 존재 발견하기
2분
고급
한달
+30
관계와 경계
사일런스 식사
3분
초급
매일
+10
관계와 경계
발바닥인사
1분
초급
매일
+10
관계와 경계
오늘의 감정단어
1분
초급
매일
+10
관계와 경계
오늘의 색깔
1분
초급
매일
+10
관계와 경계
3-2-1 그라운딩
3분
초급
매일
+10
관계와 경계
위시플래너
3분
중급
매일
+20
몸 챙김
시선 맑음
4분
중급
매일
+20
PROPOSAL 2026Awesome Design Skills Applied
✨ MindGym UI/UX 리뉴얼 제안 (AS-IS vs TO-BE 비교 실시간 샘플)
기존 OKLCH 무테 웰니스 시스템(AS-IS) 대비, 신규 스킬셋(Bento, Claymorphism, Glassmorphism/Pulse, Paper/Doodle, Spacious)을 적용한 실제 비주얼 샘플을 수평 대조하여 직접 체험해보실 수 있습니다.
SAMPLE 1
AS-IS (수직 단순 카드) vs TO-BE (Bento Grid 12컬럼 셀)1. 메인 대시보드 레이아웃 (`bento` 스킬 적용)
🔴 AS-IS (기존 수직 스택)
이달의 나
김민우님 · 14일째 함께하는 중
덤벨 성장 정원
Lv.3 자라나는 싹 · 140/200 EXP
오늘의 추천 리추얼
333 나비포옹 외 2개
🟢 TO-BE (`bento` Grid 셀)
☀️ AM 이달의 나
조마조마하지 않게, 차분한 하루
14일 연속 리추얼 달성 중 🏋️
🪴
Lv.3 싹140/200✨ 오늘의 추천 맞춤 리추얼
1. 333 나비포옹
2. 인지재구성
3. 기분전환산책
SAMPLE 2
AS-IS (평면 2D 칩) vs TO-BE (3D Soft 클레이 터치)2. 데일리 감정 칩 인터랙션 (`claymorphism` 스킬 적용)
🔴 AS-IS (평면 2D 칩)
클릭해도 시각적 깊이감 및 햅틱 피드백이 밋밋함
🟢 TO-BE (`claymorphism` 3D 엠보싱)
직접 아래 칩을 눌러 말랑말랑한 3D 터치감을 느껴보세요!
SAMPLE 3
AS-IS (단색 정적) vs TO-BE (5초 오로라 숨 모션 + 글래스)3. 명상/호흡 리추얼 캔버스 (`glassmorphism` + `pulse`)
🔴 AS-IS (정적 파스텔 단색)
1분 · 시각화 명상
시각적 호흡 연출 없이 고정 화면미소 명상
🟢 TO-BE (`pulse` + `glass`)
미소 명상
들숨에 미소를, 날숨에 긴장을 내려놓습니다.
SAMPLE 4
AS-IS (흰색 인풋 폼) vs TO-BE (아날로그 종이 텍스처)4. 저널링 일기 작성 뷰 (`paper` + `doodle` 스킬 적용)
🔴 AS-IS (일반 웹 Textarea)
🟢 TO-BE (`paper` 아날로그 종이)
📌
📔 오늘의 내편 일기
SAMPLE 5
AS-IS (타이트한 문항) vs TO-BE (넉넉한 에어리 여백)5. KOSS 진단 문항 카드 (`spacious` + `clean` 스킬 적용)
🔴 AS-IS (촘촘한 리스트)
Q1. 나는 업무 중에 근골격계 부담을 받는 작업을 한다.
🟢 TO-BE (`spacious` 넉넉한 에어리)
Q1. 물리환경 영역
나는 업무 중에 근골격계에 부담을 주는 작업(반복 동작, 중량물 취급 등)을 한다.
NEW SAMPLE 6
AS-IS (2D 평면 아이콘) vs TO-BE (3D Soft 클레이 + 햅틱 팅글 바운스)6. 덤벨 보상 아이콘 인터랙션 (`claymorphism` + `pulse` + `expressive` 스킬 적용)
🔴 AS-IS (평면 2D 텍스트/아이콘)
클릭이나 획득 시 동적 피드백이나 보상 감흥이 낮음
🏋️
333 나비포옹 완료
+3 덤벨 획득
🟢 TO-BE (`claymorphism` 3D + `pulse` 바운스)
아래 [덤벨 획득 🏋️] 버튼을 직접 눌러 3D 덤벨의 팅글 피드백을 체험해보세요!
🏋️
333 나비포옹 완료누적: 140 EXP 덤벨
1. Color System & Card Variations (Brand Identity v1.1)
실제 Card 컴포넌트에 즉시 가져와 적용하는 6가지 카드 컬러 베리에이션 및 Neutral Scale 6종 명세
Design Color Ratio System
White 70% (#FFFFFF)
20% (#E9F8F0)
10%
Card Color Variations (6 Types for Card.tsx)
variant="mint"Signature Active
Mint Tint Card
#E9F8F0시그니처 민트 틴트 20% 메인 패널
variant="olive"Ref Image 1:1
Olive Sage Card
#E3EAD8시안1 매칭: 올리브 세이지 파스텔 톤
variant="sky"Ref Image 1:1
Sky Pastel Card
#E4F0F8시안1 매칭: 소프트 파스텔 파랑 톤
variant="yellow"Ref Image 1:1
Cream Yellow Card
#FAF3E0시안2 매칭: 소프트 우유 크림 노랑 톤
variant="rose"Ref Image 1:1
Blush Rose Card
#F7E7E3시안2 매칭: 소프트 코랄 로즈 빨강 톤
variant="lavender"Pastel Suite
Soft Lavender Card
#F1EDF8차분하고 포근한 소프트 라벤더 보라 톤
variant="peach"Pastel Suite
Apricot Peach Card
#FAF0E6따뜻하고 상쾌한 아프리콧 피치 톤
variant="mist"Pastel Suite
Mist Gray-Blue Card
#EAEFF2은은하고 세련된 미스트 블루그레이 톤
variant="sand"Pastel Suite
Warm Sand Card
#F4F3EF편안하고 단정한 샌드 웜그레이 톤
variant="surface"Surface Default
Surface Flat Card
#F9FAFB기본 옅은 회색 오프화이트 평온 패널
variant="grayLight"Surface Match
Neutral Surface Card
#F9FAFBNeutral Scale 1단계: Surface 패널
variant="grayMid"Gray 200 Match
Neutral Gray 200 Card
#EDEFF2Neutral Scale 2단계: Gray 200 디바인더 패널
variant="grayDark"Gray 400 Match
Neutral Gray 400 Card
#B0B8C1Neutral Scale 3단계: Gray 400 차콜 패널
Neutral Scale (6 Color Tokens)
Ink#191F28
주요 헤드라인 & 다크 블랙 타이틀Gray 700#4E5968
서브 헤더 & 본문 서체Gray 500#8B95A1
보조 설명 & 캡션 서체Gray 400#B0B8C1
Placeholder 및 비활성 서체Gray 200#EDEFF2
디바인더 & 테두리 라인Surface#F9FAFB
카드 패널 & 옅은 회색 배경Brand Signature Colors
Signature Green#00C473
bg-[#00C473]
메인 시그니처 엠블럼 & CTA 버튼
Brand Hover#009859
bg-[#009859]
버튼 호버 & 클릭 인터랙션 틴트
Forest#005A34
bg-[#005A34]
다크 그린 강조 서체 & 텍스트
Mint Tint#E9F8F0
bg-[#E9F8F0]
배경 틴트 & 진행중 패널
White#FFFFFF
bg-white border border-[#e8e8e8]
순백색 캔버스 및 카드 스펙
📐 Concentric Border-Radius System Scale
컴포넌트 크기 및 중첩(Nesting) 관계에 따른 동심원 곡률(innerRadius = outerRadius - padding) 표준 명세
Live Concentric Radius DemoOuter 24px (p-4: 16px) ➡️ Inner 8px (24 - 16 = 8px)
Outer Card (R: 24px, Pad: 16px)조화로운 동심원 ✓
Inner Box (R: 8px) = 24px - 16px
Outer Card (R: 24px, Pad: 16px)불일치 곡률 ✕
Inner Box (R: 24px) ➡️ 모서리 틈새 찌그러짐
24px
Extra Large (24px / 1.5rem)
var(--radius-xl) · rounded-3xl · rounded-3xl (p-5)메인 카드 패널 (Card.tsx), 모달 컨테이너, 대형 섹션 래퍼💡 동심원 지침: Outer Container (Padding 16~20px 적용 시 Inner와 동심원 조화)
16px
Large (16px / 1.0rem)
var(--radius-lg) · rounded-2xl · rounded-2xl (py-3.5)Form Input, Select (GodSelect), 중형 버튼, 소형 모듈 카드💡 동심원 지침: Inner Element (Outer 24px - Padding 8px = 16px 곡률 매칭)
12px
Medium (12px / 0.75rem)
var(--radius-md) · rounded-xl · rounded-xl (p-2.5)소형 아이콘 박스, 팝오버 드롭다운 옵션, 서브 버튼💡 동심원 지침: Inner Control (Outer 16px - Padding 4px = 12px 곡률 매칭)
8px
Small (8px / 0.5rem)
var(--radius-sm) · rounded-lg · rounded-lg (p-1.5)체크박스, 소형 태그, 태스크 칩, 마이크로 이모지 박스💡 동심원 지침: Micro Control (Outer 12px - Padding 4px = 8px 곡률 매칭)
4px
Extra Small (4px / 0.25rem)
var(--radius-xs) · rounded · rounded (p-1)마이크로 인디케이터, 툴팁 포인터, 프로그레스 바 팁💡 동심원 지침: Sub-pixel Alignment
9999px
Full / Pill (9999px)
var(--radius-full) · rounded-full · rounded-full (px-3 py-1.5)뱃지 (Badge.tsx), 프로필 아바타, 캡슐 칩, 둥근 아이콘 링💡 동심원 지침: Pill Shape (항상 완벽한 원형/알약 형태 유지)
2. Typography Standard Specification (CSS 전역 타입별 명세)
globals.css에 선언된 6가지 전역 클래스만 부여하면 폰트 크기, 굵기, 행간, 자간(-0.56px)이 전역에서 일괄 반영됩니다.
CSS Global Typography Classes (globals.css 선언 6종 타입)
.txt-title-main1. Display Main Header (메인 헤더)
크기: 1.625rem [430px 모바일 기준 26px / 화면 축소 시 정비례 감축]·굵기: Font Black (900)
나만의 맞춤 마음 근력 리추얼로 일상을 채워보세요
💡 용도: 430px 모바일 기준 26px, 모바일 화면 너비가 줄어들 때 1:1 정비례로 예술처럼 줄어드는 메인 타이틀
.txt-title-section2. Section Header (섹션 타이틀)
크기: 1.375rem [430px 모바일 기준 22px / 화면 축소 시 정비례 감축]·굵기: Font ExtraBold (800)
이달의 마음 진단 리포트 & 금일 추천 마음운동
💡 용도: 모바일 대분류 영역 타이틀, 팝업/드로어 모달 상단 헤더
.txt-title-card3. Card Subtitle (카드 타이틀)
크기: 1.25rem [430px 모바일 기준 20px / 화면 축소 시 정비례 감축]·굵기: Font Bold (700)
아침 3분 마인드풀니스 명상 및 호흡 루틴
💡 용도: 모바일 화면 크기에 비례하여 가독성이 선명해지는 카드 제목
.txt-body-main4. Body Main Text (기본 본문)
크기: 1.125rem [430px 모바일 기준 18px / 화면 축소 시 정비례 감축]·굵기: Font Medium (500)
직장 스트레스 감소와 집중력 향상을 위해 매일 아침 간단한 리추얼을 실천해 보세요. 덤벨 보상이 누적됩니다.
💡 용도: 스마트폰 화면에서 작고 답답하지 않도록 자동 스케일링되는 기본 본문
.txt-caption-main5. Body Sub & Caption (서브 캡션)
크기: 0.9375rem [430px 모바일 기준 15px / 화면 축소 시 정비례 감축]·굵기: Font Light (300)
최근 30일간 진행된 리추얼 일지 데이터를 기반으로 분석 결과가 업데이트되었습니다.
💡 용도: 서브 캡션 설명, 버튼 라벨, 카드 보조 안내 텍스트
.txt-micro-main6. Micro Caption & Code (초소형 뱃지/날짜)
크기: 0.875rem [430px 모바일 기준 14px / 화면 축소 시 정비례 감축]·굵기: Font Bold (700)
REF_ID: KOSS_2026_0817 · TIMESTAMP: 15:50:00
💡 용도: 초소형 뱃지 라벨, 캘린더 날짜 수치, 타임스탬프
6종 전역 타이포그래피 실전 통합 조합 샘플 (Integrated Live Showcase)
.txt-title-mainLv.2 마음운동가
보노보노님, 오늘 하루도 마음의 근육을 키워볼까요? 🧘
.txt-title-sectionSection Header
8월 추천 자율 리추얼 & 스트레스 케어
.txt-title-card
.txt-micro-main (3분)"번아웃 시대, 나를 다독이는 자기자비의 기술"
.txt-body-main
남에게는 한없이 친절하면서 왜 나에게는 엄격할까요? 오늘 하루 지친 내 마음속 다정한 변호인을 깨워보는 심리학 아티클입니다.
.txt-caption-mainREF: MG-2026-0819
💡 가이드: 이 아티클을 읽고 3분 마음일기를 작성하면 덤벨 15개가 즉시 적립됩니다.
Font Spec & Webfont CDN Links
프로젝트 전역 메인 1순위 서체 (pstatic)현재 메인 적용 중 ✓
NanumSquareRound (나눔스퀘어라운드)
부드럽고 둥글둥글한 라운드 곡선 조형미. Light, Regular, Bold, ExtraBold 지원으로 파스텔 톤 웰니스 디자인과 100% 최고의 케미 선사.
CSS `@import` 구문:@import url("https://hangeul.pstatic.net/hangeul_static/css/nanum-square-round.css");
한글 서브 2순위 서체 (pstatic)2순위 보조 폰트
NanumBarunGothicYetHangul (나눔바른고딕옛한글)
네이버 공식 pstatic CDN 제공 정교하고 곧은 한글 서체. 나눔스퀘어라운드와 함께 폴백 서체로 연동.
CSS `@import` 구문:@import url("https://hangeul.pstatic.net/hangeul_static/css/NanumBarunGothicYetHangul.css");
기하학 브랜드 타이틀 서체헤드라인 & 로고용
Gmarket Sans (지마켓 산스)
직관적이고 탄탄한 기하학(Geometric) 구조 서체. '철 덤벨 12회차', '마음운동' 등 위트있고 볼드한 브랜딩 강조.
CSS `@import` 구문:https://cdn.jsdelivr.net/gh/projectnoonnu/noon-2212@1.0/GmarketSansMedium.woff2
감성 웰빙 & 힐링 서체 (Google Fonts)자기자비 & 명상 아티클
Gowun Dodum (고운돋움 / 고운바탕)
부드러운 곡선과 따뜻한 휴머니스틱 서체. 마음 릴랙스, 명상 가이드 아티클 및 '괜찮아요, 내일 해도 돼요' 감성 카드에 최고.
CSS `@import` 구문:https://fonts.googleapis.com/css2?family=Gowun+Dodum&display=swap
영문 모던 & 숫자 타이머 전용 (Google Fonts)타이머 & 숫자에 최고
Plus Jakarta Sans / Outfit
북유럽 스타일 모던 서체. 5:00 focus 타이머, 12회차 엠블럼, `mindgym` 영문 연출 시 최고 수준의 트렌디함 선사.
CSS `@import` 구문:https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@700;800&display=swap
4. Badges, Tags & Emotion Chips (Pastel Tone Suite)
카드 팔레트와 1:1로 매칭되는 10종 파스텔 톤 뱃지(Badge.tsx) 및 인터랙티브 칩 명세
1. Pastel Tone Badges (12 Color Variants)No Border / Soft Fill
Mint Tint 20%Olive SageSky PastelCream YellowBlush RoseSoft LavenderApricot PeachMist Gray-BlueWarm SandForest SolidDark SolidWhite Outline
2. Emotion Intention Chips (
EmotionChip.tsx)Interactive Selection3. Ritual Time Selector Chips (시간 선택 칩)Flat Time Capsule
5. Ritual Component System (`RitualCard`)
RitualCard 공통 컴포넌트 5가지 변형 스펙 샘플 (detailed, compact, icon-only, pure-icon, raw-icon)
1. variant="detailed"메인 추천 카드
차분한 의도 추천 리추얼인기 1위
마음일기 (하루 5분)
5분
중급
한달
+30
매일 5분, 오늘의 감정과 생각을 3줄로 적는 루틴이에요. 자기 인식이 크게 높아집니다.
2. variant="compact"목록/선택형 리스트
아침 마인드풀니스 명상하루 5분 · 초급 · 2주 지속
+15 덤벨
감정 그라운딩 3분하루 5분 · 초급 · 매일 진행
+10 덤벨
3. variant="icon-only"박스 포함 아이콘 칩
4. variant="pure-icon" ✨박스 없는 버튼형 라벨 아이콘
5. variant="raw-icon" ✨카드 대입용 순수 그래픽 (No Hover / No Box / No Text)
hover/박스/텍스트가 완전히 제거된 순수 그래픽으로, 벤토 그리드나 커스텀 카드 내부 요소 대입용입니다.
6. Forms & Input Controls (Standard Input & CheckboxCard)
공통 표준 입력창(Input.tsx), 체크박스 카드(CheckboxCard.tsx), GodUI 드롭다운(GodSelect.tsx) 스펙
16px 모바일 자동 줌 방지 및 포커스 링이 내장되어 있습니다.
매일 아침 푸시 알림 받기설정한 체크인 시간에 상쾌한 알림이 발송됩니다.
주간 마음건강 리포트 구독매주 월요일 지난 주 마음 근력 통계를 요약해 드려요.
7. Dashboard Flat Real UI Components (대시보드 실전 UI 요소 모음)
/dashboard-flat(V1 메인 기준) 및 V2, V3 전용 실전 대시보드 카드/위젯 컴포넌트 모음
[V1 기준] Main Flat Dashboard Cards & Hero Progress
#01. Dumbbell Growth Hero
철 덤벨 · 12회차
마음근육이 자라고 있어요
동 덤벨까지 9회 남았어요
#02. 3-Column Flat Ritual Cards (완료/진행중/미완료)
오프먼트
완료3분
한 칸 완벽주의
서랍 정리10분
빈손산책
폰 없이#03. Banners & Quick Check-in Cards
VOL.11
잠시멈춤
이달의 추천 마인드 스토어마음 컨디션 체크인
30초[V2 Unique Components] Compact 1-Column Vertical List Elements
#04. V2 Headline Greeting Header혜지님, 오늘의 마음운동
혜지님, 오늘의 마음운동
시작해볼까요?
철 덤벨 12회차다음 등급까지 9회
#05. V2 Compact 1-Column List Chips
오프먼트 완료
완료 ✓한 칸 완벽주의
3분 실행[V3 Unique Components] Large Hero Recommended Focus & Self-Compassion Cards
#06. V3 5:00 Focus Timer Hero Recommended Card
5:00
오늘의 추천: 5분 마음 일기
생각을 정리하고 마음의 그릇을 비우는 시간
#07. V3 Self-Compassion Reassurance Card
오늘 바쁘신가요?
"괜찮아요, 내일 해도 돼요. 나를 질책하지 않는 것도 마음 운동입니다."
자기자비 쉼표내일 다시 알림
7. Flat Dashboard Template Architecture (공통 대시보드 레이아웃)
공통 컴포넌트(RitualCard, Badge, BrandLogo) 조립 레이아웃 스펙 3종
3열 플랫 카드형
V1. 3-Column Grid Flat Dashboard
오프먼트, 한 칸 완벽주의, 빈손 산책을 3열 분할 그리드로 직관 배치한 현대적 플랫 대시보드 스펙
1열 컴팩트 리스트형
V2. Compact 1-Column List Flat Dashboard
헤드라인 메시지 + 완료 상태 뱃지 및 세로형 1열 칩 카드 리스트 기반 고밀도 대시보드 스펙
대형 히어로 집중형
V3. Large Hero Recommended Focus Flat Dashboard
5분 타이머 대형 웰컴 히어로 카드 중심 집중 케어형 2열 서브 리추얼 대시보드 스펙
7. Hero Box with Aurora Mouse Hover Effect (오로라 호버 히어로 박스)
마우스 커서 이동에 따라 다채로운 에메랄드/시안/인디고 오로라 오라 및 스포트라이트 글로우가 60fps로 실시간 반응하는 Hero Card 스펙
Variant A. Spotlight Aurora Cursor Tracker (Zero-Rerender GPU)마우스 움직임 동적 추적
HOVER AURORA EFFECTSPOTLIGHT_HERO
마우스를 올려 오로라 이펙트를
실시간으로 체감해 보세요
커서 위치를 좌표로 추적하여 600px 반경의 에메랄드 앰비언트 글로우와 배경 틴트 오로라 레이어가 동시에 발산되는 프리미엄 메인 배너 카드입니다.
8월 마음 근력 리포트
Variant B. Ambient Aurora Border Glow Banner오로라 그라데이션 글로우
AURORA BORDER GLOWAMB_HERO
오늘의 마음을 챙기는
특별한 온보딩 리추얼
카드 테테두리 전체가 그라데이션 빔으로 둘러싸이며, 내부 패널이 오로라 틴트로 부드럽게 전환되는 메인 대시보드형 히어로 컴포넌트입니다.
✨ 상위 5% 마음 근력 도달
8. Motion & Icon Elements
AnimatedMorningSun, AnimatedEveningMoon & DumbbellIcon 모션 아이콘 셋업
`AnimatedMorningSun`
아침 루틴 및 낮 체크인 360도 무한 회전 회전 컴포넌트
`AnimatedEveningMoon`
밤/저녁 느린 구름 흐름 애니메이션 아이콘
`DumbbellIcon` 레벨별 7종 컬러 팔레트 시스템 (Doc 기반)level="wood" | "stone" | "bronze" | "iron" | "silver" | "gold" | "platinum"
Lv.1나무 덤벨
Lv.2돌 덤벨
Lv.3청동 덤벨
Lv.4철 덤벨
Lv.5은 덤벨
Lv.6금 덤벨
Lv.7플래티넘 덤벨
Sun
Moon
Brain
Notebook
Lightning
Smiley