frontend-design
AI에게 디자인 감각을 입히는 공식 스킬
이건 뭐예요?
인테리어 업체에 집 꾸미기를 맡기는 장면을 떠올려 보세요. "모던하게요"라고만 말하면 결과물이 천차만별이지만, "화이트 톤 미니멀 + 무드등 + 원목 가구"처럼 구체적인 스타일 이름을 대면 원하는 결과에 훨씬 가까워지죠.
frontend-design은 바로 그 디자인 팀장 같은 역할을 하는 Claude Code 스킬(skill, 특정 작업을 위한 AI 지침 세트)이에요. Anthropic(앤쓰로픽, 클로드를 만든 회사)이 직접 만들어 공식 마켓플레이스에 배포한 플러그인이고, 2026년 7월 기준 100만 회 이상 설치되어 공식 플러그인 중에서도 손꼽히게 많이 쓰이는 스킬입니다.
이 스킬을 설치해 두면 "랜딩 페이지 하나 만들어줘"라고 시키더라도 Claude가 코드부터 쓰지 않아요. 먼저 디자인 계획을 세우고 그 계획을 스스로 한 번 깐 다음에 코드를 씁니다. 계획에는 네 가지가 들어가요.
- 색(Color) — 이름을 붙인 색 4~6개짜리 팔레트
- 글꼴(Type) — 개성을 담당하는 제목용, 잘 읽히는 본문용 등 역할별 2개 이상
- 레이아웃(Layout) — 화면을 어떻게 배치할지에 대한 구상
- 시그니처(Signature) — 이 화면을 기억에 남게 할 단 하나의 특별한 요소
그리고 곧바로 만들지 않고 "이거 아무 페이지에나 갖다 써도 어울리는 뻔한 안 아닌가?" 를 스스로 되물어요. 뻔하다 싶으면 그 부분을 고친 뒤에야 코드를 씁니다. 이 자기 검열 단계가 있어서, 평범한 "AI가 만든 티 나는" 결과물 대신 의도가 담긴 프로급 디자인이 나와요. 폰트 선택부터 색상 팔레트, 애니메이션, 여백까지 전부요.
공식 지침서에는 "요즘 AI가 만든 디자인이 자꾸 몰리는 뻔한 조합"으로 이 세 가지가 콕 집혀 있어요. 브리프에서 대놓고 요청하지 않는 한 이쪽으로 흐르지 말라고 되어 있죠.
- 크림색 배경 + 대비 강한 세리프 제목 + 테라코타 포인트
- 거의 검정에 가까운 배경 + 쨍한 형광 연두나 주황빛 빨강 포인트 하나
- 신문 지면 같은 레이아웃 — 머리카락처럼 얇은 괘선, 각진 모서리, 빽빽한 단
핵심을 한 줄로 줄이면 이래요. "AI에게 디자인 감각을 입혀주는 스타일북."
우리는 이렇게 쓰고 있어요
지금 여러분이 보고 계신 이 사이트, 오토프로그 랩스도 frontend-design 스킬의 도움을 받아 만들어졌어요.
HOLOGRID 테마의 탄생 과정. 이 사이트의 테마 이름은 HOLOGRID예요. 블레이드 러너 2049의 커맨드 센터에서 영감을 받은 다크 테마인데, 지금 쓰고 있는 값은 이래요.
- 배경색: 깊은 어둠을 닮은 짙은 먹색 (
#0B0D0C) - 본문 텍스트색: 오래 봐도 눈이 편한 밝은 회색 (
#A9B0AB) — 제목은 더 밝은#E8ECE9 - 포인트색: 디지털의 빛을 닮은 형광 연둣빛 (
#4ADE80) - 본문·제목 폰트: 한글이 또렷하게 읽히는
Pretendard - 포인트 폰트: 기계적이고 미래적인
Chakra Petch— 메뉴·라벨처럼 눈에 띄어야 하는 자리에만
처음에 "어둡고 묵직한 커맨드 센터 느낌으로 만들어줘"라고 시켰을 때, frontend-design 스킬이 활성화되면서 Claude가 단순히 색만 바꾸는 게 아니라 폰트 조합, 카드 테두리의 반투명 효과, 마우스를 올리면 빛나는 그라데이션까지 한 세트로 디자인해 줬어요.
위에서 소개한 "스킬이 특히 경계하는 세 가지" 중 두 번째가 "거의 검정에 가까운 배경 + 쨍한 형광 연두 포인트 하나"였죠. 그런데 HOLOGRID의 #0B0D0C + #4ADE80 조합이 정확히 거기에 걸립니다. 감추지 않고 그대로 짚고 넘어갈게요.
먼저 하나. 공식 지침서는 이 조합을 금지한 게 아니라 "브리프에서 대놓고 요청하지 않는 한 그쪽으로 흘러가지 말라"고 적고 있어요. 저희는 "블레이드 러너 2049의 커맨드 센터"라는 방향을 먼저 못 박고 들어갔으니, 떠밀려 간 게 아니라 고른 쪽에 가깝습니다.
그리고 이게 더 중요한데 — 팔레트가 겹쳐도 나머지를 다르게 하면 다른 화면이 됩니다. 이 사이트가 AI 기본값과 실제로 갈라지는 지점은 이래요.
- 그래프용지 격자: 화면 전체에 44px 간격의 옅은 모눈(
rgba(121,129,124,0.06))이 한 겹 깔려 있고, 마우스를 움직이면 커서 반대 방향으로 최대 64px까지 천천히 밀려요. 도면 위에 올라선 듯한 느낌을 주는 이 사이트의 시그니처입니다. (멀미에 민감한 분을 위해prefers-reduced-motion설정에서는 꺼집니다.) - 한글을 1순위로 둔 타이포: 본문·제목 모두
Pretendard Variable을 쓰고, 문단 400 · 강조 700 · 목록 400처럼 굵기로 위계를 만든 뒤 자간을 음수로 조여 놨어요. 형광색 위에 영문 폰트만 얹는 흔한 조합과 여기서 갈립니다. - 모노 라벨은 라벨 자리에만:
JetBrains Mono·Share Tech Mono를 대문자 + 넓은 자간(0.1~0.25em)으로 메뉴·메타 정보에만 쓰고 본문에는 쓰지 않아요.Chakra Petch는 문서 메타·개정 이력 같은 포인트 자리를 맡고요. - 대비를 숫자로 검증: 본문색은 배경 대비 8.62:1, 보조 라벨은 6.20:1로 WCAG AA 기준을 넘겨 두고 그 측정값을 CSS 주석에 적어 놨어요. "형광색이라 눈이 아프다"는 흔한 실패를 피하려고요.
- 다크 전용이 아님: BRUTAL LIGHT라는 라이트 모드 시안을 따로 만들어서, 오른쪽 위 해/달 버튼으로 바꿀 수 있어요.
교훈은 이거예요. AI 기본값에서 출발하는 건 잘못이 아니에요. 거기서 멈추면 "AI가 만든 티"가 나고, 텍스처·타이포·읽기 편함처럼 내 서비스에만 맞는 결정을 하나씩 얹으면 그때부터 내 것이 됩니다.
한 가지 솔직하게 덧붙이면, 초기 버전은 본문까지 영문 전용 글꼴(Share Tech Mono)로 깔았다가 한글이 뭉개져서 본문을 Pretendard로 되돌렸어요. 개성 있는 영문 글꼴은 라벨과 코드 자리에만 남겼고요. 한글 서비스라면 본문 글꼴은 꼭 한글이 예쁜 걸로 고르세요. (이 과정은 18강에서 더 자세히 다뤄요.)
홈 화면 카드 레이아웃. autofrog.kr/lab 홈 화면에 보이는 네 개의 카드(LECTURES, GITHUB REPOS, VIBE SKILLS, PROFILE)는 각각 번호와 라벨이 붙은 그리드 구조예요. 이런 "정보 밀도가 높은데 정돈된 느낌"은 스킬의 "구조는 곧 정보다" 원칙이 작동한 결과물입니다. 번호나 라벨 같은 장치를 장식으로 쓰지 말고, 순서나 분류처럼 내용에 실제로 있는 정보를 담을 때만 쓰라는 원칙이에요.
핵심은 "스타일 이름"이에요. 저도 코딩은 1줄도 모르지만, "Retro-Futuristic 느낌으로 해줘"라든가 "Glassmorphism 스타일 카드로 바꿔봐" 같은 디자인 스타일 이름을 알게 되면서 주문이 정확해졌어요. 그래서 아래 섹션에서 이 스타일 이름들을 하나씩 소개해 드리려 합니다.
디자인, 이름을 알면 주문이 쉬워요
여기서 한 가지 짚고 갈 게 있어요. 이 스킬 안에 "스타일 목록"이 메뉴판처럼 들어 있는 건 아니에요. 스킬이 시키는 건 오히려 반대로, 주제에서 출발해 그 브리프에만 어울리는 색·글꼴·레이아웃을 직접 설계하라는 쪽이에요.
그렇다면 스타일 이름은 왜 알아야 할까요? 그게 내가 원하는 방향을 AI에게 전달하는 공용 어휘이기 때문이에요. 스킬이 아무리 잘 설계해도 내가 원하는 방향을 모르면 엉뚱한 데로 갈 수 있어요. "이 스타일로 해줘"라고 이름을 대주면 Claude가 그 방향을 출발점으로 잡고, 거기서 폰트·색상·애니메이션·레이아웃을 구체화해 줍니다. 공식 지침서에도 브리프가 방향을 못 박으면 그 말을 최우선으로 따르라고 적혀 있어요.
아래에서 대표적인 5가지를 자세히 소개하고, 나머지는 표로 정리할게요.
1. Glassmorphism (글래스모피즘)
반투명 유리 위에 빛이 번지는 느낌.
배경에 그라데이션이나 이미지를 깔고, 그 위에 backdrop-blur(배경 흐림 효과)가 적용된 반투명 카드를 올리는 스타일이에요. 마치 서리 낀 유리창 너머로 풍경을 보는 느낌이죠. Apple의 iOS나 macOS 인터페이스에서 자주 볼 수 있어요.
- 특징: 반투명 카드, 흐림 배경, 부드러운 그림자, 밝은 테두리
- 어울리는 곳: 대시보드, SaaS(서비스형 소프트웨어) 랜딩 페이지, 금융 앱
2. Brutalism · Neubrutalism (브루탈리즘 · 뉴브루탈리즘)
꾸미지 않은 날것 그대로의 힘.
건축에서 온 용어예요. 콘크리트를 그대로 드러내는 건축 양식처럼, 웹에서는 두꺼운 테두리(3~4px), 거친 그림자, 깨진 듯한 그리드, 큼직한 타이포그래피(글꼴 디자인)를 사용해요. "예쁘게" 보다 "강렬하게"가 목표인 스타일입니다.
이름이 비슷한 두 가지가 자주 섞여 쓰이는데, 한 줄로 가르면 이래요. Brutalism(브루탈리즘)은 꾸밈을 아예 걷어낸 쪽이에요. 기본 HTML에 가까운 투박한 화면, 장식 없는 검은 글씨와 파란 링크가 특징이고 블룸버그·크레이그리스트 같은 사이트가 여기에 가까워요. Neubrutalism(뉴브루탈리즘)은 그 투박함을 일부러 디자인 언어로 끌어올린 쪽이라, 굵은 검은 테두리에 어긋나게 떨어지는 하드 섀도와 쨍한 팝 컬러를 얹어요. 피그마 커뮤니티나 검로드 화면이 대표적이죠. 바로 위 미리보기가 이 뉴브루탈리즘 쪽 예시예요.
- 공통 특징: 두꺼운 보더(테두리), 하드 섀도(딱딱한 그림자), 깨진 그리드, 대담한 색상 대비
- 갈리는 지점: 브루탈리즘은 무채색·무장식 / 뉴브루탈리즘은 검은 테두리 + 팝 컬러
- 어울리는 곳: 포트폴리오, 아티스트 사이트, 실험적 브랜드 페이지, 개발자 커뮤니티 서비스
3. Retro-Futurism (레트로 퓨처리즘)
과거가 상상한 미래, 네온과 CRT 모니터 감성.
1980년대 SF 영화에서 본 것 같은 네온 라인, 스캔라인 효과, 터미널 폰트가 특징이에요. 사이버펑크(Cyberpunk) 느낌이라고 해도 좋습니다. 참고로 지금 보고 계신 오토프로그 랩스 사이트의 HOLOGRID 테마가 바로 이 방향에 가까워요. 다크 배경 + 형광 포인트색(#4ADE80) + 라벨에 쓰는 각진 영문 폰트 조합이 전형적인 레트로 퓨처리즘이거든요. 위 미리보기는 같은 방향을 시안 계열로 잡아본 예시라 색만 다를 뿐, 원리는 같아요.
- 특징: 네온 색상, 어두운 배경, 글로우(발광) 효과, 모노스페이스 폰트, 스캔라인
- 어울리는 곳: 게임 사이트, 개발자 도구, AI/테크 서비스, 음악 스트리밍
4. Minimalist (미니멀리스트)
남는 건 여백, 빠지는 건 군더더기.
여기서의 미니멀은 "대충 만든 게 아니라 극도로 정제된"이라는 뜻이에요. 요소 하나하나의 크기, 위치, 간격을 밀리미터 단위로 조절해서 "아무것도 더할 것이 없고, 아무것도 뺄 것이 없는" 상태를 만드는 거예요. 스위스 디자인(Swiss Design)이라고도 불립니다.
- 특징: 넉넉한 여백, 정밀한 타이포그래피, 제한된 색상(2~3색), 숨은 그리드
- 어울리는 곳: 브랜드 사이트, 이력서/포트폴리오, 프리미엄 제품 페이지
5. Soft/Pastel (소프트 파스텔)
파스텔 톤의 부드럽고 따뜻한 세계.
연분홍, 연보라, 민트, 베이비블루 같은 파스텔 색상을 기반으로 둥글둥글한 모서리와 부드러운 그림자를 사용해요. 보는 것만으로 마음이 편안해지는 스타일이죠. 건강, 교육, 어린이 관련 서비스에서 자주 보입니다.
- 특징: 파스텔 팔레트(연한 색 조합), 큰 라운드 코너(둥근 모서리), 부드러운 그림자, 친근한 일러스트
- 어울리는 곳: 교육 플랫폼, 헬스케어 앱, 키즈 서비스, 라이프스타일 블로그
나머지 스타일 한눈에 보기
| 스타일 이름 | 한 줄 특징 | 어울리는 사이트 유형 |
|---|---|---|
| Maximalist Chaos (맥시멀리스트) | 화려한 색, 빽빽한 요소, 시선을 압도하는 에너지 | 이벤트 페이지, 뮤직 페스티벌, 패션 브랜드 |
| Organic/Natural (오가닉) | 자연에서 온 곡선, 어스 톤(흙/나무 색), 유기적 형태 | 친환경 브랜드, 식품/음료, 웰니스 |
| Luxury/Refined (럭셔리) | 골드/블랙 팔레트, 세리프 폰트(삐침 있는 글꼴), 절제된 고급감 | 주얼리, 호텔, 프리미엄 구독 서비스 |
| Playful/Toy-like (플레이풀) | 통통 튀는 색상, 큰 아이콘, 장난감 같은 3D 요소 | 게이미피케이션 앱, 스타트업 랜딩, SNS |
| Editorial/Magazine (에디토리얼) | 잡지 레이아웃, 대형 타이포, 사진 중심 | 미디어, 뉴스레터, 콘텐츠 플랫폼 |
| Art Deco/Geometric (아르데코) | 1920년대 기하학 패턴, 금속 텍스처, 좌우 대칭 | 럭셔리 브랜드, 건축, 부동산 |
| Industrial/Utilitarian (인더스트리얼) | 기능 중심, 노출 배관 같은 구조 노출, 무채색 | 개발자 도구, 관리자 패널, B2B SaaS |
이 외에도 커뮤니티에서 자주 언급되는 확장 스타일이 있어요.
| 스타일 이름 | 한 줄 특징 | 어울리는 사이트 유형 |
|---|---|---|
| Neomorphism (뉴모피즘) | 눌린 버튼/볼록한 카드, 밝은 배경 위 미세한 음영 | IoT 대시보드, 스마트홈 컨트롤러 |
| Claymorphism (클레이모피즘) | 부풀린 3D 점토 느낌, 캔디 파스텔 팔레트 | 어린이 교육, 캐릭터 브랜드 |
| Aurora Mesh Gradient (오로라) | 천천히 움직이는 메쉬 그라데이션(색이 섞이는 배경), 유리 오버레이 | AI 서비스, 크리에이티브 도구 |
| Dark OLED Luxury (OLED 럭셔리) | 진짜 검정(#000) 배경, OLED 디스플레이 최적화 | 미디어 플레이어, 갤러리, 나이트 모드 앱 |
한번 써볼까요?
frontend-design은 Anthropic 공식 플러그인이에요. Claude Code 대화창 안에서 /plugin 명령으로 설치할 수 있습니다. 공식 마켓플레이스(Anthropic이 관리하는 플러그인 저장소)에 등록되어 있어서, 별도 주소를 입력할 필요가 없어요.
/plugin install frontend-design@claude-plugins-official
/reload-plugins
둘째 줄은 Claude Code를 껐다 켜지 않고도 방금 설치한 걸 곧바로 반영해 주는 명령이에요.
/frontend-design이라고 입력하는 명령은 존재하지 않아요. 이 플러그인 안에는 커맨드 없이 스킬 하나만 들어 있어서, 설치 후엔 디자인 관련 요청을 하면 Claude가 알아서 이 스킬을 꺼내 읽습니다. 공식 안내문에도 "Claude가 프론트엔드 작업에 이 스킬을 자동으로 사용한다"고 적혀 있어요.
그러니 아래처럼 그냥 하고 싶은 말을 적으면 돼요.
핀테크 스타트업 랜딩 페이지 만들어줘. 다크 톤에 에디토리얼 느낌으로.
이렇게 스타일 이름을 함께 적어주면 Claude가 그 방향을 출발점 삼아 폰트, 색상, 레이아웃, 애니메이션을 결정한 뒤 코드를 작성합니다.
준비물은 Claude Code가 설치되어 있는 환경이면 충분해요. Claude Code가 아직 없다면 공식 설치 가이드를 먼저 참고해 주세요.
클로드 코드 터미널에서는 이렇게
아래 명령어를 클로드 코드가 실행되고 있는 터미널(PowerShell, 명령 프롬프트, Mac/Linux Terminal)에 그대로 복사해서 붙여 넣고 Enter만 누르세요.
# 1. Claude Code가 설치되어 있는지 확인 (버전 번호가 뜨면 OK)
claude --version
# 2. Claude Code를 실행 (프로젝트 폴더에서)
claude
Claude Code가 실행되면, 아래 명령어를 Claude Code 대화창 안에서 입력하세요.
# 3. frontend-design 플러그인 설치 (Anthropic 공식 마켓플레이스에서)
/plugin install frontend-design@claude-plugins-official
# 4. 껐다 켜지 않고 바로 반영하기
/reload-plugins
Marketplace "claude-plugins-official" not found라는 빨간 글씨가 나오면, 공식 목록이 아직 등록되지 않은 거예요. 아래 한 줄을 먼저 실행한 다음 위 설치 명령을 다시 하세요.
/plugin marketplace add anthropics/claude-plugins-official
/plugin 명령 자체가 없다고 나오면 Claude Code가 옛날 버전이에요. 최신 버전으로 올린 뒤 다시 시도해 주세요.
설치 확인은 /plugin 명령어를 입력하면 열리는 플러그인 관리 화면의 Installed 탭에서 할 수 있어요. "frontend-design"이 목록에 보이면 성공입니다.
설치가 끝났으면 아래처럼 말로 시켜보세요. 앞에 슬래시를 붙이지 않고, 그냥 하고 싶은 말을 적으면 스킬이 알아서 켜져요.
AI 지식 아카이브 홈 화면을 Glassmorphism 스타일로 만들어줘
Claude가 알아서 반투명 유리 카드, 배경 블러, 부드러운 그라데이션을 조합한 HTML/CSS 코드를 만들어 줄 거예요. 다른 스타일을 써보고 싶으면 "Glassmorphism" 자리에 위에서 소개한 스타일 이름을 바꿔 넣으면 됩니다.
몇 가지 활용 예시를 더 드릴게요.
# 브루탈리즘 스타일 포트폴리오
개인 포트폴리오 페이지 만들어줘. Brutalism 스타일로. 두꺼운 보더와 대담한 타이포.
# 럭셔리 스타일 제품 페이지
프리미엄 향수 브랜드 제품 페이지 만들어줘. Luxury/Refined 톤으로.
# 파스텔 톤 교육 플랫폼
초등학생 코딩 교육 대시보드 만들어줘. Soft/Pastel 스타일, 친근한 일러스트 느낌으로.
스타일 이름을 모르겠으면 그냥 분위기를 말해도 돼요. "차갑고 미래적인 느낌", "따뜻하고 자연적인 느낌"처럼 톤만 던져도 Claude가 가장 가까운 미학 방향을 골라서 적용합니다.
혹시 플러그인을 삭제하고 싶다면 Claude Code 대화창에서 /plugin 명령어를 입력한 뒤 Installed 탭에서 해당 플러그인을 선택하고 삭제하면 됩니다.
이런 분께 추천해요
frontend-design은 "멋진 웹 화면을 만들고 싶은데 디자인 용어도, 코드도 모르는" 모든 분을 위한 스킬이에요.
-
"홈페이지 하나 만들고 싶은데 어떤 스타일이 있는지 모르겠어요"라는 비개발자. 위에서 소개한 스타일 이름 중 마음에 드는 걸 하나 골라서 말하면 끝이에요. 디자이너에게 시안을 의뢰하는 것처럼, AI에게 스타일 방향만 알려주면 됩니다.
-
스타트업 대표인데 랜딩 페이지를 빠르게 만들고 싶은 분. "핀테크 서비스 랜딩 페이지, Glassmorphism 스타일로" 한 줄이면 production-grade(바로 배포 가능한 수준) 코드가 나와요. 디자이너 + 퍼블리셔 없이도 첫 번째 버전을 몇 분 안에 볼 수 있습니다.
-
바이브 코딩을 배우는 중인데 "AI가 만든 티"를 없애고 싶은 분. 이 스킬 없이 만들면 매번 비슷한 그라데이션, 비슷한 폰트, 똑같은 카드 레이아웃이 나와요.
frontend-design을 설치해 두면 Claude가 코드를 쓰기 전에 "이거 뻔하지 않나?"를 스스로 되묻기 때문에 AI 슬롭(AI slop, AI가 만든 티가 나는 천편일률적 결과물)에서 벗어날 수 있습니다.
참고 링크
- 18강: 디자인 레벨업 — 실전 적용 강의
- Frontend Design 공식 플러그인 페이지 (Anthropic)
- claude-code/plugins/frontend-design (GitHub)
- SKILL.md 원본 (GitHub)
- Claude Code Skills 공식 문서
- Frontend Aesthetics Cookbook (Anthropic)
▸개정 이력3건
- v32026-07-19설치 수치를 시점 명시해 되살림 — 공식 플러그인 페이지 실측 1,081,079회 기준 '2026년 7월 기준 100만 회 이상'. 18강과의 스타일 목록 불일치 해소 — SKILL.md 원문에 명명된 스타일 목록이 아예 없음을 확인하고, 별개 스타일인 Brutalism/Neubrutalism을 '2. Brutalism · Neubrutalism' 한 절로 합쳐 차이(무채색·무장식 vs 검은 테두리+팝 컬러)를 명시(미리보기 라벨도 실제 미감에 맞춰 NEUBRUTALISM으로 정정). HOLOGRID 팔레트가 '스킬이 경계하는 AI 기본값 2번(near-black + 형광 연두)'과 겹친다는 점을 인정하고, 브리프 선행 지정 근거 + 실측 차별화 요소(44px 모눈 파럴랙스, Pretendard 굵기 위계, 모노 라벨 한정 사용, 대비 8.62:1/6.20:1, 라이트 모드)를 교육적 사례로 정리한 note 박스 신설
- v22026-07-19이 플러그인에는 슬래시 커맨드가 없다는 사실에 맞춰 제목·본문·예시 전체를 자동 발동 방식으로 정정(`/frontend-design ...` 호출 예시 5개 삭제, 18강 v2와 통일). 출처가 확인되지 않는 '45만 회 설치' 수치 삭제. HOLOGRID 팔레트·폰트를 현행 사이트 실제 값(`#0B0D0C` / `#A9B0AB` / `#4ADE80`, Pretendard + Chakra Petch)으로 정정. 스킬이 미학 목록을 '내장'한다는 설명을, 실제 SKILL.md 내용(주제에서 출발해 색·타이포·레이아웃·시그니처를 직접 설계하고 기본값을 self-critique)에 맞게 수정하고 스타일 이름은 '주문에 쓰는 공용 어휘'로 재배치. 설치 절차에 `/reload-plugins`와 마켓플레이스 미등록 대비 안내 추가(18강 v2와 동일)
- v12026-04-12초판