UIUX 디자이너를 위한 클로드 코드 입문 - 설치편

다들 쓴다는데, 나는 어디서부터 시작해야 할까

요즘 클로드 코드 이야기를 자주 듣는다.

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

이미 한 번 세팅해둔 환경에서 설명하는 건 큰 의미가 없을 것 같았다. 그래서 이번에는 연결이 전혀 되어 있지 않은 노트북을 꺼내서, 정말 처음부터 다시 시작해보기로 했다. 설치부터 로그인, 그리고 실제로 실행해보기까지의 과정을 하나씩 따라가면서 정리해보려 한다.

나는 평소에 익숙하게 쓰던 Visual Studio Code를 기준으로 클로드 코드를 사용했다. 그래서 이 글에서도 VSC와 Claude를 함께 사용하는 흐름으로 정리해보려 한다. 물론 꼭 이 조합일 필요는 없고, 다른 에디터를 사용해도 비슷한 방식으로 충분히 적용할 수 있다.

Visual Studio Code를 실행한 뒤, 확장 프로그램 메뉴에서 Claude를 검색해 설치해준다. 비슷한 이름의 확장 프로그램이 여럿 보일 수 있기 때문에, Anthropic에서 제공한 공식 확장인지 확인하고 설치하는 것이 좋다.

오른쪽에 클로드 로고가 보인다. 여기서 구독을 하지 않으신 분들은 구독을 해야 한다. 클로드 코드는 무조건 돈을 내야 한다.

확장 프로그램을 설치하고 나면, 바로 코드를 입력하는 화면이 나오는 게 아니라 먼저 로그인 방식을 선택하는 화면이 나타난다. 여기서 조금 헷갈릴 수 있다.

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

문제는 여기서부터였다.

나는 이미 API 키를 가지고 있었기 때문에, 당연히 키를 입력하는 화면이 나올 거라고 생각했는데 그런 단계는 전혀 나타나지 않았다. 대신 구독 기반으로 연결이 진행되면서, 이 방식은 내가 생각했던 “API 기반 사용”과는 조금 다르게 동작한다는 걸 나중에야 알게 됐다.

정리해보면, 이 화면에서는 두 가지 선택지가 있다.

하나는 방금처럼 구독 계정으로 로그인하는 방식이고,
다른 하나는 아래에 있는 Anthropic Console을 선택해서 API 키 기반으로 사용하는 방식이다.

처음에 아무 생각 없이 첫 번째를 선택하면 API 키 입력 단계가 아예 나오지 않기 때문에, 이미 키를 가지고 있는 경우라면 두 번째 옵션을 선택하는 게 맞다.

나는 API 키를 이미 가지고 있었기 때문에, 당연히 입력하는 단계가 나올 줄 알았는데 그런 과정은 전혀 보이지 않았고 계속 API 에러가 떴다.

결국 다시 설정을 확인하면서, 아예 API 키를 새로 발급받아 연결하는 방식으로 진행하기로 했다. 이 과정은 Anthropic의 공식 문서에서 확인하고 API를 발급 받을 수 있다.

https://platform.claude.com/docs/ko/home

Documentation

문서에 들어가면 Claude API를 사용하는 방법이 정리되어 있는데, 처음이라면 복잡하게 읽기보다는 키를 발급받는 과정만 따라가는 것이 더 빠르다. 좌측 하단의 프로필 메뉴를 선택한 뒤 ‘조직 설정(Organization Settings)’으로 들어가면 API 키를 관리할 수 있는 메뉴가 보인다. 여기서 새로운 키를 생성해주면 된다.

API 키를 발급받고 나면, 이제 로컬 환경에 연결하는 단계가 남는다. 안내에 따라 프로젝트 폴더에서

export ANTHROPIC_API_KEY='your-api-key-here'를 입력해주면 되는데, 여기서 또 한 번 막히게 된다.

또 이렇게 떠버렸다. 개발을 아예 한 적이 없는 노트북이라 그런 거 같다.

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

결국 Node.js 사이트에 들어가 안내대로 설치를 진행했다. 클로드가 알려주는 대로 하나씩 따라가다 보니, 그제서야 필요한 환경이 갖춰지기 시작했다.

그리고 나서 다시 실행해보니, 드디어 클로드 코드가 제대로 동작하기 시작했다.

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

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