claude code에 figma 반영 문제

안녕하세요. 전혀 번거롭지 않으니 편하게 질문 주셔도 됩니다. 이런 고민을 하시는 과정 자체가 실제 서비스를 만드는 데 아주 중요합니다.Lovable로 만든 소스코드와 Figma UX/UI를 Claude Code에 반영하는 방식은 보통 “디자인을 그대로 자동 변환한다”기보다는, Figma를 기준 문서처럼 활용하면서 Claude Code가 그 구조와 의도를 이해하도록 만드는 방식에 가깝습니다. 말씀하신 것처럼 버튼 하나하나를 일일이 따는 방식은 저도 비효율적이라고 생각합니다.제가 주로 하는 방식은 Figma에서 화면 전체 흐름을 먼저 정리하고, 각 페이지의 역할, 주요 컴포넌트, 사용자 행동, 상태 변화 같은 것을 텍스트로 함께 정리한 뒤 그 정보를 Claude Code에 넣는 것입니다. 즉, 단순히 “이 화면처럼 만들어줘”가 아니라, “이 페이지는 회원가입 화면이고, 상단에는 헤더, 중간에는 입력 폼, 하단에는 CTA 버튼이 있으며, 에러 상태에서는 어떤 메시지를 보여주고, 모바일에서는 어떻게 배치된다”까지 설명해 주는 방식이 훨씬 잘 동작합니다.MCP 서버를 붙이는 방식도 맞습니다. 다만 핵심은 MCP 자체보다, Claude Code가 Figma의 디자인 토큰, 레이아웃 구조, 컴포넌트 이름, 화면 설명을 얼마나 잘 가져올 수 있게 하느냐입니다. 실제로는 Figma를 연결해서 참고하게 만들 수는 있지만, 결국 결과물이 잘 나오려면 사람이 화면 구조를 어느 정도 해석해서 프롬프트에 녹여주는 과정이 필요합니다. 아직은 완전 자동으로 “디자인 파일 넣으면 바로 서비스 품질로 완성”되는 단계는 아니라고 보시면 됩니다.그래서 실무적으로는 보통 이렇게 접근합니다. 먼저 Figma에서 한 화면씩 중요한 페이지를 정합니다. 그 다음 Claude Code에 현재 프로젝트 구조와 기술 스택을 알려주고, 해당 화면의 목적과 구성 요소를 설명합니다. 그리고 가능하면 Figma의 섹션 이름, 컴포넌트 이름, spacing, color, typography 규칙까지 같이 전달합니다. 그러면 Claude Code가 그걸 바탕으로 React 컴포넌트나 페이지 코드를 생성하도록 합니다. 이후에 한 번에 전체 앱을 만들기보다는, 공통 컴포넌트(Button, Input, Card, Modal 등)부터 먼저 만들고 페이지를 조립하게 하는 것이 훨씬 안정적입니다.제 경우에도 Figma를 Claude Code와 쓸 때, 디자인을 “복사”하려고 하기보다 “설계 의도와 규칙을 전달”하는 데 더 집중합니다. 예를 들어 색상 체계, 버튼 종류, 입력 폼 스타일, 카드 스타일, 간격 규칙 같은 것을 먼저 공통 시스템으로 만들게 하고, 그 위에 각 페이지를 구현하게 합니다. 이렇게 해야 나중에 유지보수도 쉽고, 화면이 많아져도 일관성이 생깁니다.정리하면, Figma와 Claude Code를 함께 쓸 때 가장 효율적인 방법은 버튼 단위로 따는 것이 아니라,-> Figma를 보고-> 화면 구조를 문서화하고-> 디자인 시스템을 먼저 코드로 만들고그 다음 페이지 단위로 Claude Code에 구현시키는 방식입니다.즉, MCP는 연결 도구이고, 실제 생산성을 결정하는 것은 “디자인 정보를 어떤 구조로 Claude Code에 전달하느냐”라고 보시면 됩니다.질문하신 방향은 아주 좋고, 실제로 서비스를 출시하려는 분들이 꼭 부딪히는 지점입니다. 그래서 오히려 지금처럼 고민해 보시는 것이 맞습니다. 괜찮으시다면 다음에는 제가 “Figma 화면을 Claude Code 프롬프트로 바꾸는 실전 예시”까지 드릴 수 있습니다.

고민하다가 써봅니다.

