반복되는 컨텍스트 스위칭, 이제는 작별할 때가 되었을까요?
여러분은 하루에 몇 번이나 창을 옮겨 다니시나요?
기획안을 보기 위해 노션을 켜고, 디자인 시안을 확인하려 피그마를 열고, 다시 코드를 짜기 위해 IDE로 돌아오는 과정 말이죠. 저 역시 오랫동안 이 '컨텍스트 스위칭(Context Switching)'의 늪에서 허우적거리곤 했습니다. 집중력이 한 번 깨지면 다시 몰입하기까지 적지 않은 시간이 걸린다는 걸 알면서도, 업무의 특성상 어쩔 수 없는 일이라 치부해 왔죠.
하지만 최근 Claude Code와 **MCP(Model Context Protocol)**를 접하면서 제 업무 방식에는 아주 큰 변화가 생겼습니다. 단순히 "AI가 코드를 대신 짜준다"는 수준을 넘어, 기획과 디자인, 그리고 개발이 하나의 흐름으로 연결되는 경험을 하고 있거든요. 오늘은 제가 직접 부딪히며 배운 Claude Code 활용법과, 디자인 및 기획 단계에서 유용하게 쓸 수 있는 MCP들에 대해 차분히 이야기를 풀어보려 합니다.
Claude Code, CLI에서 만나는 듬직한 동료
처음 Claude Code를 설치하고 터미널에 claude를 입력했을 때의 그 생소함을 기억합니다. 화려한 GUI(그래픽 인터페이스)에 익숙했던 저에게 텍스트만 가득한 CLI 환경은 조금 차갑게 느껴지기도 했거든요. 하지만 며칠간 손에 익히고 나니, 이만큼 직관적이고 강력한 도구가 또 없다는 생각이 들었습니다.
Claude Code는 단순한 챗봇이 아닙니다. 내 로컬 파일 시스템에 직접 접근하고, 명령어를 실행하며, 테스트 결과에 따라 스스로 코드를 수정하는 '에이전트'에 가깝습니다. 제가 "이 페이지에 새로운 필터를 추가하고 관련 테스트 코드를 작성해 줘"라고 명령하면, Claude는 관련된 파일을 찾아 분석하고, 코드를 수정한 뒤, 실제로 테스트를 돌려 성공 여부까지 확인합니다.
이 과정에서 느낀 가장 큰 장점은 '맥락의 유지'였습니다. 브라우저를 열어 코드를 복사해서 붙여넣고 질문할 필요 없이, 내가 현재 작업 중인 터미널 안에서 모든 대화가 이루어지기 때문입니다. 덕분에 업무 효율이 비약적으로 상승하는 것을 체감할 수 있었습니다.
MCP(Model Context Protocol)가 가져온 연결의 힘
여기서 한 걸음 더 나아가게 해주는 것이 바로 MCP입니다. 아마 기술적 용어라 조금 생소하실 수도 있을 텐데요. 쉽게 설명하자면 MCP는 Claude에게 '손과 발', 그리고 '외부 세계로 연결되는 통로'를 만들어주는 표준 규약입니다.
기존의 AI가 학습된 데이터 안에서만 대답했다면, MCP를 장착한 Claude는 외부 도구와 실시간으로 소통할 수 있습니다. 예를 들어, 구글 드라이브 MCP를 연결하면 Claude가 내 드라이브에 있는 기획안을 직접 읽어올 수 있고, 피그마 MCP를 연결하면 디자인 요소의 값을 추출해 올 수 있는 식이죠.
이 MCP 시스템을 잘 활용하면, 개발자가 아닌 기획자나 디자이너분들도 AI와 협업하는 방식이 완전히 달라질 수 있습니다. 정보를 전달하기 위해 문서를 정리하고 전달하는 과정이 생략되고, AI가 직접 필요한 정보를 찾아오게 만들 수 있으니까요.
디자인과 기획을 위한 실무 활용 MCP 가이드
실제로 제가 업무에서 유용하게 사용 중인 몇 가지 MCP 조합을 소개해 드릴까 합니다. 특히 디자인과 기획 단계에서 Claude Code와 함께 사용했을 때 시너지가 컸던 도구들입니다.
1. 피그마(Figma) MCP: 디자인을 코드로 읽다
디자이너가 작업한 피그마 링크를 건네받고, 일일이 폰트 크기나 컬러 코드를 확인하던 번거로움이 사라졌습니다. 피그마 MCP를 활용하면 Claude가 직접 디자인 시안의 계층 구조와 스타일을 분석합니다.
- 활용법: "피그마 시안의 헤더 컴포넌트 색상값을 가져와서 CSS 변수로 등록해 줘."
- 장점: 디자인 가이드와의 오차를 줄이고, 스타일 적용 시간을 단축합니다.
2. 구글 드라이브 & 노션 MCP: 기획안의 즉각적 반영
가장 빈번하게 일어나는 일이 기획의 변경이죠. 기획자가 노션이나 구글 문서에 업데이트한 내용을 일일이 읽고 코드를 고치는 대신, Claude에게 문서의 주소를 알려주고 변경 사항을 반영해달라고 요청합니다.
- 활용법: "최신 기획안 문서에서 변경된 API 명세에 맞춰서 인터페이스 타입을 업데이트해 줘."
- 장점: 기획 누락을 방지하고, 문서와 코드 사이의 정합성을 높여줍니다.
3. Slack & GitHub MCP: 소통의 자동화
작업이 끝난 후 진행 상황을 슬랙에 공유하거나, 깃허브에 Pull Request를 올리는 과정도 MCP를 통해 자동화할 수 있습니다. 업무 효율은 이런 사소한 반복 작업을 줄이는 데서 시작되더군요.
- 활용법: "현재까지의 작업 내역을 요약해서 #project-sync 채널에 보고해 줘."
- 장점: 보고를 위한 별도의 문서 작성 시간을 아낄 수 있습니다.
실제 경험담: 어느 고단했던 오후의 터닝포인트
얼마 전, 갑작스러운 요구사항 변경으로 프로젝트의 전체적인 레이아웃을 수정해야 했던 적이 있었습니다. 평소라면 한숨부터 쉬고 기획서와 피그마를 번갈아 보며 코드를 하나하나 수정했겠지만, 그날은 Claude Code와 함께였습니다.
"현재 피그마 시안의 '모바일 대응' 섹션을 참고해서 전체 레이아웃을 반응형으로 고쳐주고, 바뀐 기획안에 있는 새로운 버튼 액션을 추가해 줘."
Claude는 잠시 생각을 정리하더니(Sequential Thinking), 파일들을 하나씩 훑기 시작했습니다. 제가 커피 한 잔을 내리는 동안 Claude는 리팩토링을 진행했고, 수정된 화면을 브라우저에서 확인할 수 있게 준비해 두었더군요. 완벽하지 않은 부분은 제가 한두 마디 피드백을 주자 즉시 반영되었습니다. 그때 느꼈던 전율은 잊기 어렵습니다. AI가 단순히 코드를 짜는 기계가 아니라, 내 의도를 이해하고 협업하는 '동료'가 될 수 있다는 확신이 들었거든요.
물론 모든 과정이 순탄하기만 한 것은 아닙니다. 때로는 Claude가 의도를 오해하기도 하고, MCP 설정 과정에서 권한 문제로 씨름하기도 합니다. 하지만 그 시행착오 끝에 얻는 업무 효율의 결과물은 그만한 가치가 충분했습니다.
처음 시작하는 분들을 위한 소소한 팁
Claude Code와 MCP를 처음 도입하시려는 분들께 제가 겪으며 얻은 팁을 몇 가지 나누고 싶습니다.
- 환경 설정에 시간을 투자하세요: 처음에 MCP를 연동하고 API 키를 설정하는 과정이 귀찮을 수 있습니다. 하지만 이 초기 설정이 완료되는 순간, 여러분의 터미널은 마법 같은 공간으로 변합니다.
- 구체적으로 요청하세요: "이거 좀 고쳐줘"보다는 "이 파일의 20번 라인에 있는 함수를 A라는 기획안의 조건에 맞춰서 B 방식으로 바꿔줘"라고 말하는 것이 훨씬 정확한 결과물을 가져옵니다.
- Claude의 질문을 귀담아드으세요: Claude Code는 작업을 수행하다가 확실하지 않은 부분이 생기면 사용자에게 질문을 던집니다. 이때 상세히 대답해 줄수록 결과물의 퀄리티가 비약적으로 올라갑니다.
마치며: 기술이 우리에게 주는 진정한 가치
기술은 끊임없이 발전하고, 그 속도는 가끔 두려울 정도로 빠릅니다. 하지만 제가 느낀 기술의 진정한 가치는 단순히 '빠른 처리'에 있지 않았습니다. 오히려 반복적이고 지루한 작업에서 우리를 해방시켜, '어떻게 하면 더 좋은 서비스를 만들까?', '어떻게 하면 사용자에게 즐거움을 줄까?'와 같은 더 본질적이고 창의적인 고민에 집중할 시간을 선물해 주는 데 있다고 믿습니다.
Claude Code와 MCP는 저에게 그런 '시간의 선물'을 안겨주었습니다. 여러분도 이 새로운 흐름에 몸을 맡겨보시는 건 어떨까요? 처음엔 낯설겠지만, 곧 그 편리함 속에서 새로운 즐거움을 발견하시리라 믿어 의심치 않습니다.
이번 포스팅을 마무리하며 (회고)
글을 쓰면서 지난 몇 달간 제가 겪었던 변화들을 다시금 되돌아보게 되었습니다. 처음엔 "과연 AI가 내 복잡한 워크플로우를 이해할 수 있을까?"라는 의구심이 컸지만, 이제는 없어서는 안 될 소중한 파트너가 되었습니다. 기술적인 내용을 최대한 차분하고 알기 쉽게 풀어서 전달하려고 노력했는데, 이 글이 업무 효율을 고민하는 많은 분께 작은 실마리가 되었으면 좋겠습니다.
