스타터 가이드
코드 몰라도, 에이전트는 부릴 수 있어요
컴퓨터 선택과 터미널 세팅부터, AI에게 원하는 화면을 설명하는 디자인 도구함까지 정리했습니다.
PART 1
에이전트 시대의 컴퓨터, 무엇이 다를까요
에이전트는 혼자 오래 일하는 직원과 같아요. 세션 여러 개를 동시에 돌리고, 개발 서버를 띄우고, 파일을 쉼 없이 읽고 씁니다. 그래서 채팅형 AI만 쓸 때와 달리 메모리 용량과 운영체제 궁합이 작업 효율을 크게 좌우해요.
01
메모리가 곧 동시 작업량
에이전트 세션을 여러 개 띄우면 메모리부터 찹니다. 애플 실리콘 맥은 CPU와 GPU가 메모리를 함께 쓰는 구조라, 같은 용량이라도 로컬 AI 작업에서 여유가 커요.
02
격리 실행(샌드박스) 지원
Claude Code의 샌드박스 기능은 맥과 리눅스(WSL2)에서 동작해요. 윈도우 네이티브에서는 아직 지원되지 않아서, 격리 실행이 필요한 워크플로라면 맥이 편합니다.
03
에이전트 도구가 맥 먼저
iTerm2와 cmux는 맥 전용이고, Ghostty도 맥·리눅스를 먼저 지원해요. 새로 나오는 에이전트 특화 도구 대부분이 Homebrew 한 줄로 설치됩니다.
다만 전부 맥이 유리한 건 아니에요. NVIDIA GPU로 모델을 직접 학습시키는 작업이라면 리눅스 쪽이 낫습니다. 이 가이드는 에이전트 활용과 추론 중심 기준이에요.
맥 vs 윈도우 요약
| 항목 | Mac | Windows |
|---|---|---|
| Claude Code 실행 | 네이티브 지원 | 네이티브 지원 (PowerShell 설치) |
| 샌드박스(격리 실행) | 지원 | WSL2에서만 지원 |
| 에이전트 특화 터미널 | iTerm2·cmux·Ghostty·Orca 모두 사용 가능 | Orca와 Windows Terminal 중심 |
| 도구 설치 관리 | Homebrew로 일원화 | 설치 경로가 도구마다 달라요 |
사기 전에 질문 4개로 내 사양부터 확인하세요. 3분이면 위 기준이 내 상황에 맞는지 알 수 있습니다.
3분 추천
지금 맥을 어디에 가장 많이 쓰실 건가요?
지금 사기 좋은 구성
에이전트 작업 기준으로 고른 라인업이에요. 메모리 16GB가 출발선이고, 병렬 작업이 많다면 24GB 이상을 권해요.
이 페이지에는 쿠팡 파트너스 제휴 링크가 포함되어 있으며, 구매 시 QJC에 경제적 이익이 발생할 수 있습니다.
AI 업무 기준으로 더 자세히 고르고 싶다면 맥 추천 가이드를 확인하세요실제 화면
에이전트가 실제로 회사 일을 처리하는 모습이 궁금하다면 이 영상부터 보세요.
PART 2
터미널, 에이전트의 사무실
터미널이 뭐예요?
컴퓨터와 문자로 대화하는 창이에요. 마우스로 아이콘을 누르는 대신 명령을 적으면 컴퓨터가 그대로 실행합니다. 낯설어 보여도 매일 쓰는 규칙은 몇 개 안 돼요.
왜 지금 중요한가요?
Claude Code 같은 에이전트가 터미널 안에서 일하기 때문이에요. 터미널이 편해지면 에이전트 여러 명을 동시에 부리는 관제실이 생기는 셈입니다.
iTerm2
macOS맥 터미널의 기본기
오래 다듬어진 맥 전용 터미널이에요. 화면 분할과 단축키가 강력해서 에이전트 세션을 나란히 두고 보기 좋아요.
brew install --cask iterm2공식 사이트Ghostty
macOS · Linux빠르고 설정이 단순한 신형
GPU로 화면을 그려서 출력이 많은 에이전트 작업에서도 쾌적해요. 설치 직후 바로 쓸 수 있게 기본값이 잘 잡혀 있습니다.
brew install --cask ghostty공식 사이트cmux
macOS에이전트 알림 특화
AI 코딩 에이전트를 위해 만들어진 터미널이에요. 에이전트가 입력을 기다리면 표시가 켜져서, 여러 세션을 돌릴 때 놓치는 일이 줄어요.
brew tap manaflow-ai/cmux && brew install --cask cmux공식 사이트Orca
macOS · Windows · Linux에이전트 함대 관제
여러 에이전트를 작업 폴더 단위로 격리해 나란히 돌리는 오케스트레이터예요. 휴대폰 앱으로 밖에서도 진행 상황을 볼 수 있어요.
brew install --cask stablyai/orca/orca공식 사이트윈도우 사용자라면
Claude Code는 윈도우에서도 네이티브로 설치돼요. 다만 샌드박스 같은 일부 기능은 WSL2가 필요하니, Part 3에서 세팅 기준을 확인하세요.
잠긴 내용 미리보기
iTerm2
Ghostty
cmux
Orca
- 병렬 에이전트 운용 공통 수칙
3부 · 수강생 전용
여기부터는 수강생에게 열려 있어요
터미널마다 실제로 부딪히는 자잘한 문제들, 저희가 먼저 겪고 정리해뒀어요.
- 터미널 4종 세팅 레시피, 클릭 순서 그대로
- 에이전트 여러 개를 동시에 굴리는 운용 수칙
- 도구 업데이트에 맞춰 계속 갱신되는 내용
이미 수강생이신가요? 로그인하고 이어보기
PART 4 · 무료 공개
원하는 화면을 설명하는 디자인 도구함
레퍼런스는 “이런 느낌으로 만들고 싶어요”를 보여 주는 견본이에요. 마음에 드는 화면 하나와 좋아하는 이유를 AI에 전달하면, 막연히 “예쁘게 만들어 줘”라고 할 때보다 방향을 잡기 쉬워집니다.
처음이라면 이 순서로 시작하세요
Supahero에서 첫 화면 하나를 고르고, Color Hunt에서 색 조합을 골라 보세요. 버튼이나 입력창이 필요할 때 shadcn/ui를 더하면 됩니다. 처음부터 20곳을 모두 볼 필요는 없어요.
히어로는 페이지의 첫 화면, 컴포넌트는 버튼·입력창 같은 화면 부품, 팔레트는 함께 쓰는 색 조합이에요. 랜딩 페이지는 하나의 상품이나 서비스를 소개하는 페이지입니다.
1. 견본 하나를 고르세요
아래 분류를 펼쳐 사이트를 여세요. 마음에 드는 예시 주소나 스크린샷을 준비하고, “제목이 크다”, “여백이 넓다”처럼 이유 두 가지만 적어 보세요.
2. 내 내용과 함께 AI에 전달하세요
Claude Code나 사용하는 AI에 견본과 아래 예문을 붙여 넣으세요. AI가 링크를 읽지 못하면 스크린샷을 첨부하세요. 코드를 제공하는 사이트는 내 프로젝트와 맞는지 AI에게 먼저 확인하게 하세요.
3. 작은 화면부터 확인하세요
첫 화면 하나만 만든 뒤 휴대폰에서도 글이 읽히고 버튼이 눌리는지 확인하세요. “모바일 제목을 3줄에서 2줄로 줄여 줘”처럼 한 번에 한 가지씩 수정을 요청하세요.
필요할 때 펼쳐 보는 20개 자료
사이트 이름을 누르면 새 탭으로 열립니다. 가입·요금·템플릿 이용 조건은 각 사이트에서 확인하세요.
화면 구성이 막힐 때
갤러리에서 전체 분위기와 배치를 고르세요.
- Supahero
페이지 첫 화면을 모아 볼 수 있어요. 제목·이미지·버튼 배치가 마음에 드는 예시 하나를 골라 보세요.
- Dark Design
어두운 배경의 웹사이트 사례를 모았어요. 글자와 버튼이 잘 보이는 조합을 살펴보세요.
- Macapp Supply
잘 만든 macOS 앱을 모아 둔 곳이에요. 앱 소개 방식과 제품 이미지를 내 서비스 설명에 참고하세요.
- GetLayers
AI에 전달할 수 있는 웹 템플릿과 배경 효과를 제공해요. 미리보기를 고르고 제공되는 요청 문장을 내 내용에 맞게 바꿔 보세요.
- loadmo.re
휴대폰에 맞춘 독특한 웹사이트 모음이에요. 모바일 메뉴와 세로 스크롤 구성을 살펴보세요.
버튼·입력창·움직임이 필요할 때
컴포넌트는 개발용 부품이에요. 예시를 고르고 AI에게 프로젝트에 맞게 적용해 달라고 하세요.
- Beautiful UI
AI 대화창의 응답 대기·진행 상태·작업 승인 화면용 부품이에요. 챗봇에 필요한 상태의 예시를 고르세요.
- beUI
React와 Next.js에서 쓸 수 있는 움직이는 화면 부품이에요. 미리보기에서 효과를 확인하고 필요한 곳에 하나만 적용해 보세요.
- Rare UI
독특한 애니메이션이 있는 React 부품 모음이에요. 눈길을 끌 부분 하나를 고르고 모바일에서도 편한지 확인하세요.
- Transitions
화면 요소가 나타나고 바뀌는 전환 효과를 볼 수 있어요. 메뉴나 카드 전환 예시를 AI에게 전달하세요.
- shadcn/ui
버튼·입력창·대화상자 등 기본 화면 부품을 제공해요. 처음 앱을 만들 때 필요한 부품의 예시부터 확인하세요.
색 조합을 정할 때
마음에 드는 색을 고른 뒤 글자와 배경이 잘 구분되는지 확인하세요.
- Realtime Colors
고른 색과 글꼴을 실제 웹페이지 형태로 미리 볼 수 있어요. 배경·본문·버튼 색을 바꾸며 읽기 편한지 비교하세요.
- Coolors
색 조합을 만들고 둘러볼 수 있어요. 고른 색상 코드와 각 색의 용도를 AI에 전달하세요.
- Paletton
색상환으로 기준 색과 어울리는 색을 찾을 수 있어요. 브랜드 색 하나를 정한 뒤 함께 쓸 색을 비교해 보세요.
- Khroma
선호하는 색을 바탕으로 취향에 맞는 조합을 찾는 AI 도구예요. 먼저 좋아하는 색을 선택하는 단계부터 따라가세요.
- Color Hunt
완성된 색 조합을 한눈에 볼 수 있어요. 팔레트 하나를 골라 배경·본문·강조색을 정해 보세요.
브랜드 분위기와 개선점을 잡을 때
브랜드 표현 사례, 디자인 규칙 문서, 제품 개선 도구를 살펴보세요.
- Stanley
AI 콘텐츠 서비스의 브랜드 표현을 관찰하는 예시예요. 캐릭터·문구·색이 어떤 인상을 만드는지 살펴보세요.
- oh-my-design
기업별 디자인 규칙을 정리한 문서 모음이에요. GitHub의 README(사용 설명서)부터 읽고 원하는 스타일 문서를 AI에게 참고시켜 보세요.
- Lazyweb
제품의 성장과 사용 경험을 개선할 아이디어를 제안하는 서비스예요. 현재 제공 기능을 확인하고 내 페이지의 개선점을 검토하는 데 활용하세요.
AI에게 이렇게 요청해 보세요
아래 칸을 누르면 전체 문장이 선택돼요. Ctrl+C(맥은 ⌘C)로 복사한 뒤 대괄호 안을 내 정보로 바꿔 쓰세요. 휴대폰에서는 길게 눌러 복사할 수 있어요.
완성 후 세 가지만 확인하세요
휴대폰에서 가로로 밀리지 않는지, 글자와 배경이 잘 구분되는지, 버튼을 눌렀을 때 원하는 화면으로 가는지 확인하세요. 참고 사이트의 로고·사진·문구를 그대로 복사하지 말고 내 자료와 이용 가능한 자산을 사용하세요.
