분류 전체보기161 Claude Design 상세페이지 만들기 Claude Design으로 이커머스 상세페이지 만들기Claude Design을 활용해 이커머스 상품 상세페이지를 만드는 과정을 다루었다.단순히 한 장짜리 상세페이지를 만드는 것이 아니라,상품 기획안 작성, 제품 이미지 수집, AI 이미지 생성, 레퍼런스 반영,플랫폼별 시안 제작, 템플릿화, PDF 내보내기까지 연결되는 흐름이었다.전체 흐름상세페이지 기획 구조 질문↓상품 상세페이지용 md 기획안 생성↓제품 이미지 수집↓Claude Design에 기획안과 이미지 업로드↓첫 번째 상세페이지 생성↓애니메이션 상세페이지와 실제 이커머스 상세페이지 차이 이해↓네이버 / 쿠팡 / 아마존용 3가지 시안 생성↓AI로 디테일 컷과 연출 이미지 추가 생성↓레퍼런스 상세페이지 이미지 수집↓상세페이지 퀄리티 개선↓3가지 시안.. 2026. 7. 6. Claude Design - 프레젠테이션 만들기 Claude Design Claude Design으로 제안서 / 프레젠테이션 만들기전체 흐름Claude Design 접속↓Slide Deck 선택↓프로젝트 생성↓제안서 내용 기획↓레퍼런스 이미지 첨부↓슬라이드 생성↓이미지 추가 및 수정↓Present 모드로 확인↓HTML / PDF / PPTX로 공유↓디자인 시스템 적용↓GitHub 스킬 연결↓고급 애니메이션 슬라이드 생성Claude Design에서 PPT 만들기 시작하기Slide Deck 선택Claude 메인 페이지에서 Claude Design으로 들어간 뒤,이번에는 Product Prototype이 아니라 Slide Deck을 선택한다.기본 설정항목내용작업 유형Slide Deck프로젝트 이름ppt-design디자인 시스템처음에는 사용하지 않음Speak.. 2026. 7. 5. Claude Design - 디자인 시스템 연결하기 https://cactus.tistory.com/306 PretendardPretendard 프리텐다드 Pretendard 프리텐다드 글꼴 다운로드 일본어 버전 다운로드 GitHub에서 보기 폰트 제작 및 운영 클래스 ..cactus.tistory.comClaude Design 디자인 시스템 세팅, 폰트 업로드, design.md 활용하기전체 흐름디자인 시스템 업로드↓미싱 폰트 확인↓Pretendard 폰트 업로드↓디자인 시스템 리뷰↓생성된 HTML 테스트↓새 프로젝트에 디자인 시스템 적용↓다른 주제의 앱 생성↓design.md 파일 만드는 방법 학습 디자인 시스템 업로드 후 첫 확인Claude Design이 디자인 시스템을 읽는다Airbnb UI Kit과 design.md 파일을 넣으면Claude De.. 2026. 7. 4. Claude Design - AI로 UI를 만들고, 디자인 시스템까지 연결하는 흐름 1. Claude Design은 무엇을 해주는가?Claude Design은 단순히 이미지를 만들어주는 도구가 아니다.프롬프트를 입력하면 UI를 생성하고,그 결과물을 HTML, CSS, JavaScript 기반의 동작 가능한 화면으로 만들어주는 도구에 가깝다.즉, 결과물이 정적인 이미지가 아니라웹사이트나 앱처럼 구조화된 프로토타입으로 만들어진다.2. 실습에서 만든 예시요청한 앱이번 강의에서는 아주 간단한 프롬프트로 숙소 앱을 만들었다.기본 설정항목내용앱 유형iOS 모바일 앱스타일Airbnb 스타일주제개인 숙소를 관리하거나 예약하는 앱톤앤매너따뜻하고 부드러운 느낌화면 구성전체 사용자 플로우인터랙션애니메이션 포함이미지Unsplash 이미지 사용모드라이트 모드 / 다크 모드 3. Claude Design의 첫 .. 2026. 7. 4. The Art of Noticing by Rob Walker 저자와 책 소개《The Art of Noticing》의 저자 Rob Walker는 디자인, 기술, 비즈니스, 예술, 소비문화에 대해 글을 써온 저널리스트이자 칼럼니스트다. 그는 오랫동안 사람들이 사물과 브랜드, 공간, 일상적인 경험에 어떻게 의미를 부여하는지를 관찰해왔다. 그래서 그의 글은 단순히 정보를 전달하기보다, 우리가 익숙해서 지나쳐버리는 것들을 다시 보게 만드는 데 초점이 있다.Rob Walker는 뉴욕 School of Visual Arts의 Products of Design 프로그램에서도 가르쳤으며, 그가 학생들에게 던진 “주의를 기울이는 연습을 해보라”는 과제가 이 책의 중요한 출발점이 되었다. 그는 관찰을 특별한 재능이 아니라 훈련할 수 있는 태도로 본다. 더 잘 보는 사람, 더 깊이 듣.. 2026. 7. 3. 디자이너/초보자가 Claude Code를 이용해 바이브 코딩하는 법 https://code.claude.com/docs/en/commands Commands - Claude Code DocsComplete reference for commands available in Claude Code, including built-in commands and bundled skills.code.claude.com “AI에게 단순히 시키는 게 아니라,계획·맥락·레퍼런스를 잘 주면 훨씬 좋은 결과가 나온다.”즉:좋은 프롬프트좋은 컨텍스트좋은 계획이 3개가 Claude Code 품질을 결정한다는 내용입니다.1. Think / Think Hard / Ultra ThinkClaude에게“얼마나 깊게 생각할지” 지정하는 키워드입니다.쉽게 말하면:think → 조금 깊게 생각think hard.. 2026. 5. 10. Claude Code - Claude.md Claude Code 강의 핵심 정리1. 워크플로우의 핵심 사이클기능을 만들 때마다 반복하는 3단계 사이클이 있습니다.설계 → 만들기 → 확인 을 계속 반복합니다. 코드를 바로 짜게 하지 말고, Plan 모드로 탐색·설계를 먼저 한 뒤 Normal 모드로 구현하는 것이 핵심입니다.2. Git은 처음부터 쓰는 습관이 중요기능을 만들면 코드가 바뀌기 때문에, 변경사항 추적과 되돌리기를 위해 Git을 처음부터 사용해야 합니다. 나중에 습관을 들이는 건 어렵기 때문에 처음 시작할 때부터 git init으로 시작하는 것이 중요합니다.3. 컨텍스트 윈도우 관리컨텍스트 윈도우는 컴퓨터의 RAM과 같은 유한한 자원입니다. 가득 차면 AI 성능이 저하되고, 초반 지시를 잊어버리거나 실수가 늘어납니다.잘 관리하는 3가지 .. 2026. 5. 2. 클로드 코드에서 권한 모드란? 클로드 코드의 4가지 권한 모드1. Default 모드 (기본)각 도구를 처음 사용할 때마다 권한을 요청합니다가장 안전하지만 번거롭습니다2. Accept Edit 모드 (파일 편집 자동 승인)파일 편집/생성 권한은 자동으로 승인다른 작업(Bash 명령어 등)은 여전히 물어봅니다개발할 때 효율적 (파일을 자주 수정하기 때문)3. Plan 모드 ⭐ (가장 중요)쓰기 작업을 하지 않음 (파일 생성/수정 불가)분석과 계획만 제시실제 구현 전에 전략을 검토할 수 있습니다4. Bypass Permission Mode (위험)모든 권한을 무시하고 무조건 진행안전한 환경에서만 사용 권장Plan 모드를 쓰는 이유?Plan 모드는 읽기 전용 모드로, 클로드가 파일을 분석할 수 있지만 수정이나 명령 실행은 불가능합니다. 코.. 2026. 4. 11. Claude Code 처음 설치 https://code.claude.com/docs/en/overview Claude Code overview - Claude Code DocsClaude Code is an agentic coding tool that reads your codebase, edits files, runs commands, and integrates with your development tools. Available in your terminal, IDE, desktop app, and browser.code.claude.com Claude Code가 뭔지부터 — Cursor랑 뭐가 다른가처음 Claude Code를 접했을 때 가장 헷갈렸던 건 "이게 Cursor랑 뭐가 다르지?"였습니다. 둘 다 AI로 코드를 도와주.. 2026. 4. 5. 이전 1 2 3 4 ··· 18 다음
