API 키 갖고 있어도 헤매는 이유 — 디자이너의 클로드 코드 첫 설치 분투기

요즘 클로드 코드 얘기가 자주 들려요.

다들 한 번쯤은 써봤다고 하고, 생산성이 달라졌다는 말이 자연스럽게 따라오죠. 그런데 디자이너 입장에서 보면, 그래서 이걸 어떻게 써야 하는지에 대한 이야기는 상대적으로 적어요. 코드를 잘 알아야 하는 건지, 개발자처럼 접근해야 하는 건지, 그냥 새로운 디자인 툴처럼 써도 되는 건지 애매하고요. 저도 비슷한 상태에서 시작했고, 몇 번 시행착오를 거치면서 나름의 사용 흐름을 만들었어요.

이미 세팅해둔 환경에서 설명하는 건 의미가 적을 것 같아서, 이번에는 연결이 전혀 안 된 노트북을 꺼내서 정말 처음부터 다시 시작해봤어요. 설치부터 로그인, 실제 실행까지 하나씩 따라가면서 정리해요.

VSCode에서 시작 — 확장 프로그램 설치

평소에 익숙한 Visual Studio Code 기준으로 설명할게요. VSC와 Claude를 함께 쓰는 흐름이에요. 다른 에디터를 써도 비슷한 방식으로 적용할 수 있고요.

VSCode를 실행한 뒤 확장 프로그램 메뉴에서 Claude를 검색해 설치해요. 비슷한 이름의 확장이 여럿 보일 수 있는데 Anthropic에서 제공한 공식 확장인지 확인하고 설치하는 게 좋아요. 설치하고 나면 오른쪽에 클로드 로고가 보여요. 여기서 구독을 안 하신 분들은 구독부터 해야 해요. 클로드 코드는 무조건 돈을 내야 하거든요.

첫 번째 함정 — 구독 로그인 vs API 키

확장 설치 후 바로 코드 입력 화면이 나오는 게 아니에요. 먼저 로그인 방식 선택 화면이 나타나요. 여기서 헷갈릴 수 있어요.

저도 처음에는 어떤 걸 눌러야 하는지 몰라서 이것저것 눌러봤어요. 보통은 가장 위에 있는 Claude.ai Subscription을 선택하게 돼요. 그러면 브라우저로 연결되면서 "연결 요청, 승인, 거절" 같은 화면이 뜨고, 자연스럽게 승인을 누르게 되고요.

문제는 여기서부터였어요. 저는 이미 API 키를 갖고 있었거든요. 당연히 키를 입력하는 화면이 나올 거라 생각했는데 그런 단계는 전혀 안 나타났어요. 대신 구독 기반으로 연결이 진행되면서, 이 방식은 제가 생각했던 'API 기반 사용'과는 다르게 동작한다는 걸 나중에야 알게 됐고요.

정리하면 이래요. 이 화면에서 두 가지 선택지가 있어요. 하나는 방금처럼 구독 계정으로 로그인하는 방식, 다른 하나는 아래에 있는 Anthropic Console을 선택해서 API 키 기반으로 사용하는 방식. 처음에 아무 생각 없이 첫 번째를 선택하면 API 키 입력 단계가 아예 안 나오기 때문에, 이미 키를 갖고 있다면 두 번째 옵션이 맞아요.

저는 API 키를 갖고 있었지만 입력하는 단계가 안 나오고 계속 API 에러가 떴어요. 결국 다시 설정을 확인하면서, 아예 API 키를 새로 발급받아 연결하는 방식으로 진행하기로 했어요.

API 키 새로 발급받기

발급은 Anthropic 공식 문서에서 할 수 있어요. (https://platform.claude.com/docs/ko/home)

문서에 들어가면 Claude API 사용 방법이 정리돼 있는데, 처음이라면 복잡하게 읽기보다 키 발급 과정만 따라가는 게 빨라요. 좌측 하단 프로필 메뉴 → '조직 설정(Organization Settings)' → API 키 관리 메뉴. 여기서 새 키를 생성해주면 돼요.

키 발급받고 나면 로컬 환경에 연결하는 단계가 남아요. 안내에 따라 프로젝트 폴더에서 `export ANTHROPIC_API_KEY='your-api-key-here'`를 입력해주면 되는데, 여기서 또 한 번 막혔어요.

두 번째 함정 — 노트북에 Node.js가 없었어요

또 이렇게 떠버렸어요. 개발을 한 번도 안 한 노트북이라 그런 거 같아요.

저처럼 개발 환경이 전혀 세팅 안 된 노트북이라면, 이 명령어 자체가 제대로 동작하지 않을 수 있어요. 실제로 이 단계에서 다시 오류가 발생했고, 그제서야 기본적인 실행 환경이 필요하다는 걸 알게 됐고요.

결국 Node.js 사이트에 들어가 안내대로 설치를 진행했어요. 클로드가 알려주는 대로 하나씩 따라가다 보니, 그제서야 필요한 환경이 갖춰지기 시작했어요. (개발자한테는 너무 당연한 단계겠지만, 디자이너한테는 그렇지 않아요.)

다시 실행해보니 드디어 클로드 코드가 제대로 동작했어요.

정리하며

원래는 이 글에서 사용 방법까지 함께 정리하려고 했는데, 설치 과정만으로도 생각보다 길어졌어요. 그래서 여기까지 — 클로드 코드를 처음 실행하기까지의 과정 — 정리하는 데서 마무리해요.

세 군데에서 막혔어요. 구독 로그인 vs API 키, 새 API 키 발급, Node.js 설치. 개발 환경에 익숙하지 않은 디자이너라면 제가 헤맨 자리에서 똑같이 멈출 가능성이 커요. 그러니까 이 글의 진짜 가치는 "어디서 막히는지 미리 알고 시작하는 것" 정도가 아닐까 싶어요.

다음 글에서는 UIUX 디자이너의 관점에서 이 도구를 실제로 어떻게 활용할 수 있는지 — 어떤 식으로 바이브 디자이닝을 시작할 수 있는지에 대해 이어서 정리할게요.