안녕하세요 aa a님,우선 말씀드리면 저는 Lovable을 실제로 사용해본 적은 없어서, 그쪽의 세부적인 운영 경험까지 자신 있게 말씀드리기는 어렵습니다.다만 지금 말씀해주신 상황을 보면 방향은 굉장히 좋다고 느껴집니다.특히 단순히 “일단 돌아가게 만드는 것”에서 끝나는 게 아니라, 5월 베타 전까지 개발 이해도를 끌어올리고 AI가 만든 코드의 품질을 판단할 수 있는 수준까지 가고 싶다는 목표가 아주 좋습니다. 결국 이 부분이 나중에 Claude Code나 Codex 같은 도구를 제대로 활용하는 데 가장 중요한 기반이 되기 때문입니다.제가 아는 범위에서 말씀드리면, Lovable → Claude Code + Vercel 마이그레이션은 보통 “완전히 처음부터 다시 만든다”기보다는, 아래 흐름으로 이해하시면 좋습니다.현재 앱 구조를 먼저 읽을 수 있어야 합니다.어떤 페이지가 있는지, 인증은 어떻게 되는지, 데이터는 어디에 저장되는지, API 호출은 어떻게 연결되는지 정도는 스스로 설명할 수 있어야 합니다.이걸 모르면 AI가 코드를 바꿔줄 때도 좋은 변경인지 위험한 변경인지 판단하기 어렵습니다.UI와 비즈니스 로직을 분리해서 보는 연습이 중요합니다.Lovable로 만든 앱은 겉으로는 잘 동작해도, 내부 코드가 얼마나 정리되어 있는지는 별개일 수 있습니다.그래서 “화면”, “상태 관리”, “데이터 fetching”, “인증”, “배포 설정”을 구분해서 보는 습관이 필요합니다.Vercel로 옮길 때 핵심은 코드 자체보다도 배포 주변 설정입니다.실제로는 코드보다환경변수OAuth / 로그인 redirect URLAPI endpointDB 연결빌드 설정이런 부분에서 더 많이 막히는 경우가 많습니다.Claude Code는 ‘대신 개발해주는 마법 도구’라기보다, 구조를 이해한 사람이 생산성을 올리는 도구에 가깝습니다.그래서 지금처럼 먼저 개념과 기준을 잡고 들어가시는 게 맞습니다.어떤 코드가 좋은 코드인지, 어디서부터 리팩토링해야 하는지, 파일을 어떻게 나눠야 하는지에 대한 기준이 조금씩 생기면 Claude Code 활용도가 훨씬 올라갑니다.제 생각에는 지금 단계에서 가장 좋은 접근은 이렇습니다.5월 베타 전까지는 지금 돌아가는 서비스를 기준으로“이 프로젝트가 어떻게 구성되어 있는지 해석하는 능력”을 키우고그다음에작은 단위부터 Claude Code로 정리해보는 것입니다.예를 들면 전체를 한 번에 갈아엎기보다공통 컴포넌트 정리API 호출 레이어 분리환경변수 정리배포 설정 정리이런 식으로요.즉, 지금 당장 중요한 건 “Lovable을 빨리 버리는 것”보다는,현재 앱을 내가 설명할 수 있는 상태로 만드는 것입니다.그 상태가 되면 Vercel로 옮기는 것도 훨씬 덜 무섭고, Claude Code도 훨씬 제대로 쓸 수 있습니다.그리고 수강 목적도 아주 좋다고 생각합니다.말씀하신 것처럼 단순히 바이브 코딩 사용법만 익히는 것보다, 현업 개발자들이 AI 코딩 도구를 어떤 기준으로 쓰는지, 그리고 도구를 다룰 수 있는 기본기를 쌓는 것이 훨씬 오래 갑니다.그래서 제 강의도 그런 관점에서 봐주시면 가장 도움이 될 것 같습니다.“자동으로 만들어주는 도구를 쓰는 법”보다는,그 도구가 만든 결과를 읽고 판단하고 수정할 수 있는 사람이 되는 데 초점을 두시면 좋습니다.마지막으로 보통 플랫폼을 옮길때 많이 일어나는 문제를 말씀드리자면...환경변수 안 맞음OAuth redirect mismatchAPI endpoint 하드코딩빌드 실패 (dependency)CORS 문제가 있을 수 있습니다. 처음 배포하시는데 긴장 너무 많이 하지 마시고, 천천히 하나씩 쪼개면서 테스트하며 마이그레이션 하시면 어려운 점 없으실 겁니다. 그리고 기존의 Lovable은 한달정도 유지하면서 혹시라도 문제가 일어나면 도메인 라이팅만 바꿀수 있게 설정해 놓으시면 걱정 안하셔도 됩니다.

강의 들으려면..

안녕하세요 Minkoo Lee님,네 아쉽지만 Pro 이상 구독이나 API를 사용하셔야지 이용 가능합니다.

