아이디어를 화면으로.
Studio 사용 가이드.

처음이라면, 여기부터

설치, 계정 연결, 첫 프로젝트 순서로 시작합니다. 터미널을 써본 적이 없어도 괜찮습니다. 입력할 위치와 완료됐을 때 보이는 상태를 함께 안내합니다.

시작 전에 알아둘 것

인터넷 연결, Studio 설치 파일, 사용할 Claude 계정을 준비합니다. 회사에서 계정이나 사용 방법을 지급했다면 그 안내에 맞춰 연결하세요.

내 컴퓨터에 맞는 앱 설치

Studio 다운로드에서 운영체제와 칩에 맞는 설치 파일을 선택합니다. 이미 설치했다면 계정 연결로 이동하세요.

앱이 열리면 기획부터와 코드부터 중 시작할 작업을 선택할 수 있습니다. 업데이트가 필요하면 설정의 계정 화면에서 최신 버전 확인하기를 사용하거나 Studio 업데이트 내역을 확인하세요.

완료 확인 NEXTLAB Studio가 실행되고 첫 설정 또는 작업 시작 화면이 보이면 앱 설치가 끝난 것입니다. AI 실행 준비는 아래 계정 연결에서 이어갑니다.

Claude 설치와 계정 연결

Studio 앱, Claude Code 설치, Claude 로그인은 각각 한 번씩 확인합니다. 이미 설치했다면 설치·로그인 확인부터 진행하세요.

Claude 계정 준비

1. Claude 공식 사이트에서 사용할 계정으로 로그인합니다. 처음이라면 화면의 계정 만들기 안내를 따릅니다.
2. 이 계정에 Claude Code 사용 권한이 있는지 확인합니다. 무료 웹 채팅 계정만으로는 Claude Code를 사용할 수 없습니다. 개인 구독 또는 조직에서 받은 이용 권한을 확인하세요.
3. 회사 계정이라면 초대 수락과 조직 로그인을 먼저 완료합니다. 이용 권한이 없을 때는 계정 담당자에게 확인합니다.

Claude 구독 로그인과 Console의 API 이용은 별도 방식입니다. 여기서는 Studio의 Claude 로그인 흐름을 안내합니다. 지원 계정과 조직별 인증은 Claude 공식 인증 안내에서 확인할 수 있습니다.

macOS에 Claude CLI 설치

입력 위치 · Mac의 터미널 앱

1. Cmd + Space를 누르고 터미널을 검색해 엽니다.
2. 아래 명령을 복사하고 터미널에 Cmd + V로 붙여넣은 뒤 Enter를 누릅니다.

curl -fsSL https://claude.ai/install.sh | bash

공식 설치 프로그램을 내려받아 실행하는 명령입니다. 설치가 끝나면 터미널 창을 새로 열고 아래 명령을 실행하세요.

claude --version

완료 확인 버전 번호와 Claude Code가 나오면 설치됐습니다. 명령을 찾을 수 없다는 메시지가 나오면 설치 오류 해결로 이동하세요.

공식 문서 · Mac 터미널 시작 안내 · 지원 환경과 설치 방법 · 2026.09.23 확인

Windows에 Claude CLI 설치

입력 위치 · Windows PowerShell

1. 시작 메뉴에서 PowerShell을 검색해 엽니다. 일반 실행으로 진행할 수 있습니다.
2. 입력 줄 앞에 PS C:\…>가 보이는지 확인합니다. PS가 없는 CMD 창이라면 PowerShell을 다시 엽니다.
3. 아래 명령을 복사하고 Ctrl + V로 붙여넣은 뒤 Enter를 누릅니다.

irm https://claude.ai/install.ps1 | iex

설치가 끝나면 PowerShell 창을 닫았다가 다시 열고 버전을 확인합니다.

claude --version

완료 확인 버전 번호와 Claude Code가 표시되면 다음 로그인 단계로 이동합니다.

공식 문서 · Windows 터미널 시작 안내 · Windows 설치 환경 · 2026.09.23 확인

CLI 로그인과 정상 연결 확인

Mac 터미널 또는 Windows PowerShell에서 아래 명령을 실행합니다. Studio의 로그인 버튼으로 연결할 예정이라면 Studio에서 연결하기로 바로 이동해도 됩니다.

claude

1. 처음 실행하면 화면에 표시되는 안내를 따릅니다. 선택 화면에서는 방향키로 항목을 고르고 Enter로 진행합니다.
2. 브라우저가 열리면 준비한 Claude 계정으로 로그인하고 연결을 완료합니다.
3. 터미널로 돌아와 Claude 입력창이 보이는지 확인합니다. 아래 /status는 실행 중인 Claude Code 입력창에 입력합니다.

/status

