안녕하세요.
클로드 MCP를 이용해서 웹페이지를 만드는 스터디를 진행하고 있는 이재엽입니다.
지난주에 같이 스터디하시는 분들께서 클로드에 MCP추가하는 것을 너무 잘하셔서 아예 클로드 코드까지 설치해버렸어요. MCP중에서 데스 크탑 커멘더 라는 게 있는 데요. 자신의 운영체계의 파일시스템에 접근해서 파일을 새로 만들거나 삭제하기도 하는 신기한 도구입니다. 게다가 터미널(맥)이나 명령프롬프트(윈도우)에서 명령어를 실행할 수 있는 무서운 녀석입니다. 잘못하면 파일이나 폴더를 통째로 날릴 수도 있답니다.
암튼, 이 데스크탑커맨더의 역할을 기본으로 하는 게 클로드코드에요.
CLI방식이라고 하고, 이건 예전부터 마우스가 없던 시절부터 컴퓨터와 소통하는 창구였어요. 사실 컴퓨터를 컴퓨터처럼 사용할 수 있는 방법이지만 요즘은 GUI(그래픽유저인터페이스)가 발전해서 잘 사용하지않죠.
저는 요즘 클로드코드를 주로 사용하고 있습니다.
한가지 팁이 생각나서 게시글을 작성하게 되었습니다.
전 오늘 랜딩페이지 작업을 하고 있었습니다. 이런 작업이 익숙하지않아서 러버블을 이용해서 웹페이지를 만들고 있었습니다.
우선, 내용을 수정하려면 러버블에서 작업을 하지않고(순식간에 크레딧을 다 써버리는 마법을 볼 수 있어요) 그래서 보기좋을 정도가 되면 제 로컬로 코드를 가져옵니다.
러버블에서 깃허브와 연결하면 소스코드를 가져올 수 있어요.
이 방법을 알려드리는 게 목표가 아니라서 넘어갈게요. 위의 이미지대로 클릭하면 연결하실 수 있어요.
깃허브에 저장된 코드를 로컬로 클론을 합니다. git clone 자신의 저장소주소
(와!!! 제가 오늘은 사례를 너무 불친절하게 쓰는 경향이 있네요... ㅠㅠ)
보통 상세페이지작업을 할 때 이미지는 이미지생성하는 생성형AI모델로 만들어와서 폴더의 어딘가에 저장을 하겠지만, 그게 갑자기 귀찮아져서 클로드코드에서 시켜보기로 합니다.
(얼른 랜딩페이지 만들어야하는 데...)
저의 아이디어는 이렇습니다.
클로드코드는 터미널의 명령도 잘 수행하니까요. 터미널에서 api서버호출하는 방법을 사용합니다.
어떻게 하냐면, curl 명령어로 이미지를 생성하는 서버에 관련정보를 보내서 이미지와 교환을 하는 것이죠. 그래서 요즘 핫한 나노바나나를 이용해보기로 합니다.
curl은 클라이언트 url의 약어로 클라이언트가 서버에 호출하는 명령이라고 생각하시면 됩니다.
나노바나나의 curl 주소
https://ai.google.dev/gemini-api/docs/image-generation?hl=ko#rest
위 주소에 가시면
curl -s -X POST
"https://generativelanguage.googleapis.com/v1beta/models/gemini-2.5-flash-image-preview:generateContent" \
-H "x-goog-api-key: $GEMINI_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"contents": [{
"parts": [
{"text": "Create a picture of a nano banana dish in a fancy restaurant with a Gemini theme"}
]
}]
}' \
| grep -o '"data": "[^"]*"' \
| cut -d'"' -f4 \
| base64 --decode > gemini-native-image.png이 코드를 터미널에 붙혀넣고 실행하면 이미지를 받아옵니다. $GEMINI_API_KEY 물론 이런 걸 세팅해야해서 한번에 되지는 않겠지만요.
저도 무료로 사용하고 있는 api key로는 생성이 안되서 다른 이메일로 계정을 만들어서 90일동안 300불을 지원하는 프로그램으로 apikey를 활성화했습니다.
https://cloud.google.com/vertex-ai?hl=ko
이거 참고해보세요.
이 코드를 클로드코드의 창에 붙혀넣고, 대화를 이어가면 터미널에서 이 명령을 실행해서 이미지를 만듭니다. 게다가 클로드코드는 제가 열어놓은 폴더에 접근을 할 수 있으니 이미지를 저장할 수도 있습니다.
제가 작업중인 랜딩페 이지에는 5개의 목업이미지를 대체할 이미지가 필요했는 데,
이미지를 생성해서 알아서 파일이름도 목업이미지와 맞게 만들고,
알아서 저장하는 것을 보았습니다.
클로드코드에서 작업한 결과
저는 나노바나나를 예시로 보여드렸지만,
replicate, fal.ai 등 api기반으로 서비스하는 곳을 이용하셔도 좋습니다.
웹페이지에 이미지가 들어가야 제맛 아니겠습니까?
정리해보겠습니다.
클로드코드는 파일시스템에 접근이 가능하다.
터미널에서 실행할 수 있는 명렁어도 실행할 수 있다.
이 두가지의 핵심기능으로 컴퓨터에서 할 수 있는 거의 대부분의 작업을 할 수 있습니다.
즐거운 터미널 생활되세요.