본문 바로가기

전체 글115

Claude Code, MCP, Vibe Coding, Fimga — 서로 어떤 관계일까? Vibe Coding, MCP, Claude Code, Codex, Cursor. AI로 무언가를 만드는 과정에서 자주 접하게 되는 용어들이다.같은 맥락에서 등장하다 보니 비슷한 개념처럼 느껴지지만 역할은 다르다. Vibe Coding은 AI와 작업하는 방식이고, Claude Code·Codex·Cursor 같은 AI Coding Agent는 실제 작업을 수행하는 도구다. MCP는 AI가 외부 도구와 데이터를 활용할 수 있도록 연결하는 표준이다. 이 차이를 알고 나면 각각의 관계도 훨씬 단순해진다. 1. Vibe Coding은 AI와 일하는 방식Vibe Coding은 특정 프로그램이 아니라 자연어로 원하는 결과를 설명하고, AI가 만든 결과를 확인하며 수정해 나가는 작업 방식이다.예를 들어 코드를 처음부.. 2026. 8. 14.

Claude 프롬프트 작성법: 공식 가이드 기반 정리 왜 프롬프트 작성법을 따로 스터디해야 하는가같은 Claude를 쓰는데 어떤 사람은 30분 만에 보고서 초안을 뽑고, 어떤 사람은 두 시간을 씨름하고도 처음부터 다시 쓴다. 차이는 모델이 아니라 요청하는 방식에 있다.Anthropic은 Claude의 프롬프트 엔지니어링 공식 가이드를 통해 일관된 원칙을 제시하고 있다. 이 글에서는 그 원칙을 실무 관점에서 재구성하고, 실제로 자주 쓰는 패턴과 함께 정리한다. 단순한 팁 모음이 아니라, "왜 이 방식이 효과적인가"를 이해하는 데 초점을 두었다. 프롬프트 작성의 5가지 핵심 요소좋은 프롬프트는 다음 다섯 가지를 명확하게 담는다. 이 다섯 가지를 머릿속에서 체크하는 습관만 들어도 결과 품질이 눈에 띄게 달라진다.의도(Intent): 최종 결과물이 무엇인지 명확히.. 2026. 5. 11.

Claude로 발표 자료 만들기: 구조 설계부터 .pptx 출력까지 AI로 PPT를 만든다는 것의 진짜 의미Claude를 활용해 PPT를 만들기 시작하면 가장 먼저 깨닫게 되는 사실이 있다. 시간이 줄어드는 지점은 디자인이 아니라 "무엇을, 어떤 순서로 말할 것인가"를 결정하는 단계라는 점이다.발표 자료 제작에서 디자인이 차지하는 비중은 흔히 과대평가된다. 실제로 실무자들이 PPT 한 장을 두고 가장 오래 고민하는 부분은 "이 슬라이드에 무엇을 담을 것인가", "앞 슬라이드와 어떻게 연결할 것인가"이다. Claude가 가장 큰 효율을 내는 영역도 바로 여기다.이 글에서는 Claude의 동작 방식을 이해한 상태에서, 발표 자료 제작 워크플로우를 단계별로 정리한다. 각 단계마다 실제 프롬프트와 Claude의 응답 예시를 함께 다루므로, 처음 사용하시는 분도 그대로 따라 해보.. 2026. 3. 28.

[Gamma] 소셜부터 PPT 제작까지! AI 도구 '감마' 맛보기 AI 도구 Gamma를 활용하면 프레젠테이션, 문서, 소셜 콘텐츠, 웹사이트 제작까지 다양한 작업을 손쉽게 시작할 수 있습니다. 테스트해보니 감마는 고퀄리티 결과물을 완성하는 용도보다는 초안 작업에 최적화된 도구였습니다. 카피부터 AI 이미지 생성까지 빠르게 제공해 주기 때문에 초기 구상 단계에서 시간을 크게 절약하여 작업 효율을 높일 수 있습니다. 맛보기 예제Gamma는 가입자에게 무료로 체험해 볼 수 있도록 400크레딧을 제공합니다. (참고로 저는 프레젠테이션 8장 AI생성, 소셜 콘텐츠 4장 생성했더니 315크레딧이 남았습니다.)계정 생성 후 우측 상단에서 잔여 크레딧을 확인할 수 있습니다.이제 맛보기 예제로 소셜 콘텐츠를 제작해보겠습니다. 1. 좌측 상단 [+ 새로 만들기 AI] 버튼 클릭2. .. 2025. 5. 6.