표시된 계정과 인증 방식이 의도한 값인지 확인합니다. 계정을 바꾸거나 다시 로그인하려면 Claude Code 안에서 /login을 입력합니다. 종료할 때는 exit를 입력합니다.

공식 문서 · 첫 로그인 · 인증 방식 확인

Studio에서 Claude 계정 연결

앱에서 이동 · 설정 → 계정 → 계정 설정 열기

1. 처음 실행한 데스크톱 앱에서는 계정 연결하기로 시작합니다. 이미 앱을 사용 중이라면 왼쪽 아래 설정 → 계정 → 계정 설정 열기를 선택합니다.
2. 사용자 확인에 사번을 입력합니다. 현재 버전에서는 사용량을 구분하기 위한 필수 항목입니다.
3. 제공자에서 Claude (구독), 인증 방식에서 Claude 로그인을 선택합니다.
4. Claude 계정으로 로그인을 누르고 브라우저에서 연결합니다. 인증 코드 입력란이 나타나면 브라우저에 표시된 코드를 Studio에 붙여넣고 확인을 누릅니다.
5. 계정 표시를 확인합니다. 이미 CLI에 로그인되어 있다면 먼저 표시된 계정이 맞는지 확인하세요.
6. 에이전트 도구 권한을 확인한 뒤 저장하고 시작을 누릅니다. 처음 사용할 때는 표준 (파일 읽기/쓰기) 설정으로 시작할 수 있습니다.

완료 확인 작업 화면이 열리고 설정의 계정 연결 상태를 확인할 수 있으면 준비됐습니다. 짧은 첫 요청을 보내 실제 응답까지 확인하세요.

claude setup-token

CLI 설치·로그인에서 막혔을 때

~/.local/bin/claude --version

echo 'export PATH="$HOME/.local/bin:$PATH"' >> ~/.zshrc
source ~/.zshrc

설치 상태를 더 확인하려면 터미널에서 다음 진단 명령을 실행합니다.

claude doctor

공식 도움말 · 설치와 인증 문제 해결 · 오류를 전달할 때 계정 토큰과 개인 정보는 가려주세요.

Claude CLI 업데이트

위에서 안내한 기본 설치 방식은 자동 업데이트를 지원합니다. 바로 확인하려면 터미널에서 아래 명령을 실행합니다. 완료 후 Claude Code와 Studio를 다시 열어 적용된 버전을 확인하세요.

claude update

Homebrew로 설치했다면 brew upgrade claude-code, WinGet으로 설치했다면 winget upgrade Anthropic.ClaudeCode를 사용합니다. 최초 설치 방식에 맞는 한 가지 방법으로 관리하세요.

Studio 앱 업데이트는 별도입니다. Studio의 설정 → 계정 → 최신 버전 확인하기 또는 Studio 다운로드를 이용하세요.

공식 문서 · Claude Code 업데이트

내 작업 환경 만들기

도구와 메뉴를 편하게 열고 화면 테마를 바꿉니다. 개인 홈과 시작 화면 설정은 제공 상태를 확인한 뒤 사용하세요. 작업 환경 설정은 프로젝트 내용과 별도로 저장됩니다.

개인 홈과 도구 고정

전체 도구에서 자주 사용할 도구를 고정할 수 있습니다. 개인 홈과 시작 화면 설정은 설치 버전에 따라 연결 상태가 다르므로, 아래 제공 상태를 먼저 확인하세요.

현재 사용할 수 있는 기능 · AI 도구 → 전체 도구

1. 왼쪽 AI 도구에서 전체 도구를 엽니다.
2. 도구 이름이나 할 일로 검색하고, 필요하면 분류를 선택합니다.
3. 사용할 도구의 고정을 누릅니다. 고정됨으로 바뀌는지 확인합니다.
4. 해제하려면 고정됨을 다시 누릅니다. 고정 해제는 해당 도구에서 만든 작업을 삭제하지 않습니다.

개인 홈을 시작 화면으로 설정

현재 확인한 로컬 버전은 프로젝트 시작 화면을 엽니다. 개인설정 → 시작 화면이 제공되는 설치 버전에서는 아래 순서로 변경할 수 있습니다.

개인설정은 현재 앱·브라우저 환경에 저장됩니다. 다른 컴퓨터로 프로젝트를 가져온 뒤에는 도구 고정과 테마를 따로 설정하세요.

왼쪽 메뉴 패널 열기 · 고정하기

1. 왼쪽의 프로젝트 또는 AI 도구를 눌러 메뉴 패널을 엽니다.
2. 패널을 보면서 작업하려면 패널 위쪽의 패널 고정을 누릅니다. 고정하면 다른 작업으로 이동해도 패널이 유지됩니다.
3. 작업 화면을 넓게 보려면 패널 고정 해제를 누릅니다.
4. 고정하지 않은 패널은 바깥 영역을 누르거나 Esc로 닫을 수 있습니다.

