텍스트만 있던 섹션에 캘린더 · 지도 · 랭킹 미니 위젯 프리뷰 붙이기 — POP-SPOT v1.8 (+v1.8.1)
Section 3 에 아이콘+텍스트만 있어 임팩트 약함. 실제 캘린더·지도·랭킹 모양의 미니 프리뷰 추가. Section 4 와 다크 모드 파스텔 채도·라임 그린도 같이 조정.
Section 3 의 "3 가지 기능" 이 아이콘 + 제목 + 설명만 있어 그냥 스크롤이 못 멈추고 넘어가는 느낌이었음. 실제 위젯 화면을 축소해서 붙이면 눈이 멈추고 댜다고 판단.
이 글에서 다루는 것
모르는 단어 한 줄로
| 용어 | 한 줄 설명 |
|---|---|
| 파스텔 채도 /12~30 | Tailwind 의 색 투명도. 해당 색 이름 뒤 <code>/30</code> 을 붙이면 30% 불투명도 (= 더 탁한 색) |
| lime-500/600 | Tailwind 의 라임 그린 계열 단계. 숫자 작을수록 연하고, 클수록 진하다 |
| conic gradient | 파이 차트 돌림판 형으로 점점 색이 변하는 그라디언트. <code>conic-gradient(...)</code> |
무엇이 바뀌었나
| 항목 | v1.7.4 | v1.8.1 |
|---|---|---|
| Section 3 | 아이콘+제목+설명만 | 캘린더/지도/랭킹 미니 위젯 프리뷰 |
| Section 4 | 4 개 카드 디자인 같음 | 좌측 컬러 액센트 바 (lime/hot/violet/amber) |
| 다크 배경 | 파스텔 채도 /12~15 (너무 연함) | /22~30 으로 올림 |
| 라임 그린 | 라이트 모드에서도 채도가 너무 연해서 존재감 떨어짐 | 라이트에서만 lime-500/600, 다크는 그대로 |
왜 이렇게 했음
텍스트만 있는 섹션은 스크롤을 못 멈춘다 — 읽을 만한 거리가 바로 안 올라오는 텍스트 섹션은 철저하게 스킵된다. 그래서 독자가 눈으로 "이게 뭐지" 를 파악할 수 있는 축소된 (몇 초 안에 끝) 이미지가 있어야 한다.
좌측 컬러 액센트 바 — 4 개 카드가 같은 디자인이면 "같은 종류 4 개" 로 읽힌다. 각각 다른 일을 하는 카드임을 드러내고 싶었고, 4 px 세로 바만 색을 다르게 두면 카드 단위의 텍스처와 붙어있어 텍스트와도 어울린다.
파스텔 채도 올림 — 다크 배경은 아주 어두운 색을 받침으로 쓰고, 그 위로 파스텔 컬러가 /12~15 (12~15% 불투명) 으로 올라가면 거의 다 어두운 바탕에 잠식된다. /22~30 으로 올리면 은은한 파스텔 광채 느낌이 남는다.
라임 그린 분리 적용 — 라이트 모드에서 라임 100/200 계열은 포인트 컬러로 쓰기에는 채도가 약해서 눈이 잘 안 잡힌다. 다크에서는 lime-200 이 그대로 잘 맞고, 라이트에서는 lime-500/600 (더 진한 채도) 으로 분리. 다크 모드 클래스 조건부 클래스 적용.
코드로는 어떻게 (필요한 부분만)
라이트/다크 채도 조정.
파일: popspot-frontend/src/app/intro/page.tsx (인트로의 포인트 컬러 클래스)
// v1.7.4 까지 — 라이트·다크 공통 채도
<span className="text-lime-200">...</span>
// ^^^^^^^^^^^^^ Tailwind: lime 계열 200 단계 (연한 라임)
// 다크 배경에서는 은은하게 떠느데
// 라이트(흰) 배경에서는 거의 보이지 않음 — 포인트 구조 상실파일: 같은 intro/page.tsx (v1.8 수정 후)
// v1.8 — 다크는 그대로, 라이트만 진한 톤으로 분리
<span className="text-lime-500 dark:text-lime-200">...</span>
// ^^^^^^^^^^^^^ ^^^^^^^^^^^^^^^^^^
// | |
// | +-- dark: 프리픽스 — html 에 .dark 클래스가 있을 때만 적용
// | (next-themes 가 v1.7 에서 토글해주는 그 클래스)
// +-- 기본 (라이트 모드) 적용: lime-500 — 500 은 조금 진한 단계·진한 라임
// 흰 배경에서도 녕녕하게 읽힘
// 패턴: 파스텔 포인트 컬러가 한 모드에서만 사라지는 경우 이렇게 모드별로 구분미니 프리뷰 컴포넌트
<div className="relative h-32 rounded-lg overflow-hidden bg-zinc-900/30">
{/* 축소된 캘린더/지도/랭킹 그림 — 실제 위젯을 transform: scale(0.6) 으로 */}
<MiniCalendarPreview />
</div>핵심 파일: popspot-frontend/src/app/intro/page.tsx