디자인을 위한 Aider.

Aider는 실제로 무엇인가

Aider는 터미널에서 동작하는 오픈소스(Apache-2.0) AI 페어 프로그래밍 도구입니다. 기존 코드베이스를 읽고, 컨텍스트를 위해 저장소 전체를 매핑하고, 파일을 제자리에서 편집하며, 각 변경을 합리적인 메시지와 함께 자동으로 커밋합니다 — 그래서 이미 쓰는 git 도구로 AI의 작업을 diff하고, 관리하고, 되돌릴 수 있습니다. 100개 이상의 프로그래밍 언어를 다루며 새 프로젝트를 시작하거나 기존 프로젝트 위에 빌드합니다.

디자인 작업에서는 두 가지 속성이 두드러집니다. Aider는 모델에 구애받지 않습니다. 직접 고른 키를 가져와 거의 모든 LLM — Claude, GPT-4o, DeepSeek, Gemini, 또는 로컬 모델 — 에 연결하므로 한 공급자에 결코 묶이지 않습니다. 그리고 GPT-4o, Claude 같은 비전 지원 모델에서는 이미지 파일을 읽어, 레퍼런스 스크린샷을 프롬프트의 일부로 바꿉니다.

• 규칙 파일: Aider는 /read CONVENTIONS.md(또는 aider --read CONVENTIONS.md)로 불러오는 CONVENTIONS.md 파일을 읽습니다 — 디자인 규칙·토큰·리뷰 체크리스트를 읽기 전용 컨텍스트로 남기기에 자연스러운 자리입니다.
• git 네이티브 편집: 모든 변경이 저장소 파일에 적용되고 자동으로 커밋되므로, 각 디자인 반복을 익숙한 git 도구로 리뷰하고 되돌릴 수 있습니다.
• 직접 고른 모델 사용: OpenAI, Anthropic, DeepSeek, Gemini, 또는 로컬 모델을 당신 소유의 API 키로 연결하세요. Aider는 단일 벤더나 호스팅 백엔드에 묶이지 않습니다.

• 벤더: Aider(Aider-AI, 오픈소스) — 모델에 구애받지 않음
• 자격증명: 직접 고른 공급자 API 키 — BYOK(OpenAI, Anthropic, DeepSeek, Gemini, 또는 로컬 모델)
• 라이선스: Apache-2.0, 오픈소스

왜 모델에 구애받지 않는 git 네이티브 도구가 디자인에 어울리는가

Aider의 디자인 강점은 당신의 저장소 및 당신이 고른 모델과 함께 작동하는 방식에서 나옵니다 — 다만 모든 에이전트가 그렇듯 안목은 여전히 사람이 제공해야 합니다.

• 모델에 구애받지 않음, BYOK: 작업과 예산에 가장 잘 디자인하는 모델 — Claude, GPT-4o, DeepSeek, Gemini — 을 고르고, 워크플로를 바꾸지 않고 자유롭게 전환하세요. 전부 당신 소유의 키로요.
• git 네이티브 반복: 자동 커밋은 각 디자인 패스를 되돌릴 수 있는 리뷰 가능한 diff로 만듭니다. 그래서 추적되지 않는 편집 더미가 아니라 깨끗한 기반에서 반복합니다.
• CONVENTIONS.md 안의 규칙: CONVENTIONS.md(읽기 전용으로 로드)가 에이전트를 당신의 토큰·컴포넌트·규칙으로 안내하므로, 기본 모양 대신 브랜드에 맞춰 작업합니다.

교훈은 모든 에이전트가 가르치는 것과 같습니다. Aider는 기본적으로 안목을 갖고 있지 않습니다. 제약 — 디자인 시스템, 미적 skill, 구체적인 레퍼런스 — 을 주면 좋은 디자인을 만들어 냅니다. Open Design은 바로 그 입력들을 패키징하며, 그래서 둘이 잘 맞습니다(아래에서 자세히).

