코드사냥꾼의 전리품

Cursor + Figma MCP vs Claude Code CLI + Figma MCP 테스트 후기

1. 들어가며얼마 전, Figma MCP를 활용해 UI 개발 속도를 크게 높인 회사 사례를 접하면서“나도 프로젝트에서 한번 써보고 싶다”는 생각을 계속 가지고 있었다.그러다 마침 프로젝트가 하나 마무리되면서 시간이 생겨, 본격적으로 Figma MCP 기반의 UI 자동화를 실험해보기로 했다.현재 내가 사용하는 개발 환경은 아래와 같다.IDE: CursorAI 모델: Claude Code CLI (Opus 4.5)여기서 자연스럽게 한 가지 궁금증이 생겼다.“Cursor와 Figma MCP를 직접 연동하는 경우와,Cursor IDE 내부에서 Claude Code CLI + Figma MCP 조합을 사용하는 경우는실제로 어떤 차이가 있을까?”두 방식 모두 Figma MCP를 사용한다는 점은 같지만,IDE·모델·..

들어가며feconf 2025를 다녀오고 나서 바로 실천해야겠다고 마음먹은 것은 Cursor AI를 활용해서 귀찮은 반복작업을 자동화하는 일이었다.💭 feconf 2025 후기가 궁금하다면, 여기실제로 Cursor AI를 사용하면서 "어떻게 해야 진짜 잘 활용할 수 있을까?", "AI 시대에 (프론트엔드) 개발자로서 나는 어떻게 성장해야 하지?"를 항상 고민했었다.단순히 "특정 라이브러리 예제를 보여줘" 같은 생성형 AI 사용법만으로는 오히려 의존도만 높아지고, 실질적인 성장이나 생산성 향상으로는 잘 이어지지 않는다는 생각이 들었기 때문이다.정말 중요한 건 하루 중 대부분을 보내는 회사에서 어떻게 AI를 활용해 업무의 효율을 올리고, 그 과정에서 성장할 수 있을까 고민하는 자세라고 생각했다.그래서 이번 ..

들어가며회사와 집을 오가는 일상이 어느새 익숙한 루틴이 되어버렸다.그러다 보니 집에 오면 묘한 보상심리에서 “온/오프는 확실하게 해야지!”라는 다짐과 함께, 개발과는 전혀 상관없는 취미 생활에만 몰두하게 되곤 했다.그런데 문득, 이렇게 놀기만 하다가는(?) 어느 순간 우물 안 개구리가 되어버릴 수도 있겠다는 생각이 들었다.개발자가 된 이후로 나는 이 우물 안 개구리 상태를 특히 경계하게 됐다.아무래도 컴퓨터 언어로 다양한 문제를 마주하고 해결해야 하는 직업이다 보니 흐름을 놓치면 나는 그저… 대과거 사람이 되는 것 같달까? 허허그래서 나는 누군가의 경험을 듣고, 그 안에서 인사이트를 얻는 걸 좋아한다.교육이든 컨퍼런스든 뭔가 열린다는 소식을 들으면 “일단 가보자”는 마음으로, 기회가 닿을 때마다 참석하려..

0. 들어가며2년째 멈춰 있던 내 개발 블로그 .... 반성 또 반성벌써 만 3년 차 개발자가 되었는데(말도 안된다!!!!) 그동안 겪었던 여러 고민과 경험을 기록해 보려고 한다.미래의 나에게 동기부여가 될 수 있고, 또 누군가에게는 작은 공감이 되길 바라면서!이번 글에서는 프로젝트를 하면서 테스트 코드를 도입하게 된 배경과, 고민했던 전략들을 솔직하게 풀어내려고 했다.글이 조금 길고 서술 위주일 수 있지만, 내 이야기를 나누며 함께 생각해 보는 시간이 되면 좋겠다.1. 도입 배경작년 초까지 플랫폼 서비스를 개발하면서, 서비스 특성상 안정성에 대한 고민이 깊어졌다. 이 고민은 자연스럽게 테스트 주도 개발(TDD) 방법론에 대한 관심으로 이어졌고, 그 결과 NextStep의 테스트 코드 수업을 수강하게 되..

