09. 하네스 엔지니어링

먼저 디자인부터 품질 확인까지 이어지는 흐름을 살펴보고, 이어서 Claude Code에 보낼 입력문을 순서대로 실행합니다. 마지막에는 같은 구축 과정을 파일별 설명과 검사 기준까지 포함해 자세히 확인합니다. 첫 번째 부분인 “Figma 디자인부터 QA까지, 하네스 한 바퀴 세팅”에서는 하네스의 전체 흐름과 최소 구축 절차를 확인합니다. 웹사이트 리디자인 팀프로젝트에서 Figma 시안을 코드로 옮길 때, AI 코딩 도구가 팀 규칙을 … 더 읽기

03. Tailwind CSS v4 – 크기와 유틸리티 클래스 체계

Tailwind를 처음 배울 때 가장 헷갈리는 두 가지가 “클래스 이름이 어떤 규칙으로 만들어지는가”와 “숫자·이름(sm, md…)이 실제로 몇 px인가”다. 이 문서는 그 두 체계를 공식 문서 기준으로 정리한다. 모든 수치는 2026-07-27에 Tailwind CSS 공식 문서로 확인한 값이다. 1 – 유틸리티 클래스 체계 유틸리티 클래스는 한 가지 스타일만 담당하는 클래스다. text-center는 글자 가운데 정렬 하나, p-4는 안쪽 … 더 읽기

02. Tailwind CSS v4 – 레이아웃부터 반응형까지

이 문서는 Tailwind CSS로 상자 배치(레이아웃)와 화면 크기별 디자인(반응형)을 실습하는 문서다. HTML 기본 태그(div, h1, a)를 써 본 사람이 대상이고, CSS 파일을 따로 만들지 않고 클래스 이름만으로 화면을 만든다. 끝까지 따라 하면 화면 너비에 따라 카드가 1열에서 3열로 바뀌는 웹 페이지 한 장이 결과물로 남는다. 1 – Tailwind CSS와 실습 준비 Tailwind CSS는 미리 만들어 … 더 읽기

12. Antigravity와 Stitch MCP

Antigravity와 Stitch MCP로 랜딩 페이지 만들기 이 문서는 Google Stitch에서 랜딩 페이지 시안을 만들고, 그 시안을 Antigravity의 에이전트가 React + Tailwind CSS 코드로 바꿔 브라우저에서 확인하는 과정을 처음부터 끝까지 따라 하는 실습 예제다. Antigravity에 Stitch MCP 연동(설치와 인증)이 이미 끝난 상태에서 시작하며, 연동 설치 과정 자체는 다루지 않는다. 끝까지 따라 하면 시안과 같은 모습의 랜딩 … 더 읽기

34. 설치형 워드프레스 자동 글 등록

설치형 워드프레스 자동 글 등록 – 스킬·서브에이전트 활용 설계 가이드 이 문서는 완성한 글을 설치형(자체 호스팅) 워드프레스에 REST API로 자동 등록하는 방법을 스킬·서브에이전트·예약 실행 세 갈래로 나눠 설계하는 가이드다. Windows PowerShell과 Claude Code를 쓰는 환경을 전제로 하며, 워드프레스 관리자 화면에 로그인해 본 정도의 운영 경험만 있으면 따라올 수 있다. 인증 테스트부터 스킬 제작, 무인 발행 … 더 읽기

08. AI 반복 실수(3회 이상) 패턴 추출 및 하네스 등록 가이드

AI 반복 실수(3회 이상) 패턴 추출 및 하네스 등록 가이드 1. 개념 정리 1.1 하네스(Harness)란 하네스는 AI에게 매번 자동으로 적용되는 상시 규칙 모음을 말한다. 사용자가 대화할 때마다 일일이 지시하지 않아도, AI가 작업을 시작하기 전에 항상 먼저 읽는 규칙 파일이다. 말의 방향을 잡아 주는 말고삐(harness)에 비유한 표현이다. 도구별로 하네스에 해당하는 위치는 다음과 같다. 1.2 3회 규칙(3-Strike … 더 읽기

31. ChatGPT로 하는 AI 시장조사

이 문서는 조사 회사나 유료 데이터 없이 ChatGPT만으로 아이템의 시장을 조사하고, 경쟁 제품 비교표와 타깃 고객 페르소나, SWOT 정리표까지 만드는 과정을 다룬다. ChatGPT 계정과 조사하고 싶은 제품·서비스 아이디어 하나만 있으면 시작할 수 있다. 다 따라 하면 조사 질문 목록, 경쟁 제품 비교표, 타깃 고객 페르소나, SWOT 정리표 네 가지가 손에 남는다. 1 – 조사 설계와 … 더 읽기

32. ChatGPT로 하는 AI 합성 사용자 인터뷰 사용성 평가

이 문서는 실제 사용자를 모집하지 않고 ChatGPT로 가상의 사용자 페르소나를 만들어 인터뷰를 시뮬레이션하고, 그 결과에서 사용성 문제를 뽑아 우선순위표까지 만드는 과정을 다룬다. ChatGPT 계정과 평가할 화면 캡처 이미지 한 장만 있으면 시작할 수 있다. 다 따라 하면 페르소나 인터뷰 스크립트 한 벌과 사용성 이슈 우선순위표 한 장이 손에 남는다. 1 – ChatGPT 합성 사용자 인터뷰 … 더 읽기

02. Vue

Vuetify로 할 일 앱 완성하기 이 문서는 Vue + Vuetify 실습 시리즈의 완결 편이다. 1편에서 Vite 개발 환경과 Vue 핵심 문법(ref·{{ }}·v-bind·@click·v-model·v-if·v-for) 일곱 가지를 익혔다는 전제로 쓰였고, 본문 번호는 1편에서 이어져 3부터 시작한다. 이 한 편에서 Vuetify 3 설치와 앱 골격 레이아웃, 반응형 그리드를 익힌 뒤, 그 화면 안에 할 일 앱을 얹어 등록·완료 표시·삭제까지 … 더 읽기