여기서 패널 고정은 메뉴를 펼쳐두는 기능입니다. 전체 도구의 고정은 사용할 도구를 선택하는 기능입니다.

다크 모드 · 라이트 모드 바꾸기

1. Studio 왼쪽 아래에서 해·달 모양의 테마 전환 버튼을 찾습니다.
2. 어두운 화면에서 밝은 화면으로 바꾸려면 라이트 모드로 전환을 누릅니다. 다시 누르면 다크 모드로 전환됩니다.
3. 메뉴와 작업 영역의 배경이 바뀌었는지 확인합니다. 현재 환경에 선택한 테마가 저장됩니다.

테마 버튼은 Studio 작업 환경을 바꿉니다. 직접 만든 디자인 화면의 배경색은 해당 디자인에서 수정합니다. 이 사용 가이드 웹사이트의 테마는 상단 해·달 버튼으로 따로 바꿀 수 있으며, 안내 캡처도 함께 전환됩니다.

화면 구성과 프로젝트 시작

작업을 다시 열 때는 프로젝트 → 최근 프로젝트에서 이름을 선택합니다. 목록에 없으면 전체 보기에서 찾아보세요.

프로젝트 찾기 · 이름 변경 · 다시 열기

1. 프로젝트 시작 화면의 최근 프로젝트 → 전체 보기로 목록을 엽니다.
2. 프로젝트 검색에 이름을 입력합니다. 목록이 없으면 검색어와 전체 / 기획부터 / 코드부터 필터를 확인합니다.
3. 최근 수정순 또는 이름순으로 정렬한 뒤 프로젝트 카드를 선택합니다.
4. 이름을 바꾸려면 목록 카드의 더보기(···) → 이름 변경을 선택합니다. 프로젝트 안에서는 상단 이름을 눌러 수정할 수도 있습니다.

최근 프로젝트에서 이어서 하기

프로젝트 시작 화면의 최근 목록에서 이름을 선택합니다. 목록에 없으면 전체 보기를 열고 검색하세요. 문구·이미지 등 개별 도구의 작업은 해당 도구의 작업 기록에서 다시 확인합니다.

프로젝트 폴더와 삭제

목록의 더보기에서 프로젝트 폴더 열기를 선택하면 데스크톱 파일 탐색기에서 위치를 확인할 수 있습니다. 삭제는 기획과 디자인 연결을 지우는 작업이며 되돌릴 수 없습니다. 보관할 작업은 먼저 프로젝트 내보내기로 저장하세요.

AI 모델과 사용량 확인

1. 왼쪽 아래 설정 → AI 모델을 엽니다.
2. 연결한 계정에서 사용할 수 있는 기본 실행 엔진과 모델을 선택합니다. 처음에는 계정 기본값으로 시작하고, 필요할 때 작업에 맞춰 변경합니다.
3. 작업 화면에 모델 선택기가 있으면 해당 작업의 모델도 확인합니다. 기본 설정을 바꾼 뒤에는 다음 요청을 보내기 전 표시된 모델을 확인하세요.
4. 사용량 탭에서 조회 가능한 한도와 갱신 상태를 확인합니다. 조회 오류와 실제 사용 한도 초과를 구분하세요.

연결한 계정과 인증 방식에 따라 제공되는 모델·한도·사용량 정보가 다릅니다. 토큰만 연결한 경우 사용량이 보이지 않을 수 있습니다. 계정 연결 방식을 먼저 확인하세요.

AI에게 첫 요청 보내기

한 번에 하나의 결과를 요청합니다. 누가, 어떤 상황에서, 무엇을 완료해야 하는지와 바꾸지 않을 조건을 함께 적으면 검토하기 쉽습니다.

1. 기획부터에 위 요청을 입력합니다. 내 서비스에 맞게 사용자와 기능을 바꿔도 됩니다.
2. 요청을 보낸 뒤 질문·진행 상태·결과를 확인합니다. 작업 중에는 같은 요청을 여러 번 보내지 않습니다.
3. AI가 확인을 요청하면 이미 정한 조건과 아직 정하지 않은 조건을 나눠 답합니다.
4. 결과를 읽고 한 항목씩 수정 요청합니다. 예: “예약 완료 화면에 전시명과 방문 날짜가 보이도록 완료 조건을 보강해 주세요.”

기획에서 개발까지

프로젝트 상단의 순서는 기획 → User Flow → 디자인 → 프로토타입 → 개발입니다. 앞 단계에서 정한 내용이 다음 단계의 바탕이 됩니다. 필요한 부분을 고친 뒤 연결된 결과도 함께 확인하세요.

각 단계에서 남기는 결과

기획서와 기능명세 만들기

기획부터에서 누구를 위한 서비스인지, 무엇을 완료해야 하는지, 첫 출시에서 어디까지 만들지를 적습니다. 준비된 문서가 있다면 첨부하거나 기획 화면의 문서 가져오기를 사용합니다.