디자인 작업용 Aider를 처음부터 설정하기

깨끗한 컴퓨터에서 UI를 빌드·검증할 수 있는 Aider까지 가는 전체 경로입니다.

# 1. Install Aider (recommended installer; Python 3.8–3.13)
python -m pip install aider-install
aider-install
# or with pipx: pipx install aider-chat

# 2. Start it in your git project and bring your own key
cd your-project
aider --model sonnet --api-key anthropic=<your-key>
# or: aider --api-key openai=<your-key>   (also deepseek=, gemini=)

# 3. Load your design conventions as read-only context
aider --read CONVENTIONS.md

# 4. Add a reference image (on a vision-capable model)
#    inside the chat: /add reference-desktop.png

• 디자인 규칙을 코드로 남기기: 토큰·프리미티브·규칙을 CONVENTIONS.md에 넣고 읽기 전용으로 로드하면, 흔한 디자인으로 기본값을 내는 대신 결과가 브랜드에 맞습니다.
• 브라우저 검증 추가: dev 서버를 돌리고 Aider가 실제 브라우저에서 렌더링하게 해, 빌드 통과만 확인하는 게 아니라 여러 브레이크포인트에서 결과를 점검하게 하세요.

스크린샷-투-UI 워크플로

Aider로 가장 효과가 큰 디자인 루프는 레퍼런스 이미지를 동작하는 반응형 UI로 바꾸고 일치할 때까지 반복하는 것입니다 — 비전 지원 모델로 결과를 레퍼런스와 다시 비교하며, 각 패스를 git에 커밋합니다.

1. 가지고 있는 가장 또렷한 시각 레퍼런스에서 시작하세요 — 그리고 한 장의 히어로 샷만이 아니라 여러 상태(데스크톱과 모바일, 호버, 빈 상태, 로딩)를 포함하세요.
2. 프롬프트를 구체적으로 작성하세요. 모호한 프롬프트는 강력한 모델로도 흔한 UI를 만듭니다.
3. 디자인 시스템과 규칙을 CONVENTIONS.md에 두고, 토큰과 정규 프리미티브가 어디 있는지 Aider에 알려 주세요.
4. dev 서버를 돌리고 실제 브라우저에서 렌더링된 결과를 점검하며, 브레이크포인트로 크기를 조절하세요.
5. Aider가 구현 결과를 스크린샷과 다시 비교하게 하며 반복하세요 — 단지 빌드가 되는지만 확인하지 마세요.

비전 지원 모델에서 /add(또는 클립보드에서 /paste)로 이미지를 추가한 뒤, 구체적인 제약을 주세요:

aider --model gpt-4o --read CONVENTIONS.md
# in the chat:
> /add reference-desktop.png
> /add reference-mobile.png
> Implement this design in React + Vite + Tailwind + TypeScript.
  Reuse my existing design-system components and tokens from CONVENTIONS.md.
  Match spacing, layout, and hierarchy; make it responsive.
  I'll render it in the browser and tell you what to fix until it matches
  the references across breakpoints.

프롬프트는 작고 집중되게 유지하세요. Aider가 각 변경을 커밋하므로 좋은 반복은 남기고 git(또는 /undo)으로 나쁜 반복을 되돌려 — 매번의 패스가 깨끗한 기반 위에서 쌓이게 하세요.

CONVENTIONS.md, 이미지, 명령

세 가지 역량이 Aider를 지속적인 디자인 작업에 실용적으로 만들며, 셋 모두 개방형 디자인 워크플로에 깔끔하게 들어맞습니다.

