inspiration112 클로드 코드에서 권한 모드란? 클로드 코드의 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. [잘난웹디] html css 강좌 -4 레이아웃 HTML/CSS 강의 정리Lesson 4 — Inline 속성 이해하기1. Inline 요소란 무엇인가Inline 요소는 문장 안에서 글자처럼 동작하는 요소입니다.즉, 줄을 새로 만들지 않고 같은 줄에 계속 이어서 배치됩니다.예이 문장은 특정 단어를 강조한 문장입니다.결과이 문장은 특정 단어를 강조한 문장입니다.span은 문장 안에 들어가서 글자처럼 동작합니다.이것이 Inline 요소의 핵심 특징입니다.2. Block vs Inline 다시 이해하기구분Block 요소Inline 요소줄 시작항상 새 줄 시작같은 줄에 표시너비부모 너비 전체콘텐츠만큼width적용 가능적용 안됨height적용 가능적용 안됨배치세로 스택가로 나열3. Inline 요소 예시대표적인 인라인 태그spanaimgembiinputlabe.. 2026. 3. 19. [잘난웹디] html css 강좌 | 1강 html css 기초 입문 (코딩기초 ) HTML/CSS 기초Lesson 1 — HTML / CSS 기초 소개1. 강의 목표이 강의의 목적은 다음과 같다.HTML / CSS 기초 이해ChatGPT를 활용한 학습 방법 익히기직접 웹페이지를 만들어보는 실습 경험기초부터 실무 활용까지 빠르게 이해하기특히 ChatGPT를 학습 도우미로 사용하는 방식을 보여주는 것이 핵심이다.2. ChatGPT를 활용한 학습 방법강의에서는 ChatGPT에게 역할(Role)을 먼저 부여한다.예시 프롬프트너는 HTML/CSS로 웹페이지를 제작하는 20년차 프론트엔드 개발자다.강의 경험도 풍부하고 깔끔한 코드를 작성한다.HTML/CSS 기초부터 실전까지1시간 안에 마스터할 수 있는 커리큘럼을 설계해줘.이후 학습 방식ChatGPT에게 역할 부여필요한 내용 요청답변 검토부족한 .. 2026. 3. 19. Cursor + Figma MCP를 사용할 때 중요한 원칙 Talk to Figma MCP로 할 수 있는 것과 어려운 것요소 생성, 스타일링, 오토레이아웃, 텍스트 수정 기능 이해하기MCP는 피그마를 전부 조작하는 도구가 아니라, 제한된 몇 가지 기능만 수행할 수 있는 도구라는 점입니다.즉, 우리가 피그마에서 평소 하던 모든 작업을 AI가 대신해주는 것은 아닙니다.하지만 그 안에서도 어떤 작업은 꽤 잘하고, 어떤 작업은 아직 제한적입니다.단순히 명령어를 나열해서 외우는 것이 목적이 아니라,무엇을 만들 수 있는지어디까지 자동화할 수 있는지무엇은 기대하면 안 되는지이 범위를 감각적으로 이해하는 것이 중요합니다.먼저 기억할 점 - 일부 기능은 더 이상 지원되지 않습니다예전에 있던 몇몇 명령어는 현재 피그마 API 정책 변경 때문에 더 이상 지원되지 않는 기능입니다.이.. 2026. 3. 18. 디자인 토큰 추출하기에 유용한 툴 정리 CSS Peeper: 컬러와 스타일 값을 뽑아내는 용도Peek: 사이트의 시각 시스템을 한눈에 빠르게 파악하는 용도Superposition: 디자인 토큰과 시스템 관점으로 더 구조적으로 읽는 용도CSS Peeper는 뽑는 도구, Peek는 훑는 도구, Superposition은 구조화해서 보는 도구조금 더 풀어쓰면,1. CSS Peeper웹사이트에 실제 사용된 색상, 폰트, 버튼 스타일 등을 구체적인 값 중심으로 추출할 때 좋습니다.2. Peek웹사이트의 컬러 팔레트, 타이포 스케일, 폰트 구조를 한눈에 빠르게 파악할 때 좋습니다.3. Superposition웹사이트를 디자인 토큰과 시스템 관점으로 해석하고, 나중에 Figma Variables나 코드 구조로 연결할 때 좋습니다.1. CSS Peeper.. 2026. 3. 17. Chrome DevTools(Inspector)로 분석하면서 Figma로 클론 디자인하기 1. Inspector에서 반드시 봐야 하는 5가지 핵심 정보많은 디자이너들이 Inspector를 열어도 font-size나 color만 보고 끝나는 경우가 많습니다.하지만 실제 UI를 이해하려면 아래 5가지를 반드시 봐야 합니다.① Layout 구조 (가장 중요)DevTools → Elements확인할 것container widthpaddingmarginflex / gridgap예시.container { max-width: 1200px; margin: 0 auto; padding: 0 24px;}이것을 Figma에서는Frame width: 1200Auto layout: horizontalPadding: 24Alignment: center처럼 Auto Layout 구조로 복원해야 합니다.핵심 질문이.. 2026. 3. 17. Talk to Figma MCP Tools 다음 내용은 Talk to Figma MCP 서버가 제공하는 기능 목록입니다. https://github.com/grab/cursor-talk-to-figma-mcp GitHub - grab/cursor-talk-to-figma-mcp: TalkToFigma: MCP integration between AI Agent (Cursor, Claude Code) and Figma, allowingTalkToFigma: MCP integration between AI Agent (Cursor, Claude Code) and Figma, allowing Agentic AI to communicate with Figma for reading designs and modifying them programmatical.. 2026. 3. 17. Cursor에서 Figma MCP 채널 연결 및 자동화 방법 1. Cursor에서 Figma 채널 연결하기Cursor 채팅창에서 Figma MCP 서버 채널에 접속해야 합니다.실행 방법Cursor 실행채팅창에 다음 입력join channel [채널명]메시지 표시Joining Figma channel연결 승인 메시지 표시→ 여기서 Join 선택매번 승인 메시지가 뜨는 이유Cursor 기본 설정이 항상 확인하도록 되어 있기 때문해결 방법Use allow list클릭하면다음부터 승인 메시지가 나오지 않습니다2. 연결 성공 확인 방법연결이 성공하면 다음과 같은 메시지가 표시됩니다.Joined channel이 메시지가 나오면 MCP 서버 연결 완료3. AI가 명령을 이해 못할 때 해결 방법가끔 AI가 다음 명령을 일반 채팅으로 오해하는 경우가 있습니다.예join chann.. 2026. 3. 17. 이전 1 2 3 4 ··· 13 다음
