인스타 저장 16개 정리

레이어 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 코드를 쓰면 옆에서 바로 결과를 보는 온라인 에디터. 웹·앱보다는 문서 작업용

자주 받는 질문 답변(설명글 전체) 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, 브라우저에서 바로 실행

바이브코딩으로 만든 앱, 고객 정보 다 털린다 — 문답 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에 「내 앱 보안 점검해줘」 한 마디. 해커보다 먼저 내 앱을 털어보기