분류 전체보기 158

Figma 대체 오픈소스? OpenPencil 가이드

OpenPencil이란?AI 네이티브 오픈소스 디자인 에디터. MIT 라이선스 배포이며, Figma 파일(.fig)을 네이티브로 열 수 있는 게 가장 큰 특징. 약 7MB의 가벼운 데스크톱 앱으로, 인터넷 연결이나 계정 없이 완전히 로컬에서 동작함.공식 사이트: openpencil.devGitHub: open-pencil/open-pencil라이선스: MIT (완전 오픈소스)핵심 특징 요약AI 내장: 90개 이상의 AI 도구로 자연어 기반 디자인 작업 가능Figma 호환: .fig 파일 직접 열기 + Figma ↔ OpenPencil 간 복사/붙여넣기 지원완전 로컬: 서버 통신 없음, 계정 불필요, 오프라인 사용 가능P2P 협업: WebRTC 기반 실시간 협업 (서버 불필요)다중 코드 내보내기: Reac..

TIP/AI 2026.03.26

[Claude Code] bkit (Vibecoding Kit)

Claude Code용 AI 네이티브 개발 프레임워크. PDCA 방법론 + 9단계 파이프라인으로 개발 전 과정을 자동화함.만든 곳: 팝업스튜디오(Popup Studio) | 사이트: https://www.bkit.aiPDCA 방법론이 뭔지 먼저PDCA는 1950년대 품질관리 분야에서 나온 지속적 개선 사이클임. 원래 제조업에서 불량률 줄이려고 쓰던 방법론인데, 소프트웨어 개발에도 그대로 적용됨. ┌──────────┐ │ PLAN │ ← 목표 설정, 계획 수립 └────┬─────┘ ↓ ┌──────────┐ │ DO │ ← 계획대로 실행 └────┬─────┘ ↓ ┌──────────┐ │ CHECK │ ← 결과 점검, 갭 분석 └───..

TIP/AI 2026.03.11

OpenClaw, 지금 도입하면 안 되는 5가지 이유 (2026년 2월 현황)

요즘 개발자 커뮤니티에서 OpenClaw 이야기가 안 나오는 곳이 없음. GitHub 스타 14만 개, 디스코드 활발, "미래가 왔다"는 찬사까지. 근데 지금 당장 업무 환경에 올리거나 개인 시스템에 연결하려는 거라면, 잠깐 멈추고 이 글을 먼저 읽어보길 권함.📌 핵심 요약결론: OpenClaw는 혁신적인 개인 AI 에이전트지만, 2026년 2월 현재 보안·비용·안정성 모두 프로덕션 수준이 아님. 최소 3~6개월은 관망이 정답.지금 하지 말아야 할 것 3가지:업무용 메일·캘린더·슬랙 등 실서비스 계정 연결API 비용 상한 없이 24/7 상시 가동검증 안 된 ClawHub 서드파티 스킬 설치주의할 실수 2가지:"오픈소스니까 안전하겠지" → 512개 취약점 발견, 8개 크리티컬"무료니까 비용 걱정 없겠지"..

TIP/AI 2026.02.13

Pencil.dev — IDE 안에서 디자인하고, 코드로 착지하는 시대

디자인과 개발의 경계가 무너지고 있음. Figma에서 디자인하고, 개발자에게 넘기고, 스펙 문서 만들고, 다시 수정하고… 이 지루한 핸드오프 루프를 끊어버리는 도구가 등장함. 바로 Pencil.dev.Pencil.dev가 뭔가Pencil은 VS Code, Cursor 같은 IDE 안에 직접 들어가는 벡터 디자인 캔버스임. Figma처럼 무한 캔버스에서 UI를 그릴 수 있는데, 핵심 차이는 이게 코드 에디터 안에서 동작한다는 점.디자인 파일 포맷은 .pen이라는 JSON 기반 파일. 이 파일이 프로젝트 소스코드와 나란히 존재하면서, AI 에이전트(Claude Code 등)가 MCP(Model Context Protocol)를 통해 디자인을 읽고 프로덕션 코드를 바로 생성함.현재 얼리 액세스 기간으로 무료...

TIP/AI 2026.02.13

[Claude Code] 해커톤 우승자의 70가지 파워 팁

출처: ykdojo/claude-code-tips (Anthropic 해커톤 우승자 YK Dojo) + Advent of Claude 2025 (Anthropic DevRel Ado Kukic)두 가이드의 팁을 주제별로 통합 정리하고, 각 팁마다 바로 쓸 수 있는 명령어·스크립트·설정을 포함함.1. 초기 설정1-1. /init — 프로젝트 온보딩 자동화새 프로젝트에서 가장 먼저 실행할 명령. Claude가 코드베이스를 읽고 CLAUDE.md를 자동 생성함.# Claude Code 프롬프트에서/init생성되는 CLAUDE.md에는 빌드/테스트 명령, 디렉토리 구조, 코드 컨벤션, 아키텍처 결정 사항 등이 담김.모듈식 규칙 파일도 가능:.claude/rules/├── testing.md # 테스트 ..

TIP/AI 2026.02.10

[Claude Code] Reddit에 올라온 완전 정복 가이드 v4 (한국어 번역)

