본문 바로가기
728x90
반응형

전체 글305

미리캔버스 기여자용 이미지 편집기 만들기 CLAUDE × MIRICANVAS CONTRIBUTOR 미리캔버스 기여자용 이미지 편집기, Claude와 대화만으로 만든 후기2변환 메뉴 (JPG · PNG)130dpi 해상도 기준25자동 생성 키워드3→1시안 비교 후 선택CHAPTER 01들어가며 : 같은 작업을 수십 번 반복하다 보니 미리캔버스 디자인 허브에 요소를 올리는 기여자라면 한 번쯤은 이런 경험이 있을 거예요. 이미지를 만들었는데 업로드 규격이 있어서 다시 손봐야 하는 일이요. 사진은 JPG로 바꾸고, 해상도는 130dpi 이상으로 맞추고, 가로세로 크기도 정해진 범위 안에 들어와야 합니다. PNG 요소는 배경을 깨끗하게 지우고 캐릭터 크기에 맞게 잘라내야 하고요.한두 장이면 포토샵으로 처리하면 되지만, 요소를 수십 장씩 올리려면 이 작업.. 2026. 10. 1.
Codex로 토스 미니앱 2개 만들기|물한잔·더위탈출 개발기와 7월 앱인토스 챌린지 AI와 대화하는 것만으로 실제 앱인토스용 미니앱을 어디까지 만들 수 있을까요?이 질문을 직접 확인해 보기 위해 Codex를 활용하여 두 개의 토스 미니앱을 만들었습니다. 하나는 서울의 무료 식수대를 찾아주는 ‘물한잔’, 다른 하나는 주변에서 더위를 피할 수 있는 장소를 찾아주는 ‘더위탈출’입니다.아이디어 정리부터 모바일 화면 구현, 공공데이터 연결, 위치 권한 처리, 오류 대응, 앱인토스용 AIT 번들 생성까지 실제 출품 과정을 고려하여 진행했습니다. 이번 글에서는 2026년 7월 앱인토스 바이브코딩 챌린지 내용과 두 앱을 Codex로 만든 과정을 정리해 보겠습니다.이 글에서 소개하는 내용2026년 7월 앱인토스 바이브코딩 챌린지서울 무료 식수대 찾기 ‘물한잔’우리 동네 시원한 장소 찾기 ‘더위탈출’Co.. 2026. 7. 21.
바이브코딩으로 만든 MBTI 운세 및 궁합 사이트 '바이브코딩(Vibe Coding)'이라는 말을 들어보셨나요? 코드를 직접 타이핑하는 대신 AI에게 자연어로 요구사항을 전달하고, AI가 실제 동작하는 코드를 생성하는 개발 워크플로우를 말합니다. 이번에 Anthropic의 Claude Code를 이용해서 MBTI 운세/궁합 웹앱을 처음부터 끝까지 만들어봤고, 그 과정과 결과물을 기록으로 남깁니다.결과물 : 오늘의 MBTI — https://mbti-fortune-one.vercel.app 오늘의 MBTI - 오늘의 운세 & 궁합 테스트16가지 MBTI 유형별 오늘의 운세와 궁합 테스트! 매일 새로운 운세, 친구와 비교하는 찐 궁합 점수를 확인해보세요.mbti-fortune-one.vercel.app 🛠️ 기술 스택프론트엔드React + TypeSc.. 2026. 7. 3.
Claude 바이브코딩으로 만든 미리캔버스 디자인허브 이미지 변환기 Claude AI(클로드)를 활용한 바이브코딩(Vibe Coding)으로 실제 웹 서비스를 하나 제작했습니다.주제는 매우 단순했습니다. 바로 미리캔버스 디자인허브 업로드용 이미지 자동 변환기입니다. 미리캔버스 디자인허브에 콘텐츠를 업로드하다 보면 매번 반복되는 작업이 있습니다. 이미지 크기 조정, 해상도 설정, JPG 변환, 비율 수정 등 생각보다 손이 많이 가는 작업들이죠. 저 역시 디자인허브에 이미지를 업로드하면서 같은 작업을 반복하는 것이 번거롭게 느껴졌고, "이걸 자동으로 처리해주는 웹앱이 있으면 좋겠다"는 생각이 들었습니다. 그래서 직접 코드를 작성하는 대신 Claude에게 필요한 기능을 설명하며 바이브코딩 방식으로 개발을 진행했고, 몇 시간 만에 실제로 사용할 수 있는 웹앱을 완성할 수 있었습.. 2026. 6. 11.
728x90
반응형