인스타 저장 32개 정리

재료: 오픈버스(Openverse) 3

1. 규모 — wikimedia_audio 3,986,828 + jamendo 644,709 + freesound 591,898 = 합계 5,223,435개
2. 검색 — api.openverse.org로 키 없이 검색, 예) q=whoosh&license=cc0&source=freesound → Deep Whoosh #1(3.2초)·Swosh swoosh whoosh air sound(0.5초)·Swipe Whoosh(0.4초)
3. 제한 — 익명 사용은 하루 약 200회 검색

도구 3개 3

1. 1openverse-sfx 스킬 — 영상 컷마다 효과음을 붙이고, 출처 표기가 필요한 소리는 credits.txt에 자동 기록. 규칙: 라이선스 필터 필수(cc0·by·pdm, freesound·jamendo만), 소리 종류당 검색 1번, 코드로 소리 합성 금지(실제 녹음만), 판단은 librosa·ffmpeg ebur128·파형으로 측정해서 하고 '소리 좋다'고 말하지 말 것
2. 2오퍼스 사운드 레이어 — 저작권 걱정 없는 CC0 효과음 1,139개(19종)를 미리 받아 두고 타임라인에 맞춰 배치 후 완성 파일까지 검사(깃허브 별 79)
3. 3이어샷(earshot) — 맞는 소리가 없으면 코드로 새 효과음을 만들고 들어 보며 고침. 효과음 252개 내장, 클로드 코드에 MCP로 연결, 깃허브 별 4천 개

레이어 1 · 프런트엔드 & UI 디자인 — 핵심 스킬 9

흠잡을 데 없는 디자인을 설계하다

1. 01frontend-design — 과감한 레이아웃 설계
2. 02impeccable — OKLCH 색상 · 4px 그리드 엄수
3. 03taste-skill — 감각적인 고급 모션
4. 04animate — 미세 전환의 움직임 곡선
5. 05design-motion — 세 가지 관점의 모션 검수
6. 06theme-factory — 색상 스케일 자동 생성
7. 08playwright-mcp — 실제 브라우저 · 스크린샷 피드백
8. 09brandkit — 한 번에 만드는 브랜드 보드
9. 10designer-skills — 전문적인 개발 전달 명세

레이어 2 · 이미지 · 그래픽 · 영상 — 크리에이티브 8

시각 중심의 프로그래밍 에셋

1. 11nano-banana — 터미널에서 이미지 생성
2. 12banana-claude — 5요소 프롬프트 공식
3. 13canvas-design — 편집형 벡터 · PNG 출력
4. 14algorithmic-art — 수학으로 만드는 흐름장 아트
5. 15remotion-superpowers — React 기반 영상 스튜디오
6. 16claude-remotion — 타이틀의 순차 등장 · 타이핑
7. 17blender-motion — Python 기반 3D 장면
8. 18ae-motion — JSX 기반 After Effects 스크립트

레이어 3 & 4 · 제품 · 인터랙션 — 시스템 스킬 9

사용자에게 반응하는 시스템

1. 19hi-fi-mockups — 캔버스 위 고해상도 UI 목업
2. 20brandkit-sync — 재사용하는 브랜드 가이드
3. 21slide-decks — 프레젠테이션 템플릿 구성
4. 23token-budgets — 컨텍스트 윈도 토큰 계산
5. 24turn-repair — 끊어진 대화 흐름 복구
6. 25generative-ui — 반응형 위젯 렌더링
7. 26progressive-reveal — 멀티모달 단계별 정보 공개
8. 27frustration-checks — 사용자 감정에 맞춘 대응
9. 28feedback-loops — 수용된 인라인 수정 기록

레이어 5 · 행동 · 프롬프트 — 프롬프트 스킬 8

행동을 설계하는 프롬프트