• CONVENTIONS.md 컨텍스트: /read CONVENTIONS.md 또는 aider --read CONVENTIONS.md로 코딩·디자인 규칙을 로드하거나, .aider.conf.yml에 read: CONVENTIONS.md를 설정해 매번 로드하세요. 토큰·프리미티브·규칙을 담는 오래가는 보금자리입니다.
• 이미지와 웹 페이지: 비전 지원 모델에서는 이미지 파일을 /add하거나 클립보드에서 /paste해 Aider에 실제 레퍼런스를 주세요. /web <url>은 페이지의 텍스트를 채팅으로 긁어 와 추가 컨텍스트로 삼습니다.
• 채팅 내 명령: 파일을 컨텍스트로 가져오는 /add, 읽기 전용 레퍼런스용 /read, 마지막 커밋을 되돌리는 /undo 같은 명령으로 터미널을 떠나지 않고 레퍼런스를 모으고 검증 루프를 실행할 수 있습니다.

이것들은 이식 가능하고 저장소 네이티브인 역량 — 바로 Open Design이 프로젝트마다 다시 만드는 대신 오케스트레이션하도록 만들어진 종류의 것 — 입니다.

디자인을 위한 Aider vs Codex vs Claude Code vs Cursor vs Gemini CLI

디자인 작업에 단 하나의 승자는 없습니다 — 에이전트마다 강점이 다르고, 숙련된 팀은 이들을 겹쳐 씁니다. 공정한 요약:

커뮤니티에서 거듭 나오는 결론은 안목은 사람에게서 나온다는 것입니다. 이들 모두 skill·레퍼런스·제약이 없으면 흔한 미감으로 기본값을 냅니다. 그게 풀어야 할 진짜 문제이며 — 모델 모양이 아니라 디자인 도구 모양의 문제입니다.

함정, 그리고 “AI 슬롭” 느낌을 피하는 법

AI가 만든 디자인에 대한 가장 흔한 불만은 흔해 보인다는 것입니다 — 부드러운 그라데이션, 떠다니는 패널, 지나치게 큰 둥근 모서리, 과한 그림자, “AI가 만들었다고 외치는” Inter-와-보라색 분위기. 그 밖에 보고되는 문제로는 깨진 모바일 레이아웃과 지시문이 UI 카피로 새어 나오는 것이 있습니다. 어느 것도 Aider에만 있는 문제가 아닙니다. 엄선된 디자인 컨텍스트 없이 어떤 에이전트든 돌릴 때 생기는 일입니다.

• 미적 skill 추가: 엄선된 디자인 skill은 에이전트가 기본 모양 대신 실제 방향을 택하도록 강제합니다.
• 실제 브라우저에서 검증: 여러 브레이크포인트에서 렌더링하고 스스로 점검해 모바일에서 레이아웃이 조용히 깨지지 않게 하세요 — 비전 지원 모델에서는 스크린샷을 다시 입력으로 넣으세요.
• 토큰과 레퍼런스 제공: 실제 디자인 토큰과 레퍼런스 스크린샷은 결과 품질에 가장 큰 단일 지렛대입니다.
• CONVENTIONS.md에 규칙을 남기기: “히어로 카드 금지, 서체 최대 둘, 브랜드 우선 위계” 같은 규칙을 에이전트가 매번 읽는 곳에 두세요.

모든 완화책이 에이전트에게 엄선된 디자인 컨텍스트를 주는 것에 관한 것임을 눈여겨보세요. 그 컨텍스트를 프로젝트마다 손으로 유지하는 수고를 Open Design이 없애 줍니다.

Open Design 안에서 Aider로 디자인하기

Open Design은 위 워크플로가 계속 요구하는 바로 그 오픈소스 디자인 레이어입니다. Aider를 1차 어댑터로 취급해 엄선된 skill과 디자인 시스템 라이브러리, 구조화된 렌더 파이프라인, 로컬 데스크톱 UI로 감쌉니다 — 그래서 Aider를 좋게 만드는 디자인 컨텍스트가 매번 손으로 조립되는 게 아니라 첫 실행부터 거기 있습니다. 둘 다 오픈소스이고 로컬 우선이라 자연스럽게 어울리는 조합입니다.