질문과 확인 사항 정리

1. 초안을 만들기 전 질문이 나오면 보기를 선택하거나 직접 입력합니다. 질문 없이 초안이 만들어진 경우에는 문서의 확인 사항을 검토합니다.
2. 아직 정하지 않은 항목은 가정 또는 미결정 사항으로 남겨 두고, 확정된 요구사항과 구분합니다.
3. PRD에서 제품 목표, 대상 사용자, 제공 환경과 출시 범위를 읽고 수정합니다. 기획 화면의 자동 저장됨 표시를 확인합니다.
4. 기능명세 만들기 또는 기능명세 확인하기로 기능별 검토를 진행합니다.

기능별 동작과 완료 조건 검토

1. 왼쪽 목록에서 기능을 선택합니다. 검색, 우선순위, 검토 상태 필터로 필요한 항목을 찾을 수 있습니다.
2. 기능 설명과 완료 조건의 수정을 눌러 내용을 보완합니다. 대상 사용자와 관련 화면도 함께 확인합니다.
3. 검토를 마쳤으면 검토 완료 후 다음 기능으로 이동합니다. 추가 검토가 필요하면 AI 검토를 요청하고 제안 내용을 확인합니다.
4. 기능이 빠졌으면 기능 추가를 사용합니다. PRD를 수정한 뒤 다시 도출할 때는 비교 화면에서 반영할 변경을 고릅니다.
5. User Flow 구성하기로 화면 흐름을 이어서 만듭니다. 미검토 항목이 남아 있다면 이후에도 돌아와 확인하세요.

User Flow 연결하기

기획에서 나온 기능을 화면과 이동 경로로 정리합니다. 화면이 생겼다고 모든 경로가 완성되는 것은 아니므로, 사용자가 시작해서 완료하는 과정을 직접 따라가며 확인하세요.

1. 프로젝트 상단의 User Flow를 엽니다. 처음이라면 기획을 바탕으로 흐름을 구성합니다.
2. 화면 노드를 선택해 이름과 목적을 확인합니다. 추가할 화면·분기·시작/끝·메모는 보드의 편집 도구를 사용합니다.
3. 노드의 연결점을 끌어 다음 노드에 연결하고, 연결선에 행동이나 조건을 적습니다. 예: “방문 일정 선택”, “예약 신청 완료”.
4. 이미 디자인이 있다면 화면 노드의 디자인 연결에서 해당 화면을 선택합니다. 연결된 화면은 노드의 미리보기로 확인합니다.
5. 맞춤으로 전체 흐름을 보고, 연결이 끝난 뒤 디자인 단계로 이동합니다.

이 예제에서 확인할 경로

• 전시 목록에서 상세 정보로 이동하고 다시 목록으로 돌아올 수 있는가?
• 예약 가능한 시간이 없으면 다른 날짜를 선택할 수 있는가?
• 필수 입력을 빠뜨렸을 때 어느 항목을 채워야 하는지 알 수 있는가?
• 예약 완료 후 선택한 전시·날짜·시간을 다시 확인할 수 있는가?

화면을 만들고 캔버스에서 편집하기

디자인 단계에는 User Flow에 연결된 화면이 모입니다. 디자인 설정에서 사용할 시스템과 화면 환경을 확인하고, 필요한 화면을 생성하거나 기존 디자인을 연결합니다.

1. 디자인 설정에서 프로젝트에 맞는 디자인 시스템과 화면 환경을 확인합니다.
2. 완성된 화면 카드를 선택해 캔버스를 엽니다. 화면이 없으면 해당 화면을 디자인합니다.
3. 디자인 편집 모드에서 요소를 선택하고 오른쪽 속성에서 제공되는 문구·크기·배치·색·간격 등을 조정합니다.
4. 텍스트는 더블클릭해 고칩니다. 구조를 바꾸거나 여러 요소를 함께 수정하려면 AI 요청에 의도와 조건을 설명합니다.
5. 상단의 뷰포트와 배율을 바꿔 확인합니다. 저장 상태를 확인하고 화면 목록으로 돌아갑니다.

요소 추가와 상호작용

• 요소 추가에서 제목, 텍스트, 버튼 등 필요한 항목을 선택합니다. 추가된 위치와 주변 간격을 확인하세요.
• 신규 Graphic에서는 화면에 필요한 그래픽을 다룹니다. 이미지 생성에서 만든 자산은 쓰임새와 배경색을 맞춰 사용합니다.
• 액션 모드에서는 클릭할 요소와 이동할 화면 등 제공되는 동작을 설정합니다. 설정 후 프로토타입에서 실제로 눌러 확인하세요.
• 코멘트 모드에서는 화면의 특정 위치에 의견을 남깁니다. 확인할 요소와 원하는 변경을 구체적으로 적습니다.
• 코드에서 화면 소스를 확인하고, 이력에서 변경 기록을 살펴봅니다. 내보내기는 현재 화면을 다른 작업으로 넘길 때 사용합니다.

