gstack 프런트엔드 기술 파노라마: 디자인부터 출시까지 AI 워크플로
gstack의 25개 이상의 프런트엔드/UI 관련 기술에 대한 시스템 검토, 권장 개발 워크플로 및 실제 테스트 제안
소개
이전 노트에서는 gstack이란 무엇인가, 워크플로 실행 방법, Skill의 엔지니어링 구조에 대해 이야기했습니다. 하지만 아직 논의되지 않은 질문이 하나 있습니다. gstack 설치 후 가져온 60개 이상의 기술 중 프런트엔드/UI 디자인과 관련된 기술은 무엇입니까? 어떤 순서로? **
이 노트는 두 가지 작업을 수행합니다. 먼저 프런트 엔드와 관련된 ~27개의 기술을 기능별로 분류한 다음 흥미로운 작은 프로젝트(카운트다운 기념 페이지)를 사용하여 실제 효과를 볼 수 있도록 각 단계의 스크린샷과 함께 전체 워크플로를 처음부터 끝까지 단계별로 안내합니다.
프런트엔드 스킬 키트 파노라마
gstack의 프런트엔드 기술은 기초부터 지붕까지 6개의 기능 계층으로 나눌 수 있으며, 각 계층은 서로 다른 단계에서 문제를 해결합니다.
설계 인프라
디자인 언어를 결정하기 위한 프로젝트 수준의 일회성 설정과 모든 후속 기술은 이러한 벤치마크를 참조합니다.
| 스킬 | 해야 할 일 | 사용 시기 |
|---|---|---|
/design-consultation | 완벽한 디자인 시스템 상담, 출력 색상 매칭, 글꼴, 간격, 질감 방향 | 새 프로젝트를 시작하거나 시각적 스타일을 재정의하려는 경우 |
/teach-impeccable | 디자인 기본 설정을 한 번에 수집하여 AI 구성 파일에 기록 | AI가 미학을 기억할 수 있도록 gstack을 설치한 후 한 번 실행 |
/brand-guidelines | 기존 브랜드 컬러 매칭 및 글꼴 사양 적용 | 기존 브랜드 매뉴얼이 있는 경우 바로 적용 |
프로젝트에 이미
DESIGN.md이 있는 경우 이 레벨을 건너뛸 수 있습니다.
디자인 탐색
방향이 확실하지 않은 경우 여러 옵션을 빠르게 비교하세요.
| 스킬 | 해야 할 일 | 사용 시기 |
|---|---|---|
/design-shotgun | 3~5개의 시각적 솔루션 생성, 비교 패널 열기 | 어떤 스타일을 원하는지 잘 모르겠으나 가능성을 보고 싶습니다 |
/frontend-design | 인식 가능한 프로덕션 수준 프런트엔드 인터페이스 코드 생성 | 방향이 명확한 후 바로 작업 |
/canvas-design | 포스터, 시각 예술 생성(PNG/PDF) | 웹 구성요소가 아닌 정적인 시각적 디자인이 필요함 |
디자인 구현
계획을 실제로 실행 가능한 코드로 전환하고 조판, 레이아웃 및 응답성을 처리합니다.
| 스킬 | 해야 할 일 | 사용 시기 |
|---|---|---|
/design-html | 확정된 디자인 초안을 프로덕션급 HTML/CSS로 변환 | 직접 구현하고 싶은 모형이 있습니다 |
/mobile-responsiveness | 모바일 우선 반응형 레이아웃 및 터치 상호작용 | 처음부터 모바일 적응 |
/adapt | 장치 및 화면 크기에 따른 중단점 적응 | 데스크톱 버전이 있으며 휴대폰/태블릿에 적용해야 함 |
/typeset | 글꼴 선택, 수준, 크기, 두께 및 가독성 최적화 | 텍스트 레이아웃은 "거의 의미가 없어 보입니다" |
/arrange | 레이아웃 간격, 시각적 리듬, 정렬 복구 | 일관성 없는 간격, 레이아웃이 혼잡하거나 흩어져 있는 느낌 |
디자인 개선
기능적 완성도를 바탕으로 역동적인 효과와 개성, 감성적인 디테일을 주입합니다.
| 스킬 | 해야 할 일 | 사용 시기 |
|---|---|---|
/animate | 의도적인 마이크로 상호 작용 및 애니메이션 추가 | 페이지 기능은 양호하지만 "단단한" 느낌 |
/delight | 놀라운 세부 사항과 개인화된 터치를 추가하세요 | 사용자가 이 페이지를 기억하도록 하기 |
/bolder | 시각적 효과 증폭 | 디자인이 너무 평범하고 너무 안전하다 |
/colorize | 단조로운 인터페이스에 전략적인 색상 추가 | 페이지가 너무 회색이고 너무 평범하며 따뜻함이 부족합니다 |
/overdrive | 기술적 폭발 수준 효과 - 셰이더, 스프링 물리학, 스크롤 드라이브 애니메이션 | 특정 지역은 와우 효과를 원합니다 |
/onboard | 새로운 사용자 안내 프로세스, 빈 상태 디자인 | 최초 사용자 경험 |
이 네 가지 강화 기술은 진행적 관계에 있습니다. animate은 기본 동적 효과, delight은 감정, bolder는 증폭, overdrive은 폭발입니다. 프로젝트 요구 사항에 따라 단계별로 쌓으므로 모두 사용할 필요는 없습니다.
디자인 최적화
융합 및 개선 – 과잉 제거, 편차 정렬, 거친 가장자리 연마.
| 스킬 | 해야 할 일 | 사용 시기 |
|---|---|---|
/polish | 최종 품질 개선: 정렬, 간격, 일관성 | 출시 전 최종 패스 |
/quieter | 시각적 자극의 강도 감소 | 디자인이 너무 화려하고 시끄럽다 |
/distill | 불필요한 복잡성 최소화 및 제거 | 페이지에 요소가 너무 많아 요소를 줄이고 싶습니다 |
/normalize | 디자인 시스템 표준 정렬(토큰, 간격, 색상) | 스타일이 DESIGN.md 사양에서 벗어남 |
/clarify | UX 카피라이팅, 오류 메시지, 라벨 문구 개선 | 카피라이팅은 혼란스럽고 오류 메시지는 불친절합니다 |
설계 검토 및 검증
온라인에 접속하기 전에 체계적인 검사를 통해 문제를 찾아내고 점수를 매기고 수정합니다.
| 스킬 | 해야 할 일 | 사용 시기 |
|---|---|---|
/plan-design-review | 구현 전 설계 계획 검토(0~10점) | AI가 디자이너의 관점에서 계획을 검토하기를 원합니다 |
/design-review | 구현 후 Visual QA, 자동 스크린샷 비교 및 수정 | 코드 작성 후 시각적인 복원 정도 확인 |
/critique | UX 평가: 시각적 계층, 인지 부하, 정서적 공명 | 구조화된 디자인 검토 보고서를 원하십니까 |
/audit | 기술 검토: 접근성, 성능, 테마, 반응성 | 라이브 전 체계적인 점검 |
/benchmark | 성능 기준 테스트, 비교 전/후 | 변경이 성능에 미치는 영향을 정량화하고 싶습니까? |
gstack의 프론트엔드 관련 기술은 기능별로 인프라 → 탐색 → 구현 → 개선 → 최적화 → 검토 의 6개 레이어로 나누어 설계부터 출시까지 완전한 파이프라인을 구성합니다. 매번 실행하는 대신 필요에 따라 그릴 수 있습니다.
실제 시연: 카운트다운 기념일 페이지를 사용하여 전체 과정을 진행하세요.
분류표만 보면 너무 추상적이다. 우리는 위의 기술을 결합하기 위해 작은 프로젝트를 사용합니다. 카운트다운/기념일 단일 페이지 만들기: 의미 있는 날짜를 선택하고 디지털 애니메이션과 배경 효과가 포함된 카운트다운 디스플레이를 만듭니다.
이 프로젝트는 작지만 완벽하여 6가지 기술 수준의 대부분을 다룰 수 있을 만큼 충분합니다. 전체 프로세스는 다음과 같습니다.
基建 → 探索 → 构建 → 增强 → 调优 → 审查 → 发布매번 7단계를 모두 실행할 필요는 없습니다. 익숙해지면 일반적으로 사용되는 링크는
/frontend-design → /animate → /polish → /ship네 단계에 불과합니다. 완전한 능력을 보여주기 위해 여기에서 모든 단계를 밟습니다.
1단계: 인프라 - 설계 언어 결정
Skill：/design-consultation + /teach-impeccable
프로젝트 초기에 한 번만 수행하면 됩니다. AI가 사용자의 디자인 선호도를 기억할 수 있도록 DESIGN.md을 출력합니다. 프로젝트에 이미 DESIGN.md이 있는 경우 직접 건너뜁니다.
> /design-consultation
"我要做一个倒计时纪念日页面，风格偏好是深色背景、
数字大而醒目、整体氛围温暖但克制"2단계: 탐색 - 여러 옵션 비교
Skill：/design-shotgun
방향이 확실하지 않은 경우 AI가 3~5개의 시각적 솔루션을 생성하고 비교 패널을 열어 선택할 수 있습니다.
> /design-shotgun
"做一个倒计时/纪念日单页，展示距离某个日期的天/时/分/秒，
要有数字翻牌动画，背景有微妙的粒子或渐变效果，
整体氛围要温暖但不俗气。给我 3 个方向。"3가지 옵션 중에서 방향을 선택하세요. 원하는 것이 무엇인지 정확히 알고 있다면 이 단계를 건너뛰고 바로 3단계로 이동하세요.
3단계: 빌드 - 프로덕션 수준 코드 생성
Skill：/frontend-design + /adapt
핵심 링크. 처음부터 응답성을 보장하면서 코드를 작성합니다.
> /frontend-design
"基于方案 2 实现倒计时页面。要求：
- 实时倒计时（天/时/分/秒）
- 响应式布局（桌面 + 手机）
- 日期可配置"4단계: 강화 – 움직임과 개성 주입
스킬: /animate → /delight (요청 시 /overdrive)
이 세 가지는 점진적인 관계에 있습니다. animate은 기본 동적 효과, delight은 감정적 세부 사항, overdrive은 폭발 효과입니다. 필요에 따라 레이어를 추가합니다.
> /animate
"给倒计时数字加翻牌动画效果，页面加载时有入场动画"
> /delight
"给页面加一些有趣的小细节，比如到达整点时的微庆祝效果"
> /overdrive （可选，想要 wow effect 的话）
"给背景加粒子效果或流体动画，60fps"DESIGN.md에 참조된 애니메이션 제약 조건에 유의하세요. 디자인 시스템이 150ms 호버 전환만 허용하는 경우 /overdrive은 적용되지 않습니다. 이것은 좋은 판단 연습입니다.
5단계: 튜닝 - 융합 및 연마
스킬: /typeset + /polish (요청 시 /distill, /normalize)
간격 정렬, 글꼴 계층, 시각적 리듬. 너무 많이 추가했다고 생각되면 /distill을(를) 사용하여 빼세요.
> /typeset
"检查数字字体的大小、粗细层级是否合理"
> /polish
"最终打磨，检查对齐、间距、暗色模式支持"6단계: 검토 – 체계적인 점검
Skill：/design-review + /audit
시각적 QA + 기술 검토. /design-review은 자동으로 스크린샷을 찍어 문제를 비교하고 수정하며, /audit은 접근성과 성능을 확인합니다.
> /design-review
"视觉 QA，截图对比桌面和手机端"
> /audit
"检查可访问性和性能"7단계: 출시
Skill：/ship
표준 gstack 릴리스 프로세스 - 테스트, 차이점 검토, PR 생성.
> /ship예상 결과: 프로세스에서 8~10개의 프런트엔드 기술을 사용하는 시각적으로 아름다운 카운트다운 페이지. 무엇보다 중요한 것은 '어떤 단계에서 어떤 스킬을 사용하는가'에 대한 직관을 확립하는 것입니다.
일일 치트 시트
이상이 전체 과정입니다. 일상적인 개발 중에 특정 문제가 발생하는 경우 다음 표를 확인하세요.
| 내 현재 질문 | 무엇을 사용할 것인가 |
|---|---|
| 어떤 스타일을 원하는지 모르겠어요 | /design-shotgun |
| 페이지 기능은 좋지만 "거의 쓸모없다"는 느낌 | /polish |
| 뭔가 문제가 있는 것 같지만 설명할 수 없습니다 | /design-review |
| 글꼴/레이아웃이 이상해 보입니다 | /typeset |
| 지저분한 간격과 혼잡한 레이아웃 | /arrange |
| 스타일이 디자인 시스템에서 벗어남 | /normalize |
| 공용 구성 요소를 추출하고 싶습니까 | /extract |
| 페이지가 너무 복잡해서 빼고 싶어요 | /distill |
| 디자인이 너무 평범하고 너무 안전하다 | /bolder 또는 /colorize |
| 디자인이 너무 화려하고 시끄럽다 | /quieter |
| 오류 메시지 텍스트가 친절하지 않습니다 | /clarify |
| 휴대폰 디스플레이에 문제가 있습니다 | /adapt |
| 애니메이션 효과를 추가하고 싶습니까 | /animate(기본) 또는 /overdrive(폭발) |
| 온라인 접속 전 체계적인 점검 | /audit |
| debug | /investigate |
요약
이 메모는 두 가지 작업을 수행합니다.
- 파노라마 - gstack의 27개 프론트엔드 스킬은 6개 레이어(인프라→탐색→구현→개선→최적화→검토)로 분류됩니다.
- 실용적 시연 - 카운트다운 기념일 페이지를 사용하여 전체 워크플로를 살펴보고 각 단계에서 사용되는 스킬과 그 이유를 보여줍니다.
주요 내용: 이러한 스킬의 가장 강력한 사용법은 개별적으로 호출하는 것이 아니라 파이프라인에서 이를 결합하는 것입니다. 즉, 각 단계에서 명확한 스킬 선택을 통해 방향 탐색, 구현 구축, 개선 강화, 릴리스 검토 등이 가능합니다.
하지만 프로세스에 얽매이지 마세요. 일단 능숙해지면 대부분의 경우 /frontend-design → /animate → /polish → /ship 4단계이면 충분합니다.
gstack - Claude Code Skills
23+ opinionated skills that transform Claude Code from a single AI assistant into a virtual engineering team.
관련 자료:
- gstack 개념 — gstack은 무엇이고 어떤 문제를 해결하나요?
- gstack 실무 장 — 설치부터 실행까지 전체 워크플로
- gstack Skill Architecture Teardown — 스킬 개발자는 무엇을 배울 수 있나요?
- Claude Skills Concept — 스킬의 기본 메커니즘을 이해합니다.