"너무 바빴고, 부족함에 많이 울었고 힘들었다." 내가 경험했던 22년은 위의 한 문장으로 정리할 수 있다. 개발자로서의 인생 첫 회고를 부정적인 단어로 시작하는 것이 아쉽지만 언젠가 다시 꺼내보았을 때 미래의 나에게도 큰 동기부여가 될 것 같아 솔직하게 써보려 한다. 1. 2022년 5월 말, 첫 취직 💼 감사하게도 좋은 기회를 통해 B2B 스타트업에서 프론트엔드 개발자로 일하게 되었다. 당시 기존 제품을 SaaS 플랫폼화 하여 글로벌 진출을 목표하고 있어서 맡을 업무에 대한 기대감이 컸고, 실패하더라도 도전하는 것에 큰 의미를 두는 사내 가치관이 나와 잘 맞아서 행복했다. 당시 팀 내 프론트엔드 개발자는 나 포함 3명이었고, 신입 개발자로 이루어져 있었다. 그래서일까? 만나게 된 동료분들도 엄청난 열..

pointer-events ? 해당 속성을 통해 마우스 이벤트(hover, click, drag 등)에 어떻게 동작할지 지정할 수 있다. 다만, 대부분의 속성 값은 SVG 전용이기 때문에 기본 html 태그에는 none 또는 auto 값만 설정할 수 있다. [속성 값] none : 요소가 포인터 이벤트의 대상이 되지 않는다. 그러나 해당 요소의 자손이 다른 pointer-events 값을 지정한 경우, 그 자손은 대상이 될 수 있다. auto : 요소가 pointer-events 속성을 지정하지 않은 것처럼 행동한다. inherit : 부모 요소로부터 pointer-events 값을 상속받는다. (더 많은 속성 값은 https://developer.mozilla.org/en-US/docs/Web/CSS/..

문제 https://programmers.co.kr/learn/courses/30/lessons/12954?language=javascript 코딩테스트 연습 - x만큼 간격이 있는 n개의 숫자 함수 solution은 정수 x와 자연수 n을 입력 받아, x부터 시작해 x씩 증가하는 숫자를 n개 지니는 리스트를 리턴해야 합니다. 다음 제한 조건을 보고, 조건을 만족하는 함수, solution을 완성해주세요. programmers.co.kr 🚩 해결 function solution(x, n) { let answer = []; for(let i = 1; i

문제 https://programmers.co.kr/learn/courses/30/lessons/12969 코딩테스트 연습 - 직사각형 별찍기 이 문제에는 표준 입력으로 두 개의 정수 n과 m이 주어집니다. 별(*) 문자를 이용해 가로의 길이가 n, 세로의 길이가 m인 직사각형 형태를 출력해보세요. 제한 조건 n과 m은 각각 1000 이하인 자연수 programmers.co.kr 🚩 해결 process.stdin.setEncoding('utf8'); process.stdin.on('data', data => { const n = data.split(" "); const a = Number(n[0]), b = Number(n[1]); let result = ""; for(let i = 0; i < b; i..

하나의 레파지토리에 성격이 다른 폴더들이 존재할 때 정리를 하고 싶어 진다. 다른 레파지토리로 변경하고 싶을 때 아래와 같이 하면 된다. $ mv 옮길 폴더명 옮겨질 디렉토리 이때, 디렉토리는 pwd를 통해 옮겨질 경로를 확인하면 된다. 이후, git으로 관리할 폴더 안에서 아래와 같이 선언한다. $ git init ls -al 명령을 통해 .git 이 폴더에 잘 생겼는지 확인한다. 이때, git init 명령만으로는 관리를 위한 원격 저장소가 생기지 않는다. 그래서, 'git remote add origin 새로운 레파지토리 주소'를 통해 해당 폴더를 관리할 레파지토리 주소를 원격 저장소로 지정해야 한다. // 현재 디렉토리의 원격 저장소 확인 $ git remote -v // 원격 저장소 지정 $ g..

클론 코딩을 하거나 주어진 과제를 통해 HTML 구조를 잡을 때 쉬우면서도 어렵게 느껴진다. 그 이유는 시맨틱 태그를 적절하게 사용해야하며 어떻게 구조를 잡는 것이 더 효율적인지 고민에 빠지기 때문이다. 이럴 때 나는 잘 만들어진 홈페이지의 구조를 보는데 솔직히 코드만 보고는 명확하게 파악하기 힘들다. 이를 해결하기 위한 방법을 찾아보다가 아주 좋은 팁을 발견하게 되었다. 바로 크롬 개발자 도구 console창에 들어가서 다음과 같이 DOM 요소를 조작하는 것!!! 사용 방법 document.querySelector('*').style.boxSizing = 'border-box'; document.querySelectorAll('div').forEach(e => e.style.border = "1px s..