[Galileo AI] 텍스트로 UI 디자인을 생성해주는 도구 이제 Galileo AI로 쉽고 빠르게 UI 디자인을 만들 수 있습니다! Galileo AI는 텍스트 설명을 기반으로 UI 디자인을 자동 생성해주는 AI 도구입니다. 본 글에서는 Galileo AI에 대한 주요 내용과 어떻게 사용하는지 알아보겠습니다. Galileo AI란 ?Galileo AI는 "한 줄의 텍스트로 아름답고 실용적인 UI 시안을 만들어주는 것"을 목표로 하는 AI 기반 UI 디자인 생성 플랫폼입니다. GPT와 유사한 대규모 언어 모델 기술을 활용하여 사용자의 자연어 요청을 이해하고, 수천 개의 UI 디자인 사례를 학습하여 맥락에 맞는 디자인 결과물을 제공합니다. 더 이상 복잡한 디자인 툴을 사용하거나 픽셀 단위로 수정할 필요 없이, 원하는 UI를 텍스트로 설명하기만 하면 됩니다. 주요 기.. 2025. 3. 16.

[Relume] 사이트맵부터 스타일가이드까지! 초기 작업 효율 높이기 Relume ?Relume는 웹사이트 초기 작업을 효율적으로 진행할 수 있도록 돕는 AI 기반 툴로, 사이트맵 생성, 와이어프레임 제작, 스타일 가이드 설정 등의 기능을 제공합니다. 이를 통해 디자이너와 개발자는 시간과 노력을 절약하면서도 고품질의 결과물을 빠르게 만들어낼 수 있습니다.Relume의 주요 기능① 사이트맵 생성 Relume의 AI는 간단한 프롬프트 입력만으로 사이트맵을 자동 생성합니다. 페이지 구조와 콘텐츠 흐름을 논리적으로 구성하며, 필요에 따라 수정 및 재구성이 가능합니다. ② 와이어프레임 제작 사이트맵을 기반으로 각 페이지의 와이어프레임을 자동 생성합니다. 생성된 와이어프레임은 반응형으로 설계되어 다양한 디바이스에서 미리보기 및 수정이 가능합니다.🔹 사용 예시: "스타트업을 위한.. 2025. 2. 23.

[Whisk] 구글의 새로운 생성형 AI 툴 ‘위스크(Whisk)’ 구글이 최근 선보인 '위스크(Whisk)'는 이미지 생성을 위한 AI 도구입니다. 기존의 AI 이미지 생성 도구들과는 달리, 위스크는 복잡한 텍스트 설명 없이도 사용자가 원하는 이미지를 만들어낼 수 있습니다. 위스크 사용 및 작동 방식위스크는 사용자가 세 가지 유형의 이미지를 입력하는 것으로 시작합니다.1. 주제(Subject) : 생성할 이미지의 중심이 되는 대상 (예: 사람, 동물, 사물)2. 장면(Scene) : 배경이 될 이미지 (예: 숲, 도시, 해변)3. 스타일(Style) : 원하는 예술적 스타일 (예: 수채화, 애니메이션, 팝아트)사용자가 이 세 가지 이미지를 업로드하면, 위스크 AI가 이를 분석하고 조합하여 새로운 이미지를 생성합니다. 사용자가 원할 경우 '세부 조정' 기능으로 수정할 .. 2025. 2. 17.

