Vibe Design Studio디자인 참고 웹 도구 · 개인 작업
AI에게 코딩을 맡길 때 만들 화면의 분위기를 말로 넘기기가 가장 어려웠습니다. 실제 서비스의 디자인 시스템과 화면 기법을 모으고, 카드마다 AI 코딩 도구에 그대로 붙여 넣을 지시 문구와 색·글꼴 값을 달아 둔 웹 도구입니다.
디자인 시스템 38곳 · 화면 기법 77개2026-10-21 저장소 데이터에서 센 항목 수 · 38곳 중 25곳은 값을 「근사」로 표시
내 담당기획 · 수록 항목 고르기 · 관측과 근사를 나누는 표시 규칙 · 데이터 정리와 화면을 만드는 Python 스크립트 · 도구 화면 구현
고르고 · 비교하고 · 복사해서 붙이기
포트폴리오, 제품 소개 페이지, 초대장, 발표 자료, 제품 출시 페이지 가운데 만들 화면을 고릅니다.
같은 작은 소개 화면을 프리셋 33개, 실제 서비스 53곳의 색과 글꼴로 바꿔 보며 고릅니다.
카드의 「이렇게 지시」 문구, 디자인 설명 문서, 색 변수 묶음을 복사 버튼으로 가져갑니다.
Cursor, Claude Code, v0 같은 AI 코딩 도구에 붙여 넣어 그 톤으로 화면을 만들게 합니다.
2026년 6월 첫 커밋 · 7월 화면 정리
AI 코딩 도구에 깔끔하게, 고급스럽게라고 부탁해도 원하는 화면이 나오지 않았습니다. 참고하던 사이트와 기법은 여기저기 흩어져 있었습니다.
분위기를 형용사로 설명하는 대신 색·글꼴·모서리 둥글기 값을 넘기기로 했습니다. 디자인 시스템마다 설명 문서와 색 변수 묶음을 만들어 카드에 붙였습니다.
공개 페이지에서 직접 확인한 값은 「관측」, 확인하지 못한 값은 「근사」로 표시했습니다. 카드마다 공식 사이트 링크를 달아 정확한 값은 원본에서 확인하게 했습니다.
같은 방식을 기법, 프리셋, 효과, 실제 서비스 시스템, 화면 요소 카드에도 적용해 도구 6개를 한 메뉴로 묶었습니다. 모든 화면이 파일 하나짜리 HTML이라 설치 없이 바로 열립니다.
2026-10-21 저장소 데이터 기준
숫자는 각 도구 화면이 읽는 데이터 목록을 브라우저에서 열어 센 항목 수입니다. 디렉토리 38곳은 전체 목록이 아닌 골라 담은 목록이고, 실제 서비스 53곳의 값은 VoltAgent가 MIT 라이선스로 공개한 디자인 설명 문서 모음에서 가져왔습니다.
디렉토리 카드 · Linear 예시
디렉토리 카드를 펼치면 AI 코딩 도구에 붙여 넣을 글이 세 가지 나옵니다. 복사 버튼을 누르면 그대로 클립보드에 담깁니다.
문서 첫머리에 관측인지 근사인지와 출처 주소를 적어, 붙여 넣은 쪽에서도 값이 얼마나 정확한지 알 수 있습니다.
| 도구 | 하는 일 | 항목 |
|---|---|---|
| 화면 요소 | 「입력하면 사라지는 회색 글자」처럼 생김새를 적으면 그 요소의 이름과 만들 때 쓸 단서를 찾아 줍니다. | 56 |
| 카탈로그 | HTML·디자인 기법마다 언제 쓰는지, AI에게 어떻게 말하면 되는지, 출처를 적었습니다. 기본 35 · 고급 25 · 원칙 17. | 77 |
| 프리셋 | 같은 작은 소개 화면을 프리셋마다 그려서 눈으로 비교합니다. 스타일 16 · 색 4 · 글꼴 4 · 배치 4 · 움직임 3 · 테마 2. | 33 |
| 효과 | 배경 17 · 로더 13 · 우주 11 · 카드 9 · 글자 8 · 데이터 6 · 스크롤 2. 화면 밖으로 나가면 멈추고, 기기에서 움직임 줄이기를 켜면 꺼집니다. | 66 |
| 시스템 | Claude, Stripe, Linear, Apple 같은 실제 서비스 53곳의 색·글꼴·그림자 값으로 같은 소개 화면을 그립니다. | 53 |
| 디렉토리 | 다크 SaaS 9 · 게임 7 · 에디토리얼 6 · 한글·미니멀 6 · 어워드·3D 5 · 데이터 대시보드 5. 카드마다 복사용 문서와 색 변수. | 38 |
실제 도구 화면 (로컬에서 띄워 찍은 캡처)
각 사이트의 공개 페이지, 디자인 리뷰, 갤러리에서 본 값만 관측으로 적었습니다. 나머지는 근사로 표시하고, 정확한 값은 카드의 공식 링크에서 확인하게 했습니다.
VoltAgent가 MIT 라이선스로 공개한 문서 모음에 있는 색·모서리·그림자 값을 썼습니다. 서비스 전용 글꼴은 비슷한 글꼴 계열로 바꿔 보여 줍니다.
디렉토리 카드의 움직임 미리보기는 셰이더·3D 장면 전환·패럴럭스 같은 10가지 유형으로 비슷하게 연출했습니다. 실제 사이트의 움직임을 그대로 옮긴 화면과는 다릅니다.
외부 브랜드의 상표와 디자인은 각 권리자의 것입니다. VDS는 그림이나 파일을 다시 배포하지 않고 공식 문서로 연결만 합니다. 디렉토리 형식은 MIT 라이선스로 공개된 한국 디자인 시스템 디렉토리를 참고했습니다.
카탈로그와 디렉토리는 데이터 목록(JSON)을 Python 스크립트가 읽어 HTML로 만듭니다. 항목을 더할 때는 데이터만 고치고 스크립트를 다시 돌립니다.
| 데이터 | 카탈로그 목록 77개 · 디렉토리 목록 38개 (저장소의 _publish 폴더) |
| 생성 스크립트 | 카탈로그용 · 디렉토리용 Python 스크립트 각 1개 |
| 화면 | 첫 화면과 도구 6개, 모두 파일 하나짜리 HTML. 밝은 화면과 어두운 화면 전환 |
| 외부 의존 | Google Fonts(IBM Plex Sans KR · Noto Serif KR · JetBrains Mono)뿐, 프레임워크 없음 |
| 공개 | GitHub Pages · 저장소 루트를 그대로 서비스 |
| 범위 | 디렉토리 38곳은 골라 담은 목록이라 빠진 디자인 시스템이 있습니다. |
| 정확도 | 색·글꼴·색 변수는 공개 페이지를 보고 만든 근사값이 섞여 있어, 정확한 값은 공식 링크에서 확인해야 합니다. |
| 다음 | 디렉토리 확장 · 묶음 더 잘게 나누기 · 프리셋과 효과 2차 정리 |