1. 29system-structure — 명확한 프롬프트 구조
2. 30persona-architecture — 성격과 말투의 범위 설정
3. 31tone-calibration — 격식부터 친근함까지 톤 조정
4. 32emotional-design — 갈등 · 불편 상황 완화
5. 33template-design — 매개변수형 중괄호 템플릿
6. 34few-shot-patterns — 예외 사례를 담은 예시 패턴
7. 35chain-of-thought — 단계별 추론 흐름 추적
8. 36constraint-spec — 엄격한 출력 형식 제한

레이어 6 · 신뢰 · 평가 — 보안 스킬 6

시스템을 지키는 방어와 절차

1. 37guardrails — 허용 범위를 벗어난 요청 차단
2. 38trust-calibration — 인용 · 증거로 신뢰도 조정
3. 39transparency-patterns — 답변의 확신 수준 추적
4. 40quality-rubrics — 통과 · 실패 평가 기준표
5. 41task-decomposition — 목표를 에이전트 역할로 분해
6. 42handoff-protocols — 사람에게 전달할 문맥 파이프라인

AI 때문에 피해가 아니라 덕을 보는 디자이너가 되려면 10

1. 1기본적인 미술사조 — 내가 원하는 이미지가 어떤 미술사조와 가까운지 알아야 AI에게 훨씬 정확하게 방향을 전달할 수 있음
2. 2비주얼 이론 — 게슈탈트 법칙처럼 사람이 이미지를 어떻게 인식하는지에 대한 기본 이론은 알고 있는 게 좋음
3. 3서구권 비주얼의 큰 흐름 — 최소 1950년대부터 현재까지 어떤 비주얼이 유행했는지 알아두면 원하는 시대와 스타일을 훨씬 구체적으로 지정할 수 있음
4. 4카메라 앵글 명칭 — Low Angle · High Angle · Eye Level 같은 명칭을 알면 AI 이미지의 구도를 더 정확하게 컨트롤할 수 있음
5. 5다양한 형용사 — 비주얼을 설명할 단어가 많을수록 좋음. 머릿속 느낌을 언어로 바꾸는 능력이 AI를 쓸 때 중요해짐
6. 6텍스처의 출처 — 종이 · 필름 · 스캐너 · 잉크처럼 내가 원하는 질감이 어디에서 만들어지는지 알아야 함
7. 7조명 용어 — 빛의 방향이나 강도, 조명의 종류를 설명할 수 있어야 원하는 분위기를 더 정확하게 만들 수 있음
8. 8Design Aesthetics 명칭 — Brutalism · Y2K · Japandi처럼 스타일에 붙은 이름을 알면 길게 설명해야 할 비주얼을 짧은 단어로 전달할 수 있음
9. 9영어 관용색명 — 단순히 Red · Blue가 아니라 원하는 컬러를 더 구체적인 이름으로 표현하면 도움이 됨 (AI가 컬러코드를 정확히 읽게 되면 필요 없어짐)
10. 10레이아웃 명칭 — 레이아웃이나 구성 방식을 언어로 설명할 수 있으면 AI에게 원하는 결과물을 훨씬 구체적으로 지시할 수 있음

결론

1. AI 시대에는 머릿속 비주얼을 얼마나 정확한 언어로 바꿀 수 있는지가 중요해짐

UI 영감 3

1. 01designspells.com — 마이크로 인터랙션 모음 — 앱과 웹에서 쓰이는 작은 인터랙션과 세련된 UI 디테일. 모바일 · 애니메이션 · 토스트 같은 카테고리로 골라 봄
2. 02Inspo.page — 실제 사이트의 레이아웃 영감 — 히어로 섹션 같은 실제 웹사이트의 구조 · 카피 · 레이아웃 패턴 모음. 구성이 막힐 때 참고
3. 03ogfolio.com — 오픈 그래프 이미지 모음 — 링크 공유 때 보이는 미리보기 이미지를 한눈에. 내 사이트 공유 이미지 만들 때 레퍼런스

컴포넌트 · 에셋 3