2025년 주목해야 할 UX/UI 디자인 트렌드 1. AI 기반 개인화 인터페이스 : AI-Driven Personalisation in UX/UIAI와 머신러닝 기술의 발전으로 사용자의 행동과 선호도를 실시간으로 분석하여 개인화된 인터페이스를 제공합니다. 이는 사용자 만족도를 높이고 참여도를 증가시킵니다. AI 기반 개인화 인터페이스는 사용자의 과거 행동, 검색 패턴, 구매 이력 등을 종합적으로 분석하여 각 개인에게 최적화된 콘텐츠와 기능을 제공합니다. 이를 통해 사용자는 더 직관적이고 효율적인 경험을 할 수 있으며, 기업은 고객 충성도와 전환율을 높일 수 있습니다.- 기업 사례:1. Microsoft Copilot은 사용자의 행동을 학습하여 더 스마트한 에이전트로 진화하고 있으며, 이는 곧 UI/UX 디자인의 표준이 될 것으로 예상됩니다.2. Am.. 2025. 1. 15.

[Figma] 작업 효율을 높여줄 유용한 피그마 플러그인 2025년 1월 기준으로 가장 유용한 Figma 플러그인을 소개합니다!Figma의 플러그인들은 작업 효율을 크게 높여줍니다. 프로젝트의 특성과 개인의 작업 스타일에 맞는 플러그인을 사용해보세요.대부분의 플러그인이 무료로 제공되지만, 일부는 프리미엄 기능을 위해 유료 옵션을 제공합니다. 디자인 자산 관련 플러그인Unsplash고품질 무료 이미지를 쉽게 삽입할 수 있습니다. (무료)https://www.figma.com/community/plugin/738454987945972471/unsplash Iconify100,000개 이상의 아이콘을 제공하는 거대한 아이콘 라이브러리입니다. (무료)https://www.figma.com/community/plugin/735098390272716381/iconify .. 2025. 1. 8.

[Framer] 프레이머 특장점과 활용 사례 Framer는 디자인부터 배포까지 웹사이트 제작 전 과정을 단일 플랫폼에서 해결하는 노코드 웹 빌더입니다. 피그마와 유사한 인터페이스로 디자이너와 개발자 모두에게 효율적인 협업 환경을 제공하면서도, 실제 동작하는 웹사이트를 코딩 없이 구현할 수 있는 것이 특징입니다. Framer 핵심 기능1. 디자인 & 프로토타이핑 - 피그마 파일 임포트 지원으로 기존 디자인 작업 연속성 유지- 드래그 앤 드롭으로 인터랙티브 애니메이션 구현 (스크롤 기반 효과, hover/click 상태 관리)- 반응형 디자인을 위한 그리드/스택 레이아웃 및 브레이크포인트 설정 + 출처 : https://www.framer.com/features/design/ Web Design Tools in FramerCreate stunning.. 2024. 12. 28.

[Figma] Component & Variants 1. Component컴포넌트는 재사용이 가능한 디자인 요소입니다. 버튼, 카드, 아이콘 등 자주 사용되는 UI 요소를 한 번 만들어 여러 곳에서 사용할 수 있어 작업에 효율적입니다.생성 방법① 컴포넌트로 만들 요소를 선택합니다.② 단축키 또는 우측 패널에서 "Create Component" 버튼을 클릭하면 선택했던 요소가 컴포넌트로 변환됩니다.단축키 - Mac: ⌥ Option + ⌘ Command + K- Windows: Ctrl + Alt + K컴포넌트 사용 및 복제 방법 - Assets 패널: 좌측 패널에서 Assets 탭을 클릭하여 컴포넌트를 찾고, 드래그 앤 드롭으로 디자인에 배치합니다.- Resource 툴 (Shift + I): 툴바의 Resource를 사용하여 컴포넌트를 선택하면 캔버스에.. 2024. 7. 19.