원문 내용 번역만 클로드로 해서 정리함.85% 컨텍스트 절약, 커스텀 에이전트, 세션 텔레포트까지2026년 1월, Claude Code 2.1.x가 한 달 동안 무려 1,096개 이상의 커밋을 쏟아냈음. 이건 단순 업데이트가 아니라 Claude Code가 컨텍스트를 관리하고, 작업을 위임하고, 확장하는 방식 자체가 바뀐 혁명적 변화임.V4에서 뭐가 달라졌나MCP Tool Search: 레이지 로딩으로 컨텍스트 85% 절약커스텀 에이전트: 전문가 에이전트에게 자동 위임세션 텔레포트: 디바이스 간 세션 이동백그라운드 태스크: 병렬 에이전트 실행새 명령어들: /config 검색, /stats 필터링, 커스텀 단축키Part 1: Global CLAUDE.md - 보안 게이트키퍼메모리 계층 구조Claude Cod..

TIP/AI 2026.02.02

Napkin AI 사용법 완벽 가이드: 텍스트를 다이어그램으로 바꾸는 법

📌 핵심 요약결론: Napkin AI는 텍스트 → 다이어그램 자동 변환 도구임. 프롬프트 없이 텍스트 선택만 하면 30가지+ 시각화 옵션 제안해줌.바로 실행할 것 3가지:napkin.ai 접속해서 구글 계정으로 가입텍스트 붙여넣고 시각화할 부분 선택 (파란 번개 아이콘 클릭)템플릿 선택 → 색상/아이콘 커스터마이징 → PNG/PDF 내보내기흔한 실수 2가지:문서 전체를 한 번에 넣기 (핵심 내용만 선별해서 넣어야 정확함)모바일에서 편집하려 하기 (데스크톱 전용, 모바일은 보기만 가능)가격: 현재 무료 (베타 버전, 모든 기능 사용 가능)1. Napkin AI가 뭔지 30초 정리Napkin AI는 텍스트를 다이어그램으로 자동 변환해주는 AI 도구임.이름은 건축가들이 냅킨에 아이디어를 빠르게 스케치하는 것..

TIP/AI 2026.01.31

Google Mixboard 사용법 완벽 가이드: AI로 무드보드 만드는 법

📌 핵심 요약결론: Google Mixboard는 프롬프트 → 무드보드 → 이미지 편집까지 한 번에 되는 AI 캔버스임. Pinterest + Canva + 포토샵을 합쳐놓은 느낌.바로 실행할 것 3가지:mixboard.google.com 접속해서 구글 계정 로그인프롬프트 입력하거나 템플릿 선택해서 무드보드 생성자연어로 이미지 수정 ("배경을 흰색으로", "두 이미지 합쳐줘")흔한 실수 2가지:프롬프트 대충 쓰고 결과물 탓하기 (스타일, 색상, 분위기 구체적으로)최종 결과물로 바로 쓰려 하기 (아이디어 시각화 도구임, 제작은 Figma/Canva에서)가격: 현재 무료 (Google Labs 실험 단계)1. Google Mixboard가 뭔지 30초 정리Google Mixboard는 Google Labs..

TIP/AI 2026.01.30

20년차 영상 제작자가 알려주는 Google Flow 사용법

20년차 영상 제작자한테 배워옴. 블로그에 올려도 된다해서 정리해서 올림.1. 영상 기본 개념 이해1.1 해상도와 비율구분해상도비율용도FHD1920 × 108016:9일반 가로형 영상 (유튜브, 웹사이트)FHD 세로1080 × 19209:16쇼츠, 릴스, 모바일 콘텐츠정사각형1080 × 10801:1인스타그램, 모바일 배너4K3840 × 216016:9고해상도 작업 (크롭 여유 확보)실전 팁: 웹사이트 배너처럼 PC·모바일 동시 대응이 필요하면, 4K로 생성 후 중앙에 핵심 콘텐츠를 배치함. 이러면 다양한 비율로 크롭 가능함.Flow에서 지원하는 비율은 16:9(가로), 9:16(세로), 1:1(정사각형) 세 가지임.1.2 프레임 레이트(FPS)FPS특징사용처24fps영화적 느낌, 약간의 모션 블러시네마..

TIP/AI 2026.01.30

AI로 UI/UX 프로토타이핑을 해보자. Google Stitch 소개

📌 핵심 요약결론: Google Stitch는 프롬프트 → UI → 코드까지 자동화해주는 무료 도구임. 초기 프로토타입용으로 최적.바로 실행할 것 3가지:stitch.withgoogle.com 접속해서 구글 계정 로그인구체적인 프롬프트로 UI 생성 (색상, 레이아웃, 컴포넌트 포함)HTML 코드 복사하거나 Figma로 내보내기흔한 실수 2가지:프롬프트 대충 쓰고 결과물 탓하기 (구체적으로 써야 함)완성본 기대하기 (초기 검증용 도구임, 세부 조정은 Figma에서)추천 플러그인: Stitch to Figma - HTML을 Figma 프레임으로 변환1. Google Stitch가 뭔지 30초 정리Google Stitch는 Google Labs에서 만든 AI UI 디자인 도구임.텍스트로 "이런 앱 만들어줘"..

TIP/AI 2026.01.30