프로토타입으로 사용자 여정 체험하기

User Flow와 디자인이 연결되면 사용자가 목표를 완료하는 과정을 시나리오로 확인합니다. 이 예제에서는 전시를 선택하고 방문 일정을 정해 예약 결과를 확인합니다.

1. 프로젝트의 프로토타입 탭에서 연결된 화면을 확인하고 시나리오 만들기를 실행합니다.
2. 체험할 시나리오를 고르고 화면에 표시된 행동을 따라 진행합니다. 버튼 선택과 입력은 체험 화면에서 직접 합니다.
3. 단계 · 피드백에서 전체 단계, 현재 행동, 기대 결과를 확인하고 의견을 남깁니다.
4. 특정 화면만 보려면 시나리오 메뉴의 화면 자유 탐색을 선택합니다. 새 탭에서 체험으로 체험 화면만 따로 열 수도 있습니다.
5. 문구나 경로에 문제가 있으면 디자인 또는 User Flow에서 수정한 뒤 같은 시나리오를 다시 확인합니다.

전시 예약 예제 직접 체험하기 ↗ · 실제 예약이나 결제가 발생하지 않는 데모입니다.

개발 작업대에서 코드 이어가기

화면을 구현 가능한 프로젝트로 연결하고, 실제 데이터·기능·오류 처리를 붙이는 단계입니다. 새 작업을 요청하기 전에 연결할 폴더와 현재 실행 상태를 확인하세요.

계획과 구현 구분하기

요청창의 계획 모드에서는 코드를 바꾸기 전에 작업 범위와 검증 방법을 정리합니다. 구현 모드에서는 정한 내용을 코드에 반영합니다. 파일을 열면 해당 파일이 요청의 참고 대상으로 표시되므로, 작업할 파일이 맞는지 확인하세요.

프로젝트 연결

• 디자인에서 이어서: 프로젝트의 개발 탭에서 개발 도구 준비를 마치고 앱으로 만들기로 화면 코드와 프로젝트 구조를 연결합니다.
• 기존 코드에서 시작: 시작 화면의 코드부터에서 작업할 저장소 폴더를 선택합니다.
• 새 프로젝트로 시작: 프로젝트 이름, 저장 위치와 디자인 시스템을 정합니다. 개발 설정에서 프레임워크와 필요한 패키지 자동 설치 여부를 확인합니다.

1. 개발 대화에 구현할 기능과 완료 조건을 적습니다. 예: “예약 제출 중에는 버튼을 비활성화하고 실패하면 입력값을 유지해 다시 시도하게 해주세요.”
2. 코드에서 변경된 파일을 열고 내용을 확인합니다. 경로, 컴포넌트와 데이터 처리 범위가 요청에 맞는지 살펴봅니다.
3. 미리보기에서 실제 화면을 실행합니다. 필요한 패키지 설치와 실행 명령이 완료됐는지 확인하세요.
4. 변경 검토에서 수정 전후를 비교합니다. 빌드·검사 결과와 실제 화면 동작을 함께 확인합니다.
5. 같은 프로젝트 폴더를 VS Code 또는 Cursor에서 열면 NEXTLAB Builder로 이어서 작업할 수 있습니다.

코드에 Studio 관리 파일 표시가 있으면 재조립할 때 덮어쓰는 파일인지 확인하세요. 별도 기능을 추가할 파일과 Studio가 관리하는 파일을 구분해 작업합니다.

프로젝트 내보내기 · 가져오기

다른 컴퓨터에서 이어서 작업하거나 현재 프로젝트를 복제할 때 .nxlproj 파일을 사용합니다. 전달할 문서만 필요할 때는 산출물 내려받기를 사용하세요.

프로젝트 전체를 파일로 내보내기

앱에서 이동 · 프로젝트 → 전체 보기 → 카드의 더보기(···)

1. 진행 중인 생성을 마치고 수정한 문서·화면의 저장 상태를 확인합니다.
2. 프로젝트 목록에서 내보낼 프로젝트 이름을 확인하고 카드의 더보기(···)를 누릅니다.
3. 내보내기 (.nxlproj)를 선택합니다.
4. 다운로드가 끝나면 저장한 위치에서 파일을 확인합니다. 파일 이름 끝의 .nxlproj 확장자는 유지합니다.
5. 다른 컴퓨터로 옮길 때는 이 파일을 전달합니다. 구분이 필요하면 파일명에 날짜나 검토 회차를 덧붙이세요.

완료 확인 크기가 0이 아닌 .nxlproj 파일이 저장됐는지 확인합니다. 내보내기 이후 수정한 내용은 다시 내보내야 포함됩니다.

