# 디자이너가 Claude Code를 사용하는 법 [유튜브]

> Clean Markdown view of GeekNews topic #25973. Use the original source for factual precision when an external source URL is present.

## Metadata

- GeekNews HTML: [https://news.hada.io/topic?id=25973](https://news.hada.io/topic?id=25973)
- GeekNews Markdown: [https://news.hada.io/topic/25973.md](https://news.hada.io/topic/25973.md)
- Type: news
- Author: [neo](https://news.hada.io/@neo)
- Published: 2026-01-20T11:16:02+09:00
- Updated: 2026-01-20T11:16:02+09:00
- Original source: [youtube.com](https://www.youtube.com/watch?v=HcLz3ikw-n0)
- Points: 13
- Comments: 0

## Summary

디자이너들이 **Claude Code 같은 CLI 에이전트**를 작업대처럼 다루며, 빠르게 만들고 고치는 ‘AI 워크벤치’ 문화가 확산되고 있습니다. Cursor의 비주얼 에디터와 Leva 컨트롤 패널은 프롬프트 왕복 없이 즉시 조정·확인을 가능하게 해, 디자인 감각을 코드로 옮기는 과정을 훨씬 짧게 만듭니다. AI 에이전트들이 개발자를 넘어 점점 다양한 분야로 확산해 나가는 모습을 보여주는게 인상적이네요.

## Topic Body

- 디자이너가 Claude Code 같은 **CLI 기반 에이전트**를 작업대처럼 쓰며, 빠르게 만들고 고치는 방식 확산  
- Cursor의 **비주얼 에디터**로 패딩·간격 같은 미세 조정을 즉시 확인해, 프롬프트 왕복을 줄임  
- 필요한 UI 효과를 못 찾으면 작은 **플레이그라운드/스튜디오**를 직접 만들어 옵션을 시험하고, 확정된 코드를 본 프로젝트로 가져오는 방식 정착  
- 멋진 레퍼런스는 URL로 넣어 기법을 **분석·적용**하게 만들고, 학습과 구현을 동시에 진행하는 패턴도 강화  
- 전역/프로젝트 Claude.md는 **슬림하게** 유지하고, 필요하면 하위 폴더로 쪼개 컨텍스트 비대화를 줄이는 운영 원칙 확립  
  
---  
- Claude Code를 코딩 도구가 아니라 **컴퓨터**처럼 다루는 관점이 떠오르고 있음  
  
### 2026년 디자이너의 AI 워크벤치  
- 정답 세팅보다 **스킬(근육) 강화**가 우선이라는 문제의식이 확산  
- 사람마다 작업대의 도구 벽이 달라지고, “정답 스택” 집착은 시간 낭비로 이어짐  
- 도구 자체가 바뀌어도 통하는 **철학/접근법**이 더 오래감  
  
### Cursor: 인앱 브라우저와 비주얼 에디터  
- 비주얼 에디터가 “즉시 조정→즉시 확인”을 가능하게 해 미세 튜닝 속도 상승  
- 패딩 같은 값을 정확히 몰라도 UI에서 직접 조정하며 반복 최적화 가능  
- 프롬프트 왕복 대신 화면에서 바로 만져보는 방식이 디자이너에게 더 자연스러움  
- VS Code 확장이 터미널 공포를 낮추는 진입로로 작동  
- 앱 UI의 마우스/스크롤 내비게이션이 터미널 대비 생산성 차이를 만듦  
  
### 못 찾으면 만들어버리기: 플레이그라운드 전략  
- 원하는 인터랙션이 없으면 해당 요소만 실험하는 **개인용 스튜디오**를 직접 구축  
- 호버 비디오에 붙일 waveform 사운드 on/off 애니메이션을 위해 옵션 실험 환경 제작  
- 마음에 드는 상태를 고른 뒤, 코드를 가져와 본 프로젝트 컴포넌트에 연결  
- 한번 만든 효과/파라미터를 다른 아이콘·요소로 재사용하며 확장  
- 영상 업로드 후 3D로 보여주는 hologram projector 같은 도구도 같은 방식으로 제작  
  
### 말로 설명하기 어려운 효과를 다루는 법  
- 개발자들이 쓰는 **코드 용어/명명법**을 익히면 모델이 효과를 더 잘 매칭  
- “glitchy”, “CRT scan lines” 같은 표현이 코드 구현으로 바로 이어짐  
- 멋진 예시의 출처(URL)를 넣고 기법을 찾아 적용하게 만들면 학습 속도 상승  
  
### 외부 링크를 넣고 그대로 구현하기: 멀티 레이어 섀도우  
- 보더 대신 여러 개의 섀도우 레이어로 **보더+입체감**을 만드는 기법 채택  
- 레이어 수(예: 3개)를 기반으로 더 강한 효과를 원하면 5개로 확장하는 식의 변형 가능  
- 버튼/컨테이너 등 요소별로 레이어 수를 달리해 미묘한 차이를 설계  
- 같은 이론을 다양한 UI에 반복 적용하며 스타일 일관성 강화  
  
### 스킬/서브에이전트로 취향을 시스템화  
- Yakob, Jay Tompkins 같은 레퍼런스 다발을 학습 재료로 삼아 **시각/인터랙션 감사 에이전트** 구축  
- Compounding Engineering 플러그인이 스킬/에이전트 구성 작업을 빠르게 만드는 촉매 역할 수행  
- 레퍼런스 기반 감사를 자동화하면 수동 “리뷰-개선” 루프를 반복 운영 가능  
- 한 스킬에 모든 디자이너 취향을 다 넣으면 쓸모가 떨어지고, 의도적으로 **수술하듯** 좁혀야 함  
- “항상 미묘함” 같은 편향을 경계하고, 강조/배경 디테일을 구분하는 기준 필요  
  
### Leva 컨트롤 패널: 코드에서 디테일을 잡는 손잡이  
- React/Next.js에서 **Leva**로 파라미터를 노브/슬라이더로 노출해 즉시 조정 가능  
- 호버 코너 라인 애니메이션의 지속 시간·트레이서 타이밍 같은 값을 실시간으로 튜닝  
- “Leva 붙이고, 내가 조절하고 싶은 것들을 연결”이라는 자연어 지시만으로 세팅 자동화  
- 어떤 파라미터가 필요한지 몰라도 “관련 노브를 만들어라”로 시작해 탐색 가능  
  
### Claude.md 운영 원칙: 슬림, 분리, 국소화  
- 전역 Claude.md에는 진짜 보편 규칙만 넣고, 프로젝트 Claude.md도 과도한 백과사전화를 피해야 함  
- 지속 메모리 문서가 비대해지면 컨텍스트가 더러워지고 작업 품질 저하  
- 하위 디렉터리별 Claude.md로 영역별 지침을 분리해 필요한 문맥만 불러오기  
- “UI 컨트롤 필요” 같은 트리거 문장을 전역 규칙으로 두고, 그때 Leva를 자동 채택하는 식의 패턴화 가능  
  
### 도구 선택 태도: 세팅 최적화 루프 탈출  
- 도구 추천은 몇 달만 지나도 무의미해지고, 콘텐츠형 “10배 생산성” 메시지는 과잉 최적화 루프를 유발  
- 비기술 디자이너일수록 조언을 문자 그대로 따르기 쉬워, **원리 중심** 접근이 방어선 역할 수행  
- 기타 이펙터/앰프처럼 정답보다 취향과 목적이 스택을 결정  
- “시스템을 최적화하느라 실제 만들기를 못하는 상태”가 가장 큰 손실  
  
### 예산이 제한된 개인의 투자 전략  
- 무료 체험을 적극 활용하고, 도구 간 중복을 줄여 소음을 낮추는 전략 필요  
- Claude Code $20 한도에 자주 걸리면 Factory 같은 $20 구독을 더해 모델 접근을 **분산**하는 조합 가능  
- Factory에서 Gemini 3 Pro로 UI 생성, Claude Code에서 큰 작업 수행 같은 왕복 운용 가능  
- Claude Code $100 티어는 한도 스트레스를 낮춰 흐름을 지키는 효과 발생  
- Claude Code를 Obsidian 정리, Linear 정리 같은 작업까지 확장해 “컴퓨터”처럼 쓰는 효율 추구  
  
### Tuneup Day: 실험을 일정으로 고정  
- 반나절을 “생산 금지, 세팅 개선만 허용”으로 두고 실험과 정비를 집중 실행  
- 플러그인 설치, 폴더 정리, 신규 워크플로 시험, 인터뷰/글 정독을 한 날에 몰아넣는 방식 정착  
- 다음 튜닝업 데이에 할 일을 리스트로 쌓아두고, 당일에 골라 처리하는 운영 습관 형성  
- 실험 속도 상승과 과잉 최적화 루프 회피에 기여

## Comments



_No public comments on this page._