1. 04kexsio.com — UI 컴포넌트 복사해서 붙이기 — 라이브로 미리 보고 코드를 복사하거나 원본 AI 프롬프트로 다시 만들 수 있음. 컴포넌트 · 템플릿 · SVG 탭
2. 05svgl.app — SVG 로고 · 아이콘 라이브러리 — 구글 · 노션 · 도커 같은 서비스의 SVG 로고를 복사하거나 내려받기 (로고는 각 브랜드 사용 규정 확인)
3. 06IconKitchen — 앱 아이콘을 한 번에 — 아이콘 · 이미지 · 텍스트 · 이모지로 안드로이드 · iOS · 웹용 아이콘을 만들어 내려받기

공유 · 출시 · 문서 3

1. 07pinggy.io — 내 로컬 서버를 공개 URL로 — 내 컴퓨터에서 돌아가는 웹앱을 설치 없이 명령어 한 줄(SSH)로 외부에 공유. HTTP · TCP · UDP · TLS 터널 지원 (무료 범위·요금은 사이트 확인)
2. 08app-mockup.com — 앱스토어 스크린샷 만들기 — 기기 화면에 제목과 이미지를 넣어 앱스토어용 스크린샷 제작. 워터마크 없이 만들 수 있다고 소개됨
3. 09overleaf.com — LaTeX 문서와 이력서 제작 — 브라우저에서 LaTeX 코드를 쓰면 옆에서 바로 결과를 보는 온라인 에디터. 웹·앱보다는 문서 작업용

기본 탄성·변형 4

1. 01스쿼시 앤 스트레치(Squash & Stretch) — 눌리고 늘어나는 탄성
2. 02바운스(Bounce) — 공처럼 통통 튀는 움직임
3. 03텍스트 스크램블(Text Scramble) — 뒤섞인 문자가 하나씩 완성
4. 04모핑(Morphing) — 하나의 모양이 다른 모양으로

인·아웃 모션 4

등장과 퇴장을 자연스럽게

1. 05스케일 업·다운(Scale Up/Down) — 커졌다 작아지는 크기 변화
2. 06슬라이드 인·아웃(Slide In/Out) — 미끄러져 들어오고 나가는 효과
3. 07페이드 인·아웃(Fade In/Out) — 서서히 나타나고 사라짐
4. 08와이프 인·아웃(Wipe In/Out) — 한쪽부터 드러나고 가려짐

속도 조절 2

같은 움직임, 다른 느낌

1. 09리니어(Linear) — 처음부터 끝까지 일정한 속도
2. 10이즈 인아웃(Ease In-Out) — 천천히 출발→빠르게 이동→부드럽게 정지(같은 거리·같은 시간)

텍스트·효과 4

1. 11타이프라이터(Typewriter) — 타이핑하듯 한 글자씩 등장
2. 12글리치(Glitch) — 순간적으로 어긋나는 화면
3. 13파티클(Particles) — 입자들이 흩어지고 모이는 효과
4. 14디졸브(Dissolve) — 두 장면이 겹치며 부드럽게 전환

리듬 모션 4

1. 15웨이브(Wave) — 물결처럼 이어지는 움직임
2. 16리플(Ripple) — 중심에서 바깥으로 퍼지는 파문
3. 17순차 애니메이션(Stagger) — 시간차를 두고 차례로 움직임
4. 18트레일(Trail) — 움직임 뒤로 따라오는 잔상

기본 모션 4

1. 19회전(Rotation) — 중심을 축으로 빙글 도는 움직임
2. 20펄스(Pulse) — 박동처럼 커졌다 작아짐
3. 21흔들림(Wiggle) — 좌우로 잘게 흔들림
4. 22궤도 운동(Orbit) — 중심 주위를 따라 도는 움직임

자주 받는 질문 답변(설명글 전체) 10