파일을 가져와 새 프로젝트로 열기

1. 가져올 컴퓨터에서 Studio를 실행하고 프로젝트 전체 목록을 엽니다.
2. 상단 가져오기를 누르고 전달받은 .nxlproj 파일을 선택합니다. 미리 압축을 풀 필요는 없습니다.
3. 가져오는 중…이 끝날 때까지 기다립니다. 완료되면 새 프로젝트가 열립니다.
4. 기획 문서, User Flow, 디자인 화면과 프로토타입 연결을 차례로 확인합니다.
5. 개발 작업이 있다면 개발 탭에서 환경 준비와 실행 상태를 확인합니다. 다른 컴퓨터에서는 패키지 설치나 외부 서비스 설정이 다시 필요할 수 있습니다.

어디까지 함께 옮겨지나요?

가져오기 후 확인할 항목이 표시되면 빠진 파일이나 연결 저장소 경로를 먼저 확인합니다. 개발 파일에 직접 넣은 설정·자료도 전달 범위에 포함될 수 있으므로 공유 전에 내용을 확인하세요.

Word·Excel 문서로 기획 시작

이미 작성한 요구사항을 Studio의 기획 구조로 정리하는 기능입니다. 프로젝트 아카이브를 여는 것과 다른 작업입니다.

1. 기획부터 → 요구사항 문서 가져오기 또는 기획 화면의 문서 가져오기를 엽니다.
2. .docx, .xlsx, .md, .txt 중 지원 파일을 선택합니다. PDF나 일반 ZIP은 이 입력에 사용할 수 없습니다.
3. 추가로 반영할 조건을 적고 분석을 시작합니다.
4. 구조화된 미리보기에서 PRD · 기능명세 · User Flow를 검토하고 반영할 항목을 선택합니다.
5. 반영 후 원문과 비교해 빠진 요구사항, 숫자, 완료 조건을 확인합니다.

저장과 산출물 내려받기

프로젝트의 현재 상태를 저장하는 것과 외부로 전달할 파일을 내려받는 것은 구분됩니다. 기획에서는 자동 저장됨, 캔버스에서는 저장 상태를 확인한 뒤 프로젝트 상단의 산출물을 엽니다.

프로토타입은 파일 다운로드 대신 프로토타입 탭에서 재생합니다. 체험 화면만 보려면 새 탭에서 체험을 사용하세요.

필요한 도구만 골라 쓰기

문구 한 줄을 다듬거나 화면 하나를 만들 때도 Studio를 사용할 수 있습니다. 왼쪽 AI 도구에서 도구 이름을 검색하거나 분류로 찾아보세요. 자주 쓰는 도구는 고정해 내 도구에서 다시 엽니다.

UX Writing으로 화면 문구 다듬기

화면에 들어가는 문구를 입력하면 브랜드 기준에 맞춰 확인하고 추천 표현을 살펴볼 수 있습니다. 문구 종류와 사용 상황을 함께 지정하면 검토 맥락이 명확해집니다.

1. AI 도구 → UX Writing을 엽니다. 상단의 브랜드 이름을 눌러 적용할 브랜드 기준을 선택합니다.
2. 문구 종류에서 버튼, 완료 메시지, 오류 메시지 등 쓰임새를 선택합니다. 필요한 경우 상황 덧붙이기에 표시될 맥락을 적습니다.
3. 문구를 입력하거나 붙여넣습니다. 추천이 표시되면 밑줄 또는 추천 표현을 선택해 이유를 확인합니다.
4. 제안 중 의도에 맞는 표현만 반영합니다. 이번 글의 말투와 브랜드 설정의 원칙도 확인하세요.
5. 완성된 문장은 문구 복사로 화면에 적용합니다. 저장한 문구와 이전 작업에서 보관된 내용과 작업 이력을 확인할 수 있습니다.

스킬 만들기 · 프로젝트에 적용하기

스킬은 AI에게 반복해서 알려 주던 작업 순서와 결과 기준을 저장한 지침입니다. 기획·기능명세, User Flow, 화면 디자인, 프로토타입에서 필요한 스킬을 선택해 사용할 수 있습니다.

첫 스킬 만들기

1. 왼쪽 메뉴의 스킬을 열면 스킬 라이브러리가 나옵니다. 직접 작성하려면 새 스킬, 예시로 시작하려면 어떤 기준부터 만들까요? 아래에서 기획·디자인·흐름 템플릿을 선택합니다.
2. 스킬 이름과 사용하는 상황을 적습니다. 예: ‘예약 서비스 기획 기준’, ‘예약 생성·변경·취소 기능을 기획할 때’.
3. 사용할 작업 단계를 선택합니다. 기획에만 필요한 지침이라면 기획·기능명세만 선택하세요.
4. 적용 방식을 정하고 작업 지침에 목적 → 작업 순서 → 결과 기준 순서로 적습니다. 처음에는 프로젝트에서 선택으로 시작하면 적용할 곳을 직접 정할 수 있습니다.
5. 지침 확인으로 내용을 읽어 보고 스킬 저장을 누릅니다. 저장 완료 안내와 버전을 확인하세요.

