Google Stitch 소개
Google Stitch는 Google Labs가 만든 AI 기반 UI 디자인 도구입니다. 자연어 프롬프트, 손으로 그린 와이어프레임, 스크린샷을 받아 편집 가능한 사용자 인터페이스와 실제로 동작하는 프론트엔드 코드(HTML/CSS)로 바꿔줍니다. 공식 소개는 이를 "AI 네이티브 소프트웨어 디자인 캔버스" 로 표현하며, 디자인과 개발 사이의 간극을 좁히는 것을 목표로 합니다. 화면 생성에는 Google DeepMind의 Gemini 계열 모델이 쓰이고, 결과물은 Figma로 내보내 추가로 다듬거나 코드를 그대로 복사해 사용할 수 있습니다. 한 화면에 그치지 않고, 한 프로젝트 안에서 연관된 여러 화면을 생성한 뒤 인터랙션 핫스팟으로 연결하면 백엔드 코드를 짜기 전에 클릭해 볼 수 있는 멀티스크린 프로토타입까지 만들 수 있습니다. 현재 베타로 제공됩니다.
이 게시물은 Stitch를 쓰는 네 가지 경로를 순서대로 정리합니다. (1) 웹 앱에서 효과적으로 프롬프팅하고 디자인 모드를 고르는 법, (2) 에이전트가 읽는 디자인 시스템 문서인 DESIGN.md, (3) IDE와 CLI를 Stitch에 붙이는 MCP 연동과 Agent Skills, (4) 코드에서 직접 호출하는 Stitch SDK입니다.
Vibe Design과 Vibe Coding
Stitch가 내세우는 두 가지 작업 방식은 Vibe Design 과 Vibe Coding 입니다.
- Vibe Design 은 추상적인 느낌과 미적 표현을 구체적인 시각 시스템으로 옮깁니다. "playful", "industrial", "Japandi", "retro-futurist" 같은 비전문 형용사로 앱의 분위기를 정의하고, 원하는 감정 반응(예: "따뜻하고 친근한", "신뢰감 있고 정돈된")을 묘사하면 그에 맞는 색 구성과 타이포그래피 위계를 만들어냅니다. 생성된 이미지, 아이콘, 컴포넌트는 정해진 미적 테마에 맞게 자동으로 조율됩니다.
- Vibe Coding 은 자연어를 사실상 소스 코드처럼 쓰는 방식입니다. 고수준 설명을 시맨틱한 HTML/CSS로 변환하고(prompt-to-code), "버튼을 크게", "헤더에 검색창 추가" 같은 대화형 반복으로 수정하며(iterative refinement), 손으로 그린 스케치를 그대로 코드화된 화면으로 바꿉니다(sketch-to-UI).
효과적인 프롬프팅
Stitch는 명확하고 구체적인 지시에서 가장 좋은 결과를 냅니다. 공식 프롬프팅 가이드는 다음과 같은 실전 원칙을 제시합니다.
고수준에서 시작해 세부로 좁히기. 복잡한 앱은 큰 개념으로 시작한 뒤 화면별로 파고드는 편이 좋습니다. 예를 들어 "마라톤 러너를 위한 앱" 이라는 고수준 프롬프트에서 출발해, "커뮤니티 참여, 파트너 찾기, 훈련 조언, 주변 대회 검색이 가능한 마라톤 러너용 앱" 처럼 핵심 기능을 덧붙이면 더 나은 출발점을 얻습니다.
형용사로 분위기 설정하기. 형용사는 색, 폰트, 이미지에 영향을 줍니다. "활기차고 격려하는 피트니스 트래킹 앱" 이나 "미니멀하고 집중을 돕는 명상 앱" 처럼 감성 언어를 넣습니다.
화면 단위로 반복하며 구체적으로 바꾸기. 한 번에 한 화면, 한두 가지 변경에 집중합니다. 무엇을 어떻게 바꿀지 명시하고(예: "로그인 화면의 주요 CTA 버튼을 더 크게, 브랜드의 기본 파란색으로"), 대상 요소나 화면을 특정합니다.
테마 제어(색/폰트/보더). 특정 색을 요청하거나("기본 색을 포레스트 그린으로") 분위기 기반으로 팔레트를 지정할 수 있고("따뜻하고 포근한 색감으로"), 폰트와 버튼/컨테이너 스타일도 조정합니다("모든 버튼을 완전한 라운드 코너로").
이미지와 언어. 이미지의 스타일이나 내용을 구체적으로 지시하고, 테마 색을 바꿀 때 이미지도 함께 맞출지 명시합니다("테마를 라이트 오렌지로 바꾸고 모든 이미지와 아이콘도 새 색 구성에 맞춰줘"). 텍스트 언어도 프롬프트로 전환합니다("모든 문구와 버튼 텍스트를 스페인어로").
Stitch 공식 문서에 정리된 형태를 참고하면, 프롬프트를 아이디어(Idea)/테마(Theme)/콘텐츠(Content) 세 층으로 구조화하는 것이 권장됩니다.
IDEA: "The Pacing Project"라는 러닝 팟캐스트를 위한 랜딩 페이지
THEME: 모던하고 엣지있는 고대비. 하드한 각도의 흑백 사용
CONTENT: "경주와 페이스 조절에 관한 이야기와 교훈"을 담은 히어로 섹션과
팟캐스트 플랫폼 링크
기기 유형(Device Types): App과 Web
프로젝트를 시작할 때 Stitch는 App과 Web 중 하나를 고르게 합니다. 이는 단순한 화면 크기 선택이 아니라 기본 설계 표면(Primary Design Surface)을 정하는 것으로, Stitch가 레이아웃, 내비게이션, 위계를 해석하는 방식을 좌우합니다. App 모드는 세로 스크롤, 하단 정렬 내비게이션(엄지 영역), 쌓인 콘텐츠에 최적화되고, Web 모드는 가로로 넓은 배치, 상단 내비게이션, 다중 컬럼 그리드에 최적화됩니다. 그래서 App 모드로 만든 화면을 데스크톱에서 보면 커다란 앱처럼 보이고, 반대로 Web 모드 디자인을 폰 화면에 욱여넣으면 네이티브 앱에 기대되는 요소들이 사라지기 쉽습니다.
플랫폼을 옮길 때는 크기만 조절하지 말고 번역(translate)하는 편이 좋습니다. 모바일 앱을 웹으로 옮긴다면 기존 화면 이미지를 참조 이미지로 삼아 무엇을 바꿔야 하는지를 프롬프트로 명시합니다(예: 하단 탭 바와 상단 메뉴를 상단 가로 내비게이션 하나로 통합, 카드형 히어로를 좌우 분할 레이아웃으로, 2열 모바일 그리드를 4열 데스크톱 그리드로). 같은 프로젝트 안에서 기기 유형을 바꾸는 것도 가능하지만 약간의 수동 조정이 필요합니다. 앱 프로젝트에서 웹을 생성하면 웹 콘텐츠가 앱 프레임 안에 담기므로, Preview 메뉴의 Device Type으로 대상 뷰(예: Desktop)로 전환하고 프레임 높이를 충분히 늘려 숨어 있던 나머지 레이아웃을 드러내는 것이 요령입니다.
디자인 모드
Stitch는 단일 모델이 아니라 여러 디자인 엔진의 묶음입니다. 생성 설정의 디자인 모드 선택기에서 작업에 맞는 엔진을 고릅니다.
- Thinking with 3 Pro : Gemini 3 Pro 기반으로 속도보다 추론(reasoning)을 우선합니다. 내비게이션 흐름, 위계, 색 상호작용까지 따져 생성하므로 시간이 조금 더 걸리지만, 복잡한 대시보드나 뉘앙스가 중요한 랜딩 페이지 같은 프로덕션 후보에 적합합니다.
- Redesign (Nano Banana Pro) : Vibe Design에 특화된 모드로, 낡은 인터페이스에 특정 미적 방향을 입혀 현대화하는 데 강합니다. 아래의 스타일 단어 은행에서 키워드를 조합하면 효과가 큽니다.
- 2.5 Pro : Gemini 2.5 Pro 기반으로 코드 품질과 디자인 충실도가 특히 높습니다. 같은 프롬프트를 Thinking with 3 Pro와 2.5 Pro에 각각 넣어 서로 다른 해석을 A/B로 비교하는 활용이 유용합니다.
- Fast : 빠른 와이어프레이밍과 Figma 내보내기에 최적화된 모드로, 초기 스케치를 Figma로 옮겨 수동으로 다듬을 때 적합합니다.
Redesign 모드가 활용하는 스타일 단어 은행(Style Word Bank) 은 명확한 아트 디렉션 키워드로 시각 언어를 정의합니다.
- 레이아웃/구조 : Bento Grid(모듈형 카드 격자), Editorial(잡지풍 대형 세리프 헤딩), Swiss Style(그리드 중심의 명료함), Split-Screen(수직 분할)
- 질감/깊이 : Glassmorphism(반투명 서리 유리), Claymorphism(부드러운 3D 점토 느낌), Skeuomorphic(가죽/종이/금속 등 실물 질감), Grainy/Noise(필름 그레인)
- 분위기/시대 : Brutalist(날것의 고대비), Cyberpunk(다크 모드 네온), Y2K(2000년대 초반의 크롬/버블), Retro-Futurism(80년대 신스웨이브)
- 색/대비 : Duotone(두 색 대비), Monochromatic(단색 계열), Pastel Goth(파스텔과 검정 대비), Dark Mode OLED(순흑 배경 #000000)
DESIGN.md: 에이전트가 읽는 디자인 시스템 문서
모든 프로젝트에는 색, 폰트, 간격, 컴포넌트 스타일 같은 시각적 정체성이 있습니다. 전통적으로 이 정보는 Figma 파일, 브랜드 PDF, 혹은 디자이너의 머릿속에 있어 AI 에이전트가 읽을 수 없었습니다. DESIGN.md 는 이를 사람과 에이전트가 모두 읽고 편집하고 강제할 수 있는 평문 디자인 시스템 문서로 바꾼 것으로, 코딩 에이전트용 AGENTS.md 의 디자인 짝이라고 볼 수 있습니다.
| 파일 | 읽는 주체 | 정의하는 것 |
|---|---|---|
| README.md | 사람 | 프로젝트가 무엇인지 |
| AGENTS.md | 코딩 에이전트 | 프로젝트를 어떻게 빌드하는지 |
| DESIGN.md | 디자인 에이전트 | 프로젝트가 어떤 모습과 느낌이어야 하는지 |
Stitch 같은 디자인 에이전트가 DESIGN.md를 읽으면, 생성하는 모든 화면이 동일한 색 팔레트, 타이포그래피, 컴포넌트 패턴을 따릅니다. 이 문서가 없으면 각 화면이 따로 놀지만, 있으면 서로 어울리는 하나의 제품처럼 보입니다. DESIGN.md는 고정된 설정 파일이 아니라 디자인이 진화하면 함께 변하는 살아있는 산출물입니다.
구조적으로 모든 DESIGN.md는 두 개의 층으로 이뤄집니다. 상단 YAML front matter에는 기계가 읽는 디자인 토큰(정확한 hex 값, 폰트 속성, 간격 스케일)이, 마크다운 본문에는 사람이 읽는 디자인 근거가 담깁니다. 토큰은 에이전트에게 정확한 값을, 산문은 그 값이 존재하는 이유를 전달합니다. 스펙 자체는 규정이 아니라 공통 기반을 지향해, 알 수 없는 섹션이나 커스텀 토큰도 거부하지 않고 받아들입니다.
DESIGN.md를 만드는 방법은 세 가지입니다. 에이전트에게 생성 맡기기 (분위기를 묘사하면 토큰과 가이드라인으로 번역), 브랜딩에서 유도하기 (기존 브랜드의 URL이나 이미지를 주면 팔레트/타이포/스타일을 추출), 직접 손으로 작성하기 (표준 마크다운과 YAML만으로 정확한 선호를 인코딩) 입니다. 아래는 다크 테마 생산성 앱을 위한 최소 예시입니다.
---
name: DevFocus Dark
colors:
primary: "#2665fd"
secondary: "#475569"
surface: "#0b1326"
on-surface: "#dae2fd"
error: "#ffb4ab"
typography:
body-md:
fontFamily: Inter
fontSize: 16px
fontWeight: 400
rounded:
md: 8px
---
# Design System
## Overview
개발자 생산성 도구를 위한 집중형 미니멀 다크 인터페이스.
깔끔한 선, 낮은 시각적 잡음, 높은 정보 밀도.
## Colors
- **Primary** (#2665fd): CTA, 활성 상태, 핵심 인터랙션 요소
- **Surface** (#0b1326): 페이지 배경
- **On-surface** (#dae2fd): 다크 배경 위의 본문 텍스트
## Do's and Don'ts
- 주요 색은 가장 중요한 액션에만 아껴 사용할 것
- 같은 화면에서 라운드와 샤프 코너를 섞지 말 것
- 모든 텍스트에 4:1 명암비를 유지할 것
DESIGN.md는 기존 코드베이스에서 가져오거나(import), 전용 CLI로 스펙 준수 여부를 검증(validate)하고 린팅 규칙을 적용할 수 있습니다. 또한 뒤에서 설명할 MCP 도구로 프로젝트에 업로드해 곧바로 디자인 시스템으로 변환할 수도 있습니다.
MCP 연동: IDE와 CLI를 Stitch에 연결
Stitch는 Model Context Protocol(MCP) 서버를 제공해 Cursor, Antigravity, Gemini CLI, Claude Code 같은 AI 도구가 여러분의 Stitch 프로젝트를 직접 다루게 합니다. 대부분의 MCP 서버가 로컬 파일이나 스크립트를 다루는 로컬 서버인 것과 달리, Stitch는 클라우드에 있는 원격(Remote) MCP 서버 라는 점이 특징입니다. 서버 주소는 https://stitch.googleapis.com/mcp 이며, 원격이기 때문에 에이전트가 여러분을 대신해 디자인을 수정할 권한이 있는지 확인하는 안전한 핸드셰이크가 필요합니다.
인증은 두 가지를 지원합니다. API 키 는 Stitch 설정(Settings) 페이지에서 발급하는 영구 키로, 가장 빠르게 연결하는 방법입니다. OAuth 는 수동 키 입력을 지원하지 않는 클라이언트나, 디스크에 영구 비밀을 저장하기 어려운 제로 트러스트/일회성 환경에 적합합니다. 대부분의 경우 API 키가 가장 간단합니다.
API 키 방식은 설정 페이지의 API Keys 섹션에서 "Create API Key" 로 키를 만든 뒤 클라이언트 설정에 넣으면 됩니다. 발급된 키는 절대 공개 저장소나 클라이언트 코드에 노출하지 않도록 주의합니다(Stitch는 공개 노출이 감지된 키를 자동으로 비활성화합니다). 클라이언트별 설정 예시는 다음과 같습니다.
Claude Code:
claude mcp add stitch --transport http https://stitch.googleapis.com/mcp \
--header "X-Goog-Api-Key: api-key" -s user
Cursor(.cursor/mcp.json):
{
"mcpServers": {
"stitch": {
"url": "https://stitch.googleapis.com/mcp",
"headers": { "X-Goog-Api-Key": "YOUR-API-KEY" }
}
}
}
Gemini CLI는 전용 확장을 설치합니다.
gemini extensions install https://github.com/gemini-cli-extensions/stitch
OAuth 방식은 gcloud CLI에 의존합니다. Google Cloud SDK를 설치한 뒤 사용자 로그인과 애플리케이션 기본 자격증명(ADC) 로그인을 각각 수행하고(gcloud auth login, gcloud auth application-default login), 프로젝트를 선택해 Stitch API를 활성화한 다음, 액세스 토큰을 발급해 프로젝트 ID와 함께 클라이언트 헤더(Authorization: Bearer ..., X-Goog-User-Project: ...)에 넣습니다. 액세스 토큰은 보통 1시간이면 만료되므로, 클라이언트가 "Unauthenticated" 를 반환하면 토큰을 다시 발급해 설정 파일을 갱신해야 합니다.
인증이 끝나면 에이전트는 다음 도구들을 사용할 수 있습니다.
- 프로젝트 관리 :
create_project,get_project,list_projects - 화면 관리 :
list_screens,get_screen - AI 생성 :
generate_screen_from_text(모델GEMINI_3_FLASH또는GEMINI_3_1_PRO선택),edit_screens,generate_variants - 디자인 시스템 :
create_design_system,update_design_system,list_design_systems,apply_design_system, 그리고 DESIGN.md 파일을 올려 디자인 시스템으로 바꾸는 2단계 도구upload_design_md와create_design_system_from_design_md
Reference 문서 기준으로 도구는 총 14개이며, 각 도구에는 읽기 전용(read-only)인지 상태를 바꾸는지(destructive)를 알려주는 MCP 어노테이션이 붙어 있어, 클라이언트가 읽기 도구는 자동 승인하고 생성/수정 도구는 사용자 확인을 받도록 돕습니다.
Agent Skills: 코딩 에이전트에 디자인 능력 더하기
Stitch Design Skills 는 코딩 에이전트를 화면 생성, 디자인 시스템 추출, 다중 페이지 사이트 빌드, 디자인의 React 컴포넌트 변환 같은 능력으로 확장하는 에이전트 지시(instruction) 모음입니다. Agent Skills 표준을 지원하는 에이전트(Gemini CLI, Claude Code, Cursor, Antigravity)면 어디서든 동작합니다. 프로젝트 디렉토리에서 다음 한 줄이면 세 개의 플러그인(stitch-design, stitch-build, stitch-utilities)에 담긴 13개 스킬이 한 번에 설치됩니다.
npx plugins add google-labs-code/stitch-skills --scope project --target claude-code
--target 값을 cursor, gemini-cli 등으로 바꿔 대상 에이전트를 선택하고, 특정 스킬만 필요하면 npx skills add google-labs-code/stitch-skills 로 골라 설치할 수도 있습니다. 다만 스킬들은 서로 의존하는 경우가 많아(예: code-to-design 는 extract-static-html, extract-design-md, upload-to-stitch 를 필요로 함) 전체 설치가 안전합니다.
스킬은 앞서 설명한 MCP 서버를 통해 Stitch와 통신하므로, MCP 설정을 마친 뒤 "List my Stitch projects" 같은 프롬프트로 연결을 확인합니다. 이후 흐름은 대략 이렇습니다. enhance-prompt 스킬이 막연한 아이디어를 플랫폼 지정, 번호 매긴 섹션, 구체적 UI/UX 키워드, 색 역할이 포함된 디자인 시스템 블록을 갖춘 생성용 프롬프트로 다듬고, 그 프롬프트로 화면을 생성하면 잠시 뒤 히어로 섹션, 기능 카드, 내비게이션, 푸터를 갖춘 완성된 화면이 나옵니다. 이 밖에도 코드와 디자인을 오가는 라운드트립(code-to-design), 하나의 개념에서 웹사이트 전체를 반복 생성(build in a loop), 워크스루 영상 생성 같은 스킬이 제공됩니다.
Stitch SDK로 코드에서 직접 호출하기
MCP 설정 파일이나 CLI 없이 TypeScript/JavaScript 코드에서 바로 디자인을 생성/편집/관리하고 싶다면 Stitch SDK(@google/stitch-sdk) 를 사용합니다. stitch 싱글턴이 API 키로 Stitch에 연결되고, stitch → Project → Screen 으로 이어지는 유창한(fluent) 객체 API를 제공합니다. 각 객체가 다음 단계로 이동하는 방법을 알고 있어, 프로젝트를 만들고 화면을 생성한 뒤 HTML과 이미지 URL을 받아오는 흐름이 짧습니다.
import { stitch } from "@google/stitch-sdk";
// 1. 프로젝트 생성 (환경 변수 STITCH_API_KEY 자동 인식)
const project = await stitch.createProject("My First App");
// 2. 화면 생성
const screen = await project.generate(
"A simple login page with email and password fields",
);
// 3. 결과물 가져오기
const htmlUrl = await screen.getHtml();
const imageUrl = await screen.getImage();
생성된 화면은 그대로 두는 데 그치지 않고 편집과 변형이 가능합니다. screen.edit("배경을 어둡게 하고 사이드바를 추가해줘") 처럼 자연어로 수정하고, screen.variants(...) 로 여러 변형을 한 번에 받습니다. 변형은 개수(variantCount, 1~5), 창의성 범위(creativeRange: REFINE, EXPLORE, REIMAGINE), 바꿀 측면(aspects: LAYOUT, COLOR_SCHEME, IMAGES, TEXT_FONT, TEXT_CONTENT)으로 방향을 조절합니다.
const variants = await screen.variants("Try different color schemes", {
variantCount: 3,
creativeRange: "EXPLORE",
aspects: ["COLOR_SCHEME", "LAYOUT"],
});
SDK는 에이전트와 오케스트레이션 스크립트에서의 사용도 신경 썼습니다. stitch.listTools() 로 사용 가능한 도구를 확인하고 stitch.callTool("create_project", { title: "..." }) 처럼 MCP 도구를 직접 호출할 수 있으며, 두 가지 에이전트 프레임워크 통합이 기본 포함됩니다. Vercel AI SDK 용 stitchTools() 는 모델이 프로젝트/화면 생성 도구를 자율적으로 호출하도록 붙여주고, Google의 Agent Development Kit(ADK) for TypeScript 용 stitchAdkTools() 는 Stitch 도구를 ADK FunctionTool 형태로 반환합니다.
import { generateText, stepCountIs } from "ai";
import { google } from "@ai-sdk/google";
import { stitchTools } from "@google/stitch-sdk/ai";
const { text, steps } = await generateText({
model: google("gemini-2.5-flash"),
tools: stitchTools(),
prompt: "Create a project and generate a modern dashboard with a stat card",
stopWhen: stepCountIs(5),
});
설치는 npm으로 하고, Vercel AI SDK 통합을 함께 쓰려면 ai 패키지도 설치합니다. 인증은 환경 변수 STITCH_API_KEY(API 키) 또는 STITCH_ACCESS_TOKEN(OAuth 액세스 토큰)과 프로젝트 ID를 사용하며, StitchToolClient({ apiKey: "..." }) 처럼 생성자에 직접 넘길 수도 있습니다. 오류는 StitchError 로 던져지며 AUTH_FAILED, NOT_FOUND, PERMISSION_DENIED, RATE_LIMITED, NETWORK_ERROR, VALIDATION_ERROR, UNKNOWN_ERROR 코드로 구분됩니다.
npm install @google/stitch-sdk
npm install @google/stitch-sdk ai # Vercel AI SDK 통합 사용 시
한 가지 유의할 점은, 저장소가 밝히듯 이 SDK 프로젝트 자체는 공식적으로 지원되는 Google 제품이 아니라는 것입니다(Stitch 서비스는 Google Labs가 제공하는 베타 제품입니다). 도입 시 이 점을 함께 감안하는 것이 좋습니다.
가용성과 요금
Stitch는 현재 무료로 제공되며, 일일 크레딧 한도 안에서 사용합니다. 크레딧은 UTC 자정에 초기화되고 잔량은 설정 페이지에서 확인할 수 있습니다. 언어는 영어로 제공되며, Gemini를 사용할 수 있는 국가의 만 18세 이상 사용자가 이용할 수 있습니다. 생성되는 코드는 Tailwind를 포함한 깔끔한 시맨틱 HTML/CSS이고, Figma로 내보낼 때는 오토 레이아웃(Auto Layout), 이름이 지정된 컴포넌트 레이어, 편집 가능한 텍스트 필드를 갖춘 구조로 만들어져 협업에 바로 이어집니다.
라이선스
Stitch SDK는 Apache-2.0 라이선스로 공개되어 있어 개인 및 상업적 목적으로 자유롭게 사용할 수 있습니다. Stitch API의 사용은 Google 약관 및 정책의 적용을 받습니다.
Stitch 문서 사이트
Stitch SDK GitHub 저장소
더 읽어보기
-
Hashbrown: Angular와 React 기반 WebApp에 AI 기반 생성형 UI 기능을 쉽게 구현할 수 있는 오픈소스 프레임워크
-
Tambo AI: React 기반의 생성형 UI(Generative UI)를 구축할 수 있는 오픈소스 SDK
-
A2UI(Agent-to-User Interface): AI 에이전트와 사용자 간의 풍부하고 상호작용 가능한 UI 생성을 위한 프로토콜/표준
이 글은 GPT 모델로 정리한 글을 바탕으로 한 것으로, 원문의 내용 또는 의도와 다르게 정리된 내용이 있을 수 있습니다. 관심있는 내용이시라면 원문도 함께 참고해주세요! 읽으시면서 어색하거나 잘못된 내용을 발견하시면 덧글로 알려주시기를 부탁드립니다. 
파이토치 한국 사용자 모임
이 정리한 이 글이 유용하셨나요? 회원으로 가입하시면 주요 글들을 이메일
로 보내드립니다! 텔레그램(Telegram)이나 Slack/Discord/Teams/Dooray/GoogleChat 등으로도 새 글 알림을 받으실 수 있습니다. 
아래
쪽에 좋아요
를 눌러주시면 새로운 소식들을 정리하고 공유하는데 힘이 됩니다~ 