[Figma] Figma Slides Config 2024에서 발표된 새로운 기능 중 하나인 Figma Slides에 대해 알아보자. https://www.figma.com/ko-kr/slides/"Figma Slides는 Figma Design의 강력한 기능과 정확성을 사용하기 쉬운 프레젠테이션 도구와 결합하여 내러티브(서사)에 생기를 불어넣는 동시에 일관성을 향상시켜 줍니다." 1. 왜 만들었나? 디자이너와 팀원을 위한 프레젠테이션 도구로 활용하도록 만들었다.하지만 누구든 역할이나 디자인 경험 수준에 관계없이 Figma Slides를 사용하면 퀄리티 있는 슬라이드 구조를 쉽게 만들 수있다. 피그마를 사용하면서도 프리젠테이션 자료 제작이 필요할 때 바로 활용할 수 있어 유용하다. 2. Figma Slides 왜 사용할까? 템플릿을 선.. 2024. 7. 5.

[Figma] UX/UI Prototyping : 피그마에서 스와이프 인터랙션 구현하기 1-1. 페이지 스와이프페이지 스와이프 인터랙션은 사용자가 화면을 좌우로 스와이프하여 페이지나 콘텐츠를 이동하는 것을 의미합니다. 피그마에서는 다음과 같은 방법으로 구현할 수 있습니다.① 프레임 생성: 각 페이지를 나타내는 프레임을 생성합니다.② 프로토타입 설정: 프로토타입 탭에서 각 프레임을 연결합니다.③ 트리거 설정: "On drag" 트리거를 사용하여 스와이프 방향에 따라 다음 프레임으로 이동하도록 설정합니다.④ 스마트 애니메이션 적용: 부드러운 전환을 위해 스마트 애니메이션을 활성화합니다. 1-2. 텍스트 패럴랙스 이펙트스와이프할 때 텍스트가 다른 속도로 이동하는 효과를 구현합니다.① 거리 이동 및 수치 설정: 각 텍스트 레이어의 이동 거리를 다르게 설정합니다. 예: 첫 번째 프레임의 텍스.. 2024. 6. 11.

Prototyping Tools : Figma vs ProtoPie 프로토파이(ProtoPie)와 피그마(Figma)는 디자인 작업에 사용되는 툴이지만, 각각의 강점이 다릅니다. 이 둘의 차이를 알아봅시다.피그마 (Figma)피그마는 주로 UI 디자인을 만드는 데 사용됩니다. 마치 디지털 스케치북처럼 생각하면 됩니다.피그마의 장점:- 앱이나 웹사이트의 화면을 그리는 데 최적화되어 있습니다.- 여러 사람이 동시에 작업할 수 있어 팀 프로젝트에 좋습니다.- 간단한 클릭 동작을 보여주는 프로토타입을 만들 수 있습니다.피그마 사용 예시:- 웹사이트 레이아웃 디자인- 앱 화면 디자인- 버튼을 클릭하면 다른 페이지로 이동하는 간단한 프로토타입 제작 프로토파이 (ProtoPie)프로토파이는 더 복잡하고 실제 같은 프로토타입을 만드는 데 특화되어 있습니다. 실제로 작동하는 앱이나 웹.. 2024. 6. 2.

[ProtoPie] Improt : 디자인 파일 프로토파이에 불러오기 UXUI 디자인 작업물을 프로토파이로 불러오기 위해서는 디자인 툴에 프로토파이 플러그인을 설치하는 과정이 필요하다. 플러그인을 설치하면, 디자인 파일을 프로토파이에서 열어보록 하자. 1. 프로토파이 좌측 상단에 있는 Import 및디자인 툴을 클릭하면 해당 사이트가 열린다. 2. 피그마, XD 등 해당 사이트 및 프로그램에 접속하여 프로토파이 플러그인을 설치한다. 완료! 이제 손쉽게 디자인 파일을 불러들일 수 있다. ** 사전 준비 및 유의 사항 - UXUI 디자인 툴(작업 파일)과 ProtoPie 툴 모두 열려 있어야 한다. - 디자인 파일 간에 디바이스 화면 사이즈가 동일해야 한다. (불러와서 수정 가능) 1. Figma : Export 창(우측 화면)을 띄우고 프로토파이로 가져갈 영역을 선택하여 .. 2024. 1. 31.

이전 1 2 3 4 ··· 8 다음

티스토리툴바