기본 스킬과 프로젝트 선택의 차이

작업에 적용하고 확인하기

작업 화면 오른쪽 위 스킬 설정 버튼에서 2개 적용 또는 미적용으로 현재 단계의 저장된 상태를 확인할 수 있습니다. 선택을 바꾸면 저장 필요가 표시되며, 설정 저장을 눌러야 적용 개수가 바뀝니다. 패널의 저장된 설정에는 적용되는 스킬 이름도 표시됩니다. 확인 필요가 보이면 설정을 열어 연결 상태나 사용할 수 없는 스킬을 확인하세요.

1. 작업 화면 오른쪽 위 → 스킬 설정을 누릅니다. 프로젝트에서는 어느 단계에 있어도 같은 위치에서 열 수 있습니다.
2. 오른쪽에 열린 패널에서 기획 · User Flow · 디자인 · 프로토타입 중 설정할 단계를 고릅니다. 처음에는 현재 작업 단계가 선택됩니다. 개발 단계에서 열면 기획 설정부터 표시되며, 개발 요청에는 이 스킬들이 적용되지 않습니다.
3. 이 프로젝트에서 직접 선택을 고르고 필요한 스킬을 체크합니다. 작업 지침 보기를 펼쳐 내용을 확인하세요. 새 스킬 작성이나 수정은 라이브러리 열기로 이동합니다.
4. 설정 저장을 누릅니다. 패널을 닫지 않고 다른 단계도 이어서 설정할 수 있습니다. 저장하지 않은 선택을 바꾸거나 패널을 닫으면 확인 안내가 나옵니다.
5. 패널을 닫고 생성·수정 작업을 시작합니다. 설정을 저장하는 것만으로 기존 결과가 다시 만들어지지는 않습니다. 실행 후 스킬 설정 → 최근 요청 기록에서 요청에 포함된 이름과 버전을 확인하세요.

한 작업에는 최대 8개 스킬을 선택할 수 있습니다. 지침이 너무 길면 수를 줄이거나 내용을 정리해 주세요. 프로젝트 안에서 만든 디자인 작업은 부모 프로젝트의 디자인 스킬 선택을 따릅니다.

수정 · 복제 · 이전 버전 복원

• 수정: 목록에서 스킬을 열고 저장하면 버전이 올라갑니다. 검색과 작업 단계 필터로 필요한 항목을 찾을 수 있습니다.
• 복제: 편집기 아래 복제를 누르고 이름·내용을 바꿔 저장합니다. 원본은 유지됩니다.
• 복원: 저장 이력 · 이전 버전 가져오기 → 이 내용 가져오기로 내용을 읽어 온 뒤 저장합니다. 예전 이력을 지우지 않고 새 버전으로 저장합니다.
• 잠시 중지: 분류와 사용 상태에서 스킬 사용 가능을 해제하고 저장합니다.
• 삭제: 편집기 아래 스킬 삭제를 누릅니다. 연결했던 프로젝트에서는 스킬 선택을 다시 정리해야 합니다.

SKILL.md 가져오기 · 내보내기

1. 다른 환경으로 옮기려면 저장한 스킬 아래 SKILL.md 내보내기를 누릅니다. 다운로드에는 마지막으로 저장한 내용이 들어갑니다.
2. 받은 파일은 라이브러리 오른쪽 위 가져오기에서 선택합니다. 이름·설명과 본문이 있는 Markdown 파일을 사용하세요.
3. 편집기에서 내용을 읽고 사용할 단계를 정한 뒤 저장합니다. 가져온 스킬은 기본 적용을 켜지 않은 상태로 시작합니다.
4. 프로젝트 오른쪽 위 스킬 설정에서 가져온 항목을 직접 선택합니다.

현재는 지침 본문을 가져옵니다. 외부 스크립트, 참고 파일 묶음과 도구 권한은 가져오지 않으므로 필요한 기준을 본문에 정리해 주세요. 프로젝트 .nxlproj에는 설치본마다 다른 스킬 선택 번호와 요청 기록을 옮기지 않습니다. 스킬 파일을 별도로 내보내고 새 환경에서 다시 선택하세요.

적용되지 않거나 저장이 막힐 때