1. Open Design을 설치하고 Aider를 에이전트로 선택하세요.
2. 당신 소유의 공급자 API 키(BYOK)로 인증하세요 — OpenAI, Anthropic, DeepSeek, 또는 Gemini. 자격증명은 당신의 컴퓨터에 머물며 결코 우리를 거쳐 중계되지 않습니다.
3. 디자인 시스템과 skill을 고른 뒤, 일관된 안목으로 덱·프로토타입·랜딩 페이지를 생성하세요.
4. 모든 산출물과 DESIGN.md 파일은 호스팅 클라우드가 아니라 당신 소유의 git 저장소에 있습니다.

같은 Aider 에이전트, 같은 키 — 거기에 실제로 이식 가능한 오픈소스 디자인 워크플로를 둘러 줍니다. 로컬 우선이고 오픈소스라, 당신의 작업이나 자격증명에 관한 무엇도 당신의 컴퓨터를 떠나지 않습니다.

자주 묻는 질문

1. 01 Aider가 정말 디자인 작업을 할 수 있나요? +

   네 — 미적 skill, 디자인 시스템, 컨텍스트 속 실제 레퍼런스 이미지가 있으면 Aider는 프로덕션 품질의 반응형 UI를 만들어 내고, 비전 지원 모델에서는 스크린샷을 읽어 레퍼런스에 맞춰 결과를 검증합니다. 그 컨텍스트가 없으면 흔한 모양으로 기본값을 내는 경향이 있는데, 그 간극을 Open Design이 메웁니다.

2. 02 Aider로 디자인할 때 어떤 모델을 쓸 수 있나요? +

   Aider는 모델에 구애받지 않습니다. 직접 고른 API 키를 가져와 거의 모든 LLM — Claude, GPT-4o, DeepSeek, Gemini, 또는 로컬 모델 — 에 연결합니다. 이미지 기반 디자인 작업에는 GPT-4o나 Claude 같은 비전 지원 모델을 쓰세요. Open Design은 당신의 자격증명을 결코 중계하지 않습니다.

3. 03 Aider가 디자인에 특히 좋은 이유는 무엇인가요? +

   두 가지입니다. 모델에 구애받지 않아 작업에 가장 잘 디자인하는 모델을 고르고, git 네이티브라 모든 변경을 커밋해 각 디자인 반복이 리뷰 가능하고 되돌릴 수 있습니다. 둘 다 도움이 되지만 — 안목은 여전히 당신이 제공하는 디자인 시스템, skill, 레퍼런스에서 나옵니다.

4. 04 Aider가 제 파일을 편집하고 git에 커밋하나요? +

   네. Aider는 저장소의 파일을 직접 편집하고 각 변경을 합리적인 메시지와 함께 자동으로 커밋하므로, 이미 쓰는 git 도구로 AI의 작업을 diff하고, 관리하고, 되돌릴 수 있습니다.

5. 05 Aider에 제 디자인 규칙을 어떻게 주나요? +

   토큰·프리미티브·규칙을 담은 CONVENTIONS.md를 만든 뒤, /read CONVENTIONS.md 또는 aider --read CONVENTIONS.md로 읽기 전용으로 로드하세요(또는 .aider.conf.yml에 read: CONVENTIONS.md를 설정해 매번 로드). 그러면 Aider가 기본 모양 대신 당신의 브랜드에 맞춰 작업합니다.

6. 06 Open Design은 Aider와 제휴 관계인가요? +

   아니요. Aider는 독립적인 오픈소스 프로젝트(Aider-AI)이고, Open Design은 Aider를 1차 어댑터로 지원하는 별개의 독립적인 오픈소스 프로젝트입니다. 둘은 제휴 관계가 아닙니다.

7. 07 제 파일과 자격증명은 안전한가요? +

   네 — Open Design은 로컬 우선이고 오픈소스입니다. 파일·산출물·DESIGN.md는 당신 소유의 git 저장소에 머물고, 공급자 API 키는 당신의 에이전트가 직접 사용하며 결코 Open Design 서버를 거치지 않습니다.