동일 내용을 codex에도 응용할 수 있나요?

안녕하세요, 강의 구매해주셔서 감사합니다. 🙂결론부터 말씀드리면 강의에서 설명하는 개념들은 Codex에서도 상당 부분 응용해서 사용할 수 있습니다. 다만 몇 가지 차이는 있습니다만... 강의에서 설명하는 Skills는 말씀하신 것처럼 사실상 재사용 가능한 프롬프트 + 구조화된 컨텍스트라고 보시면 됩니다. 그래서 Codex에서도 폴더 구조를 잘 잡고 프롬프트를 정리해두면 비슷한 방식으로 충분히 활용하실 수 있습니다.다만 강의에서 나오는 몇 가지 개념들은 Claude Code 생태계에 조금 더 특화된 부분이 있습니다. 예를 들면:Multi-Agent 방식하나의 AI가 모든 걸 하는 것이 아니라 역할을 나눠서 협업하게 만드는 구조입니다. 이 개념 자체는 Codex에서도 충분히 구현할 수 있지만, Claude Code에서는 이를 조금 더 편하게 구성할 수 있습니다.Tools / Workflow orchestration특정 작업을 자동화하거나 여러 단계를 연결하는 방식인데, 이 역시 Codex에서도 스크립트나 프롬프트 체인을 통해 비슷하게 구현할 수 있습니다.Ralph 같은 도구이것들은 특정 AI 워크플로우를 더 쉽게 관리하기 위한 도구라고 보시면 됩니다. 필수라기보다는 생산성을 높이기 위한 보조 도구에 가깝습니다. 이건 그냥 많이 쓰기 때문에 넣어 봤습니다만.. 프로덕션에서는 별로 쓸일이 없습니다. 워낙 위험해서요그래서 정리하면Skills → Codex에서도 거의 그대로 응용 가능Agent / Workflow 개념 → Codex에서도 구현 가능하지만 방식이 조금 다름일부 도구 → Claude Code 환경에서 더 편한 부분강의를 들으실 때는 “특정 툴 사용법”보다 “AI를 어떻게 구조적으로 활용하는지”에 더 초점을 두시면, Codex든 Claude든 다른 AI 도구에서도 충분히 활용하실 수 있을 겁니다.궁금한 점 있으면 언제든 질문 주세요. 🙂

databricks에 cluster 메뉴가 없습니다.

안녕하세요 Bruce.K님,제가 지금 확인해 봤는데, workspace에서 바로 pyspark 코드를 치시면 작동합니다. Databricks의 UI 변경에 의해 혼란을 드려 죄송합니다.(사진)

Context Enginnering 관련 질문

안녕하세요 주현준님강의 내용은 사실 특정 논문 하나를 기반으로 만든 것은 아니고, 여러 자료들을 공부하면서 공통적으로 이야기하는 내용들을 정리해서 설명한 것에 가깝습니다.예를 들면 저는 다음과 같은 자료들을 참고했습니다.Anthropic Engineering BlogEffective Context Engineering for AI AgentsLangChain / LangGraph 관련 자료Context Engineering for Agents그리고 여러 AI 엔지니어링 글들(Pinecone, DataCamp, Neo4j, Arize 등)이 글들을 보면 표현은 조금씩 다르지만, 공통적으로 강조하는 핵심은 비슷합니다.Context Engineering은 결국 LLM이 답변을 생성할 때“어떤 정보들이 context window 안에 들어가도록 설계할 것인가”를 다루는 문제라는 점입니다.그래서 강의에서도 이 개념을 초심자분들이 이해하기 쉽게 구조적으로 정리해서 설명드렸습니다.

dbt run 이후 에러 발생(customer_status 없음 )

안녕하세요 박찬웅님,에러 메시지(relation "dvdrental.customer_status" does not exist)를 보면 dim_customer_status 모델에서 customer_status 테이블을 조인하려고 하는데, 현재 DB에 해당 테이블이 없어 발생한 문제입니다.이 테이블은 강의 15. Seeds(엑셀/CSV를 dbt에서 관리) 파트에서 CSV(seed)로 생성되는 테이블과 연관되어 있습니다. 우선 아래 순서로 한 번 진행해 보시겠어요?dbt seed 실행 dbt run --select dim_customer_status 재실행 (확인) DB에서 dvdrental.customer_status 존재 여부 확인말씀 주신 것처럼 제공 자료에서 customer_status(seed 파일)가 보이지 않는다면, 제가 강의 자료 패키징 과정에서 누락/경로 문제가 있었을 가능성이 큽니다. 확인해서 업데이트 해 드리도록 하겠습니다.불편을 드려 정말 죄송합니다.