1. 실제 게임인가 AI 영상인가 — 실제 게임. 클립은 빌드에서 직접 땀. 전체 플레이 영상 곧 공개
2. AI 쓰나 — 도구로 씀. Claude Code=코딩, ElevenLabs=효과음, Tripo=3D 모델. 개발은 혼자
3. 프로젝트 좀보이드 같나 — Kenshi·RimWorld·RDR2·S.T.A.L.K.E.R.·Project Zomboid에서 영감, 하지만 별개 게임. 아이소메트릭 시점 기준, 1인칭도 계획
4. 출시일 — 12월 비공개 플레이테스트, 정식 출시는 2027년 4월 희망. 신청 링크는 프로필
5. 스팀 — 곧 올라옴
6. 모바일·콘솔 — PC 먼저 → 축소판 모바일. 콘솔은 출시 후 가능성만(약속 X)
7. 멀티플레이 — 먼저 4~8인 협동. 플레이어마다 자기 서버 호스팅 가능. 이후 확장
8. 왜 렉 걸리나 — 지금은 최적화 안 한 코드 그대로고 눈(snow) 시스템이 무거움. 출시 전 최적화
9. 협업 — 지금은 안 함. 핵심은 혼자 만들고 필요하면 나중에 팀
10. 링크 — 디스코드·패트리온·플레이테스트 링크는 프로필

게임 내용 3

1. 조종 — 직접 빗자루 타기 또는 자동조종(autopilot)
2. 경기 — 7대7, 골 넣기·블러저 치기·스니치 잡기
3. 배경 — 관중석 뒤로 탑 24개짜리 성, 빛나는 스테인드글라스 창, 경기장 위 떠 있는 촛불

제작 정보 2

1. 기술 — Three.js
2. 시간·비용 — 1시간 22분, API 요금 기준 $34.75

내용 4

1. 장소 — 떠 있는 섬 위 3D 픽셀아트 놀이공원
2. 트랙 — 3개, 물리 계산과 에어타임 있음
3. 탑승 — 1인칭 시점으로 놀이기구 타기
4. 기술 — Three.js r128, 브라우저에서 바로 실행

게임 정보 4

1. 장르 — 오프로드 시뮬레이션·싱글·협동
2. 수집 — 신비한 장소와 야생동물을 카메라에 담아 도감 채우기
3. 커스텀 — 취향에 맞는 장비와 외형으로 차량 정비
4. 아트 — 로우폴리 파스텔 톤 — 숲·호수 반사·붉은 협곡·설산 폭포·별 뜬 사막 밤

바이브코딩으로 만든 앱, 고객 정보 다 털린다 — 문답 6개 6

1. 1진짜 그렇게 털려? — 보안업체 베라코드가 AI가 짠 코드를 시험했더니 45%에서 해킹당할 구멍이 나옴. 두 번에 한 번꼴
2. 2AI한테 검사시키면 되잖아? — 그 구멍을 만든 게 바로 그 AI. 자기가 짠 코드는 자기 눈엔 멀쩡해 보임 — 자기 숙제를 자기가 채점하는 셈
3. 3그럼 누가 잡아? — 클라우드플레어가 사내 해킹 탐지 시스템의 출발점이 된 AI 스킬을 그대로 공개. 무료, 이번 주 깃허브 1위 (설명글: 별 5.3만·MIT 라이선스)
4. 4뭐가 다른데? — 한 AI가 구멍을 찾으면 다른 AI가 「그거 아니다」를 증명하려고 덤빔. 반박을 버틴 것만 보고서에 올라감 (설명글: 그 전에 앱 구조와 입력이 들어오는 곳을 지도로 먼저 그림)
5. 5한 번 돌리면 끝이야? — 아니요. 클라우드플레어가 직접 재보니 한 번에 찾는 건 전체의 절반쯤. 출시 전마다 여러 번 돌리고, 결과는 사람이 한 번 더 확인
6. 6어떻게 쓰는데? — 설치 한 줄 하고, 클로드 코드 같은 코딩 AI에 「내 앱 보안 점검해줘」 한 마디. 해커보다 먼저 내 앱을 털어보기