• 목록에 안 보임: 스킬의 사용 단계가 현재 작업 단계와 같은지 확인합니다.
• 선택한 스킬을 사용할 수 없음: 삭제·중지되었거나 단계가 바뀐 항목입니다. 프로젝트 선택기에서 사용할 수 없는 스킬 제외를 누르고 다시 저장합니다.
• 다른 화면에서 수정됨: 다른 탭의 최신 저장을 덮어쓰지 않도록 막은 상태입니다. 입력 내용을 복사한 뒤 최신 버전을 다시 열어 비교하세요.
• 결과가 바뀌지 않음: 스킬 설정은 다음 실행부터 반영됩니다. 기존 결과를 기준으로 필요한 수정 작업을 새로 요청하세요.

SVG 아이콘과 그래픽 만들기

AI 도구 → 이미지 생성은 Claude가 SVG 코드를 작성해 아이콘과 벡터 그래픽 초안을 만드는 도구입니다. 결과를 확인하고 캔버스에서 색·크기를 조정하거나 대화로 수정합니다. 로딩 씬은 SVG·HTML 기반으로 작업합니다.

1. 새 작업에서 라인 아이콘, 솔리드 아이콘, 일러스트, 3D 일러스트 등 필요한 스타일을 고릅니다. ‘3D 일러스트’는 SVG의 음영으로 입체감을 표현하는 스타일입니다.
2. 사용할 화면, 대상, 색과 분위기를 설명합니다. 예: “전시 예약 완료 화면에 쓸 입장권 그래픽. 크림색 배경과 보라색 전시 공간, 오렌지색 작품을 사용해 주세요.”
3. 결과에서 수정할 도형을 선택하고 오른쪽 패널에서 크기와 색을 조정합니다. 형태를 바꾸려면 선택한 요소와 함께 수정 요청을 보냅니다.
4. 직접 편집한 내용은 변경 저장으로 저장한 뒤 내보내기에서 SVG 또는 PNG · 2×를 선택합니다. HTML 로딩 씬은 HTML로 내려받습니다.
5. 움직이는 일러스트나 로딩 화면에는 모션 내보내기가 표시됩니다. 길이와 배경을 선택해 GIF 또는 WEBM으로 내려받고, 결과 파일을 재생해 확인하세요.

캔버스 위에서 투명 배경·흰 배경·어두운 배경과 미리보기 배율을 바꿔 보세요. 출력 크기의 가로세로 비율 유지를 켜면 원본 비율로 크기를 조절할 수 있습니다. 잘못 편집한 경우 되돌리기로 이전 상태를 확인합니다.

매뉴얼에 사용한 전시 패스 SVG 내려받기

Figma 디자인을 코드로 옮기기

이미 완성된 Figma 디자인이 있다면 AI 도구 → Figma to Code에서 시작합니다. 코드를 만들 프로젝트와 읽어 올 Figma 프레임을 먼저 연결합니다.

1. 왼쪽 탐색기의 폴더 선택으로 작업할 프로젝트를 엽니다. 직접 경로를 입력했다면 열기를 누릅니다.
2. 오른쪽 연동에서 사용할 Figma 연결을 확인합니다. 데스크톱 연결 방식이면 Figma 앱과 대상 파일이 열려 있어야 합니다.
3. 생성에서 UI 킷과 컴포넌트명을 정합니다. Figma에서 대상 프레임을 선택하고 해당 선택 항목의 링크를 복사합니다.
4. Figma 참조에 링크를 붙여넣고 요청사항을 적습니다. 같은 컴포넌트의 오류·빈 상태가 있으면 참조 추가로 함께 넣습니다.
5. 생성 시작 후 결과를 확인합니다. 미리보기 샌드박스를 준비하면 Storybook에서 원본과 비교할 수 있습니다.
6. 생성 산출물의 적용 위치와 파일 변경을 검토합니다. 빌드 검사와 화면 확인을 마친 뒤 프로젝트 작업을 이어갑니다.

• 빌드 검증 + 실패 시 자동수정과 시각 충실도 보정은 생성 후 처리 옵션입니다. 필요한 실행 환경과 연결 상태를 먼저 확인합니다.
• + 일괄 큐는 여러 컴포넌트를 순차 작업할 때 사용합니다. 각 항목의 이름과 참조 화면을 구분합니다.
• 색·간격·상태별 표현은 원본과 비교해 검토합니다. 세부 생성·검토 방법은 Builder의 Figma to Code 안내도 참고할 수 있습니다.

문제가 생겼을 때

현재 단계와 화면에 표시된 메시지부터 확인합니다. 저장 오류가 보이면 창을 닫기 전에 입력 내용과 저장 상태를 확인하세요.

해결이 안 될 때 남길 정보

• 운영체제와 Studio 버전, 문제가 생긴 메뉴를 적습니다.
• 어떤 순서로 조작했는지, 기대한 결과와 실제 오류 메시지를 함께 남깁니다.
• CLI 문제라면 claude --version과 claude doctor 결과에서 오류 부분을 확인합니다.
• 화면을 공유할 때는 계정 이메일·사번·토큰과 프로젝트의 비공개 정보를 가립니다.