주피터 사용 및 도커 설치

안녕하세요, 아연님 😊먼저 직접 이것저것 시도해보신 점이 정말 좋습니다. 방향은 잘 잡고 계세요 👍docker run -it --rm -p 8888:8888 -v /Users/seungjoonlee/git/pyspark:/home/jovyan/work jupyter/pyspark-notebook여기서 중요한 부분은 -v 옵션입니다.-v 로컬경로:/home/jovyan/work 이 의미는 내 로컬 컴퓨터의 특정 폴더를 도커 컨테이너 내부의 /home/jovyan/work 폴더와 연결(매핑) 한다는 뜻입니다.즉,로컬 폴더에 파일이 있으면 → Jupyter Notebook 안에서도 보이고Notebook에서 파일을 만들면 → 로컬 폴더에도 저장됩니다.아연님께서 아래처럼 실행하신 것도 아주 잘하신 겁니다 👏docker run -it --rm -p 8888:8888 -v "${PWD}":/home/jovyan/work jupyter/pyspark-notebook ${PWD}는 현재 위치한 폴더를 의미하므로,/Users/jang-ayeon/Dev/pyspark-study 폴더에서 실행하셨다면그 폴더가 Notebook의 작업 폴더로 연결된 상태입니다.📌 강의 파일이 안 보이는 이유현재 pyspark-study 폴더 안에 강의 파일이 없기 때문에 Notebook에서도 보이지 않는 것입니다.따라서:강의 자료를 다운로드하신 뒤그 파일들을 /Users/jang-ayeon/Dev/pyspark-study 폴더 안으로 옮기시면Jupyter Notebook 화면에서 해당 파일들이 바로 보이게 됩니다.❓ 직접 코드 옮겨야 하나요?굳이 직접 복사해서 새 파일에 붙여넣기 하실 필요는 없습니다.강의 자료 파일 자체를 해당 폴더로 옮기시는 것이 가장 깔끔한 방법입니다 👍지금까지 하신 흐름은 전혀 잘못되지 않았고, 오히려 Docker 볼륨 개념을 정확히 이해하는 과정이라 아주 좋은 시도였습니다 😊 제 강의중에 무료 Docker 강의도 있으니 시간 있을 때 한번 보시고 리뷰하시면 좋을 듯 합니다.진행하시다가 또 막히는 부분 있으면 편하게 질문 주세요!

html 읽기 오류

안녕하세요 dlclxkzk87님,네, 위키 서버(정확히는 Wikimedia) 쪽의 User-Agent/봇 차단 정책 때문에 pd.read_html(url)이 HTTPError를 낼 수 있다는 설명은 꽤 확실합니다. 특히 요즘은 더 엄격해져서, User-Agent가 없거나 너무 기본값/자동화처럼 보이면 403(Forbidden) 을 주는 경우가 흔해요. Wikimedia 자체 정책 문서에도 User-Agent 헤더가 없거나 빈/일반적인 값이면 403이 날 수 있다고 명시돼 있습니다해결 방법으로는 다음과 같이 사용하시면 잘 될 겁니다. 이 방식은 User-Agent를 명시해서 차단될 확률을 크게 줄여줍니다.import pandas as pd import requests # Sample URL containing an HTML table url = 'https://en.wikipedia.org/wiki/List_of_countries_and_dependencies_by_population' headers = { "User-Agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X) AppleWebKit/537.36 (KHTML, like Gecko) Chrome Safari" } resp = requests.get(url, headers=headers, timeout=30) resp.raise_for_status() # Read the HTML tables into a list of DataFrames tables = pd.read_html(resp.text) # Check the number of tables found print(f"Number of tables found: {len(tables)}") # Print the first table (usually the one of interest) print(tables[1].head())

DataFrame groupby 사용관련 질문

안녕하세요 dlclxkzk87님,결론부터 말하면 네, 코드가 틀렸다기보다는 groupby().mean()의 동작을 정확히 이해하지 못해서 생긴 오류예요. 아주 흔한 케이스고, 질문도 정확합니다. 문제는 문자열 컬럼(Name, City) 입니다.mean()은 숫자형 컬럼에만 적용할 수 있는데, 예전 pandas 버전에서는 이걸 자동으로 무시했지만 최근 pandas 버전에서는 명시적으로 에러를 냅니다.그래서 발생한 에러의 정체는 문자열 컬럼에 평균을 낼 수 없다 입니다아마 grouped_by_city = df.groupby('City').mean(numeric_only=True) 하시면 괜찮을 겁니다.