"AI 가 짠 듯한 디자인" 피드백 받고 매거진 톤으로 인트로 갈아엎기 — POP-SPOT v1.7 (+v1.7.4)
SK · HM Group · Greencar · 동욱조가 레퍼런스. 글래스모피즘 도배에서 섹션별 컬러 후광 + outline 로고 + 폴라로이드 + bento 그리드 로. 라이트/다크를 next-themes 로 양쪽 다 다듬음.
"디자인이 AI 가 짠 듯하게 정형화되어 있음" 이는 피드백을 받았고, 등압 고쪼 있었음. 주소록 콡아랜도 뒤진곰 안 구조의 레퍼런스를 몇 개 보고 "매거진 무드" 로 인트로를 완전 갈아엎음.
이 글에서 다루는 것
모르는 단어 한 줄로
| 용어 | 한 줄 설명 |
|---|---|
| 글래스모피즘 | 유리처럼 투명하고 비치는 창 효과. <code>backdrop-blur</code> + 반투명 배경 |
| outline 로고 | 손글씨 테두리만 있는 큰 타이포 글자 로고. 잡지 커버 타이틀처럼 강한 존재감 |
| bento 그리드 | 도시락 같이 박스 크기가 제각각 다른 그리드. Apple 이 많이 쓴다 |
| next-themes | Next.js 용 다크 모드 라이브러리. <code>html</code> 에 <code>data-theme</code> 클래스 붙여줌 |
| prefers-reduced-motion | 운영 체제에 "모션 줄이고 싶어" 설정. CSS/JS 에서 감지 가능 |
| 마킨 스트립 | 가로로 손끈없이 흐르는 텍스트 띄. <code>animation: scroll Xs linear infinite</code> |
무엇이 바뀌었나
| 항목 | v1.6.6 | v1.7.4 |
|---|---|---|
| 배경 시각 | 글래스모피즘 카드 도배 (같은 패턴 반복) | 섭션별 컬러 후광 + outline 로고 + 폴라로이드 + bento 그리드 |
| 색 팔레트 | 라임+핫핑크+보라 동시 등장 | 섭션별 한·두 컬러 강조 + cream/ink 톤 |
| 라이트/다크 | 다크 모드만 디자인됨 | next-themes 로 양쪽 모두 깔끔 |
| Hero | POP·SPOT + CTA 만 | outline 로고 + 폴라로이드 4 장 + 마킨 스트립 |
| 모션 토글 | 옵션 없음 | Play/Pause 토글 + <code>prefers-reduced-motion</code> 감지 |
왜 이렇게 했음
"AI 가 짠 듯하다" 가 뉛하는 것 — 구체적으로 아래 세 가지라고 판단함.
1) 같은 글래스 카드 도배 — 다른 동료들의 사이트도 다 그렇게 되어있음.
2) 고채도 웰멠·핐·라임 동시 등장 — "디자인 시스템에 있는 색 다 써봤어" 느낌.
3) 섭션마다 같은 구조의 카드 다섯 개가 반복.
그래서 섭션마다 입면과 색 테마를 다르게 두고, 구조도 몇 개는 polaroid 앞 뒤로 움직이는 marquee 스트립, 몇 개는 outline + giant wordmark 식으로 섭션 구조도 같이 바꿨.
레퍼런스 선정 — SK 그룹·동욱조가·Greencar·HM Group 의 랜딩 페이지를 보면 공통적으로 "매거진 그래픽" 의 그리드/타이포 한 축을 쓰고 있음. 잡지 표지를 웹으로 옮겼다 생각하면 이해가 빠르다. POP-SPOT 은 팝업이 테마라 더 잘 어울린다고 봤다.
라이트/다크 양쪽 — 온보딩 중 사용자 절반이 시스템 다크 이었다. v1.6 까지 다크만 일괄 디자인했는데 라이트에서는 파스텔 후광이 너무 옮아서 눈이 피곤함. next-themes 로 클래스 토글해서 각 모드별 채도 분리 설정.
코드로는 어떻게 (필요한 부분만)
파일: popspot-frontend/src/app/layout.tsx (Next.js App Router 최상위 레이아웃)
// v1.7 — src/app/layout.tsx 를 next-themes 로 감싸서 다크/라이트 토글 적용
import { ThemeProvider } from 'next-themes';
// ^^^^^^^^^^^^^ Next.js App Router 에 권장되는 다크모드 라이브러리
// <html> 의 class/data-attr 를 토글해주는 책임
export default function RootLayout({ children }) {
// ^^^^^^^^^^ Next.js App Router 의 최상위 레이아웃
// ^^^^^^^^^^ 하위 페이지·레이아웃 전체가 이 구멍으로 주입됨
return (
<html suppressHydrationWarning>
// ^^^^^^^^^^^^^^^^^^^^^^^^^^ 서버 렌더링 vs 클라이언트 hydrate 시 class 차이 경고 숨김
// (다크모드 클래스를 클라이언트에서 추가하므로 필수)
<body>
<ThemeProvider attribute="class" defaultTheme="system">
// ^^^^^^^^^^^^^^^^^^ ^^^^^^^^^^^^^^^^^^^^^^
// | |
// | +-- 첫 방문자는 OS 설정 따라감 (prefers-color-scheme)
// +-- <html class="dark"> 형태로 적용 (Tailwind 의 dark: 프리픽스와 합치)
// 대안: attribute="data-theme" 이면 <html data-theme="dark">
{children}
// ^^^^^^^^^^ 하위 페이지 전체가 이 Provider 의 컨텍스트 안으로 들어감
// useTheme() hook 으로 자식 컴포넌트는 어디서나 현재 테마를 읽고 쓸 수 있음
</ThemeProvider>
</body>
</html>
);
}파일: popspot-frontend/src/app/intro/page.tsx (인트로 페이지의 마킨 스트립 컨트롤 부분)
// v1.7 — 접근성: OS 의 모션 감소 설정 존재 파악 + 수동 토글
const prefersReduced = useMediaQuery('(prefers-reduced-motion: reduce)');
// ^^^^^^^^^^^^^^ ^^^^^^^^^^^^^ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
// | | |
// | | +-- 표준 CSS 미디어 쿼리. macOS 접근성·Windows 접근성 설정 반영
// | | 사용자가 "모션 줄이고 싶다" 결정을 한 경우 true
// | +-- 커스텀 훅 (보통 react-responsive 의 것을 쓰거나 자체 구현)
// +-- 부울 변수 — true 이면 모션 축소 원함
const [playing, setPlaying] = useState(!prefersReduced);
// ^^^^^^^ ^^^^^^^^^^ ! 으로 반전 — 접근성 설정 있으면 기본 정지
// +-- 애니메이션 재생 상태. UI 에서 "▶ 재생" / "⏸ 일시정지" 버튼과 연결
// playing 이 false 이면 marquee 의 animation-play-state 를 paused 로 설정
// <div style={{animationPlayState: playing ? 'running' : 'paused'}}>
// 레더링을 다시 돌리는 게 아니라, 이미 돌고 있는 애니메이션 트랙을 일시 정지/재생 — 렌더링 부담 0핵심 파일: popspot-frontend/src/app/intro/page.tsx, popspot-frontend/src/components/ThemeToggle.tsx
직접 보는 법
popspot.co.kr 아래 하단 메뉴 "POP-SPOT 소개" 에서 인트로 페이지 확인. 테마 토글 (우측 상단 해·달 아이콘)을 눌러 라이트/다크 전환해보면 계획한 양쪽 색이 적용되어 있음.
비하인드 · 사고
한 번에 12 개 레이어를 추가했다가 노트북 팬이 임계처럼 돌은 적이 있는데, 하나씩 켜고 끄면서 조절하는 게 더 빠르다. 도배처럼 넘치지 않게.
교훈 한 줄. 다른 자립형 랜딩·포트폴리오를 레퍼런스 두 세 개만 구체적으로 소화하면 "AI 느낌" 을 결정적으로 희석할 수 있음.