01
용도를 고릅니다
포트폴리오, 랜딩 페이지, 피치덱처럼 만들 화면의 목적을 먼저 정합니다.
목적부터VIBE DESIGN STUDIO / DESIGN TOOLKIT
감각을
시스템으로.
VDS는 화면을 만들 때 필요한 기법, 스타일, 효과, 레퍼런스를 모은 개인 디자인 시스템입니다. 원하는 용도를 고르고, 화면의 톤을 비교하고, 바로 쓸 수 있는 지시문과 스니펫으로 작업을 시작하세요.
기법 87 · 프리셋 32 · 효과 41 · 참조 시스템 55
UI 요소 찾기⌘ / Ctrl K
모양이나 쓰임을 적으면, VDS에서 사용할 이름과 구현 단서를 찾습니다.
01 / visual reference
필요한 UI를
한 번에 봅니다.
카드마다 요소의 모습, 작동 방식, 이름, 관련 자료를 함께 둡니다. 검색은 좁힐 때만 쓰고, 처음에는 전체를 훑어보세요.
02 / how VDS works
VDS는 이렇게 씁니다.
기법을 찾고, 스타일을 비교하고, 바로 작업에 가져갑니다. 필요한 도구만 골라 한 화면을 완성하세요.
02
스타일을 입힙니다
프리셋과 레퍼런스에서 글꼴, 색, 밀도, 분위기를 비교해 화면의 톤을 잡습니다.
비교해서03
바로 만듭니다
카탈로그의 지시문과 효과 스니펫을 가져와 작업 중인 화면에 적용합니다.
지시문까지03 / VDS tools
필요한 도구를 고릅니다.
VDS의 각 도구는 화면을 만드는 다른 순간을 돕습니다. 기법을 찾고, 톤을 비교하고, 효과를 더하고, 좋은 사례를 참고하세요.
HTML & design techniques
카탈로그
87개 HTML·디자인 기법을 보고, 바로 쓸 지시문을 찾습니다.
↗ style presets프리셋
같은 화면을 서로 다른 스타일로 비교하고 톤을 고릅니다.
↗ live effects효과
CSS·모션·데이터 효과를 라이브로 보고 스니펫을 가져갑니다.
↗ design systems시스템
제품별 화면 구성과 컴포넌트 스타일을 비교합니다.
↗ reference archive레퍼런스
실제 서비스와 스튜디오의 화면 구성을 참고합니다.
↗VDS 사용법 원하는 결과를 먼저 정하고, 카탈로그와 프리셋에서 방향을 잡은 뒤, 필요할 때 효과와 레퍼런스로 화면을 다듬습니다.
각 도구의 “이렇게 지시” 문구와 스니펫은 작업 중인 프로젝트에 바로 가져갈 수 있습니다.