Programming/Vibe coding7 Claude로 UI 디자인 만들기 | 접속부터 결과물 도출까지 Claude로 UI 디자인 만들기 | 접속부터 결과물 도출까지Step 1. claude.ai 접속 및 가입https://claude.ai 접속 후 Sign up 클릭,Google / Apple 계정 또는 이메일로 가입합니다. 클로드에 가입되어있다면 바로 https://claude.ai/design Claude claude.ai로 접근하시면됩니다. 클로드 기본 웹으로 접근하셨다면 좌측 패널에서 클로드 Design을 선택하시면 이동합니다. 현재 오픈한지 얼마 안되어 그런지 접속하면 인트로가 굉장히 길게 나오는데 우측 하단에skip intro로 스킵Step 2. Artifacts 기능 확인 코드를 생성할 때 채팅창 옆에 별도 패널이 열리며 실시간으로 렌더링됩니다.HTML, CSS, JavaScript, Rea.. 2026. 4. 23. [혼공바] 6주차 혼자 공부하는 바이브 코딩 with 클로드코드, 공감 다이어리 앱 만들기 혼자 공부하는 바이브코딩 with 클로드코드 드디어 마지막 주차입니다.이번주도 클로드 업데이트~ 개발자를 갈아서 업데이트 하는 것 같군요..시원하게 Opus 4.6 하이 띵킹 모드로 갑니다. 내 (유료)친구들 만들기오늘은 갑자기 파이썬으로 만들어줍니다.실제 업무에서는 mdc를 사용하고 있는데 이 친구는 왜 파이썬으로 만들어주는지는 모르겠습니다. 뭐든 잘 돌아가면 되겠죠. mcp는 기존에도 사용하고 있었으므로 이번 포스팅에선 넘어가도록 하겠습니다.기본 미션(필수)PROJECT 10. AI 공감 다이어리 앱 만들고 캡처하기 이젠 화면 열어달라는 것도 클로드에 명령하면 바로 해주는군요.딸깍조차 클로드가 해준다.... 호호호호흐흑흑흑... 추가 미션(선택)PROJECT 15. 쇼핑 리스트 앱 만들고 캡처하기S.. 2026. 2. 15. [혼공바] 5주차 혼자 공부하는 바이브 코딩 with 클로드코드, 냉장고를 부탁해 앱만들기 5주차 혼자 공부하는 바이브 코딩 with 클로드코드, 냉장고를 부탁해 앱만들기 벌써 5주차입니다. 어떻게든 반 강제성을 주면 따라가는 모습... 기본 미션 (필수)PROJECT 9. 냉장고를 부탁해 앱 만들고 캡처하기터미널이 아닌 클로드코드로 인텔리제이에서 사용해 보았습니다. 터미널과 다른 점은 굳이 경로 이동 할 필요가 없다는 점..? 한 화면에서 관리가능하다는 점 정도일 것 같습니다. 요즘 더 좋은 모델이 있는지 물어보았더니 자기 말고 다른거 쓰라는 추천..그냥 갑니다. step별 마일스톤이 너무 긴데 이런 생각을 하는 것 보니 머나먼 시절 일정을 쪼아대던 사장님이 생각납니다.사장님도 날 볼 때 이런 생각이셨겠죠. 개발 설계도 나름 잘 해줍니다. 정말 딸깍 시대입니다. 냉장고 이미지 업로드 인.. 2026. 2. 8. [혼공바] 4주차 혼자 공부하는 바이브 코딩 with 클로드코드, 할 일 관리 앱 만들기 항상 업데이트가 안되어있다니.. 세월 빠르군요. 기본 미션(필수)PROJECT 5. 할 일 관리 앱 만들고 캡처하기Visual Studio Code도 지원한다고 들었는데 이렇게 바로보이는군요? 몇 주 전에는 안보였던 것 같은데 기술 빠릅니다.250여줄에 이르는 prd 1분내로 완성 claude Code용으로 전환했습니다.코드 크기도 예상도 해주는군요. 350줄 나왔습니다..복사해서 claude code에 시켜봅니다.리얼 협업 중... step2 이러면 근데 제가 일하는 것 아니에요..?아무튼, 3~5도 마찬가지로 확인 후 넘어갑니다. 완성! 깃 배포 방식까지 정리해주는군요.세상 좋아졌습니다. 추가 미션(선택)PROJECT 7. 상식 퀴즈 게임 앱 만들고 캡처하기AI를 활용해 개발할 때 주의해야 할 점.. 2026. 2. 1. [혼공바] 3주차 혼자 공부하는 바이브 코딩 with 클로드코드, 손글씨 인식 프로그램 만들기 드디어 본격적으로 하는 코딩.켜자마자 업그레이드를 하라고해서 잠시 업그레이드 하고옵니다.그나저나 2주 전? 최신 업그레이드를 한 것 같은데 버전 업뎃이 빠르군요. 혹~시나 클로드 코드 토큰 부족이 있다면, 아래 Z.ai로 mcp 사용해도 좋습니다. 가격 대비 토큰이 3배? 퇴근 안합니다.그러나 가끔 중국말로 대답해줍니다...2026.01.06 - [Site & Tools] - 2026년 Z.ai 구독 정리｜가격,토큰,Claude와 차이점 2026년 Z.ai 구독 정리｜가격,토큰,Claude와 차이점2026년 Z.ai 구독 정리｜가격,토큰,Claude와 차이점 업무 특성상 AI를 자주 사용하고 있는데요,Claude가 자꾸 퇴근하는 현상이 발생하였습니다. (악덕 업주)Claude 대비 토큰이 어마어마하다는 .. 2026. 1. 25. [혼공바] 2주차 혼자 공부하는 바이브 코딩 with 클로드코드 [혼공바] 2주차 혼자 공부하는 바이브 코딩 with 클로드코드요약혼자 공부하는 바이브 코딩 with 클로드코드를 읽고 수행 해 보는 인프런에서 진행하는 챌린지에 참여중입니다.효과적인 프롬프트를 사용하여 AI를 활용해봅니다. 프롬프트 엔지니어링이 정말 중요합니다.AI 검색 결과에 잘 걸려보기 위하여 요약을 추가합니다. 실습 예제🔗실습 예제: https://github.com/taehojo/vibecoding (한빛미디어, 2025)의 실습 데" data-og-description=" (한빛미디어, 2025)의 실습 데이터입니다. - taehojo/vibecoding" data-og-host="github.com" data-og-source-url="https://github.com/taehojo/vib.. 2026. 1. 17. [혼공바] 1주차 혼자 공부하는 바이브 코딩 with 클로드코드 2026년을 맞이하여 새로운 공부를 본격적으로 진행해보고자 합니다.현업에서 AI 코딩 툴을 자주 사용하고 있고 논문도 읽어보곤 하지만스텝바이스텝으로 진행 해 본적이 없어서 좋은 기회에 또다시 시작한 혼공 챌린지를 진행해보려합니다.약간의 반강제성이 있어야 하는 것 같군요. GitHub Repositoryhttps://github.com/taehojo/vibecoding (한빛미디어, 2025)의 실습 데" data-og-description=" (한빛미디어, 2025)의 실습 데이터입니다. - taehojo/vibecoding" data-og-host="github.com" data-og-source-url="https://github.com/taehojo/vibecoding" data-og-url="h.. 2026. 1. 11. 이전 1 다음 728x90 반응형
