본문 바로가기

전체 글821

영어 학습 게임! by 바이브코딩 영어 학습 게임을 만들었습니다.바이브 코딩으로 2시간만에 만든거긴 한데 뭐 1인용 게임이고 데이터도 내 PC에 보관되는거라해킹할 것도 없습니다 ㅎㅎURL은 아래와 같은데요.https://drlee7-cray.github.io/english/영어듣기 또는 한글 뜻이 하나 주어지면 단어를 차례대로 선택해 배열을 맞추거나 영어 발음에 자신 있으시다면 말하기로도 문제를 풀수 있습니다.꿀팁으로 발음으로 풀 경우 감점 패널티가 없고 득점시 1.5배 골드를 얻습니다.4개 이상의 별을 얻으면 다음 스테이지가 해금되어 도전할 수 있습니다.획득한 골드로는 캐릭터 상점에서 캐릭터를 구매할 수 있습니다.현재 20개의 스테이지가 준비되어 있는데 영어 공부해보고 싶으신 분은 가볍게 도전해 보셔도 좋습니다 ㅎㅎ위 소스코드는 아래 .. 2026. 3. 2.
Three.js 카툰 렌더링 코드 겟! by AI 요새 회사에서 게임 서비스 출시와 큰 연동 작업 2개를 동시에 하려니 엄청 바빠서 이제야 소식 올려드리네요.게임명은 비공개입니다 ㅎ뭐 저는 서버 백앤드 파트라서 DB와 게임 연동 API를 전반을 작업하는 롤을 맡습니다만사이드 프로젝트를 하지 않으면 감각이 떨어지는 듯 해서 AI를 이용한 기술 연구도 병행하긴 합니다.최근 AI를 통해 얻은 기술이 있는데요.아래 보시는 모델은 3D인데 분명한 외곽선을 가지고 있습니다.바로 '카툰 렌더링' 덕분인데요.과거에는 웹에서 이걸 어떻게 구현할지 이리 찾아보고 저리 찾아봐도 도무지 답이 나오지 않았었는데이제는 AI를 통해 기술을 알아낼 수 있게 되었습니다.먼저 3D 모델을 구해야 겠지요?요새는 AI로 이미지도 만들고 3D 모델도 만들수 있기 때문에 AI로 쉽게 만들 수.. 2026. 3. 1.
구글 플로우(Google Flow) 제미나이를 구독하면 보너스로 따라오는 영상 생성 AI가 있습니다.바로 '구글 플로우(Google Flow)인데요.영상 생성 비용은 타 영상 AI에 비하면 비싼 편이나 제미나이의 경우 구독하면 기본 AI에 부록처럼 따라오기 때문에 안 쓰면 웬지 아깝다고 할까요?Google 의 Veo 3.1 하면 그래도 명성이 꽤 높거든요.대략적인 흐름으로 영상 생성 과정 보도록 하겠습니다! 고고~이미지 프롬프트 생성ChatGPT에 사진을 첨부하면서 아래와 같이 요청합니다.이 사진을 분석하고 이미지 프롬프트를 한글로 적어줘그러면 이런 식으로 적어 줍니다. 꽤나 디테일하지요?울창한 산속 트레일을 걷는 가족의 자연스러운 순간.두 명의 성인 남성이 각각 어린아이를 어깨에 태운 채 흙길 산책로를 따라 올라가고 있다.남성들은 캐주얼.. 2026. 1. 28.
'AI톡' 워드 프레스 개설! ( 카페24 ) '워드 프레스'를 아시나요?전 세계 컨텐츠 관리 시스템 절반 가까이 ( 42.8% ) 는 워드 프레스를 사용하고 있는데요.출처 : https://w3techs.com/컨텐츠 관리 시스템에서 컨텐츠란 블로그나 뉴스 게시글같은 컨텐츠를 의미합니다.워드 프레스는 블로그는 기본이고 뉴스매거진, 쇼핑몰, 기업용 홈페이지, 교육시스템, 지식베이스 시스템, 회사 인트라넷, 부동산, 구인/구직 사이트 등에도 활용되고 있다고 하는데요.플러그인이 어마어마하게 많고 기능도 강력하지만 한글번역이 모호해서 ( 테마를 '모양'으로 번역.. ) 티스토리보다는 사용법이 좀 어렵습니다.그러나 강력한 부분은 블로그 시스템 권한 전체를 갖게 된다는 건데요.워드프레스는 PHP 로 구성되어 있고, 서버측 PHP 코드를 직접 수정할 수도 있는.. 2026. 1. 24.
K-Pen, 내가 만든 웹앱 친구에게 자랑하기 지난 시간에는 K-Pen 과 제미나이를 이용하여 웹앱을 뚝딱 만드는 법을 살펴봤는데요.https://itadventure.tistory.com/861 코딩 몰라도 OK! K-Pen AI프롬프트로 킹왕짱 쉽게!안녕하세요! 크레이입니다. 오늘은 여러분들의 코딩 실력을 단숨에 레벨업(?) 시켜줄 'K-Pen'의 '어마무시 울트라 캡숑 짱짱'한 소식을 들고 왔습니다 ㅎㅎ사실 AI와 협업해 새로 개발해 넣은 기능itadventure.tistory.com이렇게 만든 웹앱을 친구에게 자랑할 수 있다면 어떨까요?K-Pen의 공유하기 기능을 이용해 보세요!새 기능, 전체화면 !K-Pen 에 새로운 기능이 추가되었습니다!바로 전체 화면 기능인데요.이 버튼을 누르면 이랬던 화면이이렇게 바뀌는 거지요.친구에게 공유할 때는 아.. 2026. 1. 18.
코딩 몰라도 OK! K-Pen AI프롬프트로 킹왕짱 쉽게! 안녕하세요! 크레이입니다. 오늘은 여러분들의 코딩 실력을 단숨에 레벨업(?) 시켜줄 'K-Pen'의 '어마무시 울트라 캡숑 짱짱'한 소식을 들고 왔습니다 ㅎㅎ사실 AI와 협업해 새로 개발해 넣은 기능이예요 ^^.. "코딩 너무 어려워 ㅠㅠ 단번에 뭔가 보여줄만한 걸 만들수 없을까?" 하고 생각해 보신적 없나요? ^^..그런 분들을 위해 준비한 K-Pen 의 'AI 프롬프트'가 있습니다!아래 순서로 진행하시면 되는데요.1. K-Pen에서 'AI 프롬프트 복사' 2. 제미나이나 chatGPT로 이동하면 붙여 넣으면 코드가 뚝딱 3. K-Pen에 돌아와 코드를 붙여넣으면 오우~ 앱이 돌아간다! 오늘 내용은 지난번보다 훨씬 쉽습니다.세상 좋아졌죠? ㅎㅎ자, 거두절미하고 바로 실습 들어갑니다! 마법의 지팡이,.. 2026. 1. 10.
K-Pen과 함께 골을 넣어보자! 상태관리 'State'! 안녕하세요! 크레이입니다.지난 시간, 리액트의 기본 코드를 살펴보고, 화면에 글자를 띄워봤는데요. 마지막에 제가 살짝 흘렸던 말, 기억하시나요?"버튼을 누르면 화면이 바뀌거나 계산을 하는 건 조금 복잡해요."죄송합니다! 사실은 초심자분들에게는 많이 복잡할 수 있습니다^^.. 집중하면서 몇번 반복해서 봐주셔야 이해하실수 있습니다만,실습만 성공하셔도 큰 성과이니 100% 이해하지 못해도 결코 낙담하지 마세요 ㅎㅎ오늘은 그 '복잡하지만 아주 중요한' 친구, 바로 '스테이트(State=상태)'를 만나볼 시간입니다.📝 그냥 글씨 쓰기 vs 디지털 점수판축구 경기 좋아하시나요?저는 딱히 어느 팀 팬은 아니지만 월드컵에서는 단연 한국 편을 듭니다.그러다 '골~'을 넣으면 아싸~ 하고 환호를 지르지요!여러분도 그러신.. 2026. 1. 8.
K-Pen, 리액트 기본 코드? 외울 필요 없어요! 리액트 기본 코드리액트 코딩 언어를 시작하면 항상 만나는 코드가 있습니다.바로 아래와 같은 코드인데요.웹 브라우저 화면에 "안녕, 리액트 👋"를 표시해주는 간단한 소스입니다.코딩을 처음 시작하는 입장에서는 10줄이나 되는 코드가 아마 부담스러우실 거예요.하지만 이런 코드는 한번 보고, 두번 보고, 10번, 100번 앞으로 계속 눈으로 보면서 자연스럽게 그 구조가 머리속에 들어올 겁니다. 전혀 외우거나 하실 필요가 없어요.처음 리액트 언어로 코딩할 때 우리가 수정할 부분은 단지 이 부분과,이 사이 부분이지요. 물론 나중에 기능이 고도화된다면 복잡해질 수는 있습니다.K-Pen 에서는 언제든지 기본 코드를 설정하고 싶다면, 1) 햄버거 메뉴를 클릭하고2) 예제 불러오기의 '기본'을 선택하시면,짜잔, 기본 코.. 2026. 1. 7.
코드학습의 필요, K-Pen 과 함께 AI 해고의 역풍…구조조정 기업 절반 "결정 후회한다" ( 2025. 11. 3 )https://zdnet.co.kr/view/?no=20251102051028 AI 해고의 역풍…구조조정 기업 절반 "결정 후회한다"인공지능(AI)을 앞세운 인력 구조조정이 효율화가 아닌 오히려 조직의 부담으로 되돌아오고 있다는 지적이 제기됐다.AI가 기대만큼 생산성을 높이지 못하고, 핵심 인력 손실로 인한 업무 공백이zdnet.co.kr바이브 코딩 좋아, 그런데?..요새 바이브 코딩이 인기이긴 하지만, 바이브 코딩으로 만들어진 앱은 결정적인 문제가 있습니다.바로 '바이브 디버깅'입니다. 그냥 말로 '이러이러하게 고쳐줘'하는 거지요.보여주기용 웹앱(웹페이지에서 돌아가는 앱)을 만드는건 쉽습니다.뚝딱- 하면 AI가 순식간에 .. 2026. 1. 5.
🚀 세상 쉬운 웹 코딩 에디터, 'K-PEN' 개발기! 안녕하세요! 오늘은 제가 최근에 AI와 협력해 만들어본 웹 애플리케이션, 'K-PEN'을 소개해드리려고 해요. https://cray7.mycafe24.com/k-pen이름에서 눈치채셨겠지만... 네, 맞습니다. 유명한 'CodePen'에서 영감을 받아(사실은 대놓고 오마주해서 😉) "한국판 펜(K-Pen)"이라는 거창한 이름으로 시작한 프로젝트입니다! HTML, CSS, REACT를 웹에서 바로 작성하고 결과물을 실시간으로 확인하는 웹 IDE(통합 개발 환경)를 직접 구현해보고 싶었거든요. 특히 영어울렁증으로 코딩은 접근 조차 못하는 분들은 좀 더 가까와질 수 있지 않을까 생각이 되더라구요.🎨 주요 기능1. VS Code가 내 웹 브라우저에?코딩할 때 에디터가 안 예쁘면 할 맛 안 나잖아요? 그래서.. 2026. 1. 2.
리눅스? 노노! 바이브 코딩으로 감성만! 구글의 안티그라비티가 과연 이런것도 할 수 있을까 해서 테스트했는데 되더라구요!URL : https://linuxsimul.netlify.app/리눅스 시뮬레이터를 만들어 달라고 했습니다.처음에는 아래 프롬프트로 접근했는데요.데스크톱 컴퓨터 화면이 바탕으로 보여지고 그 안에 검은 화면에 리눅스 시뮬레이터를 구성할거야.우선 리눅스 터미널에 로그인하는 부분까지 시뮬레이터로 만들어줘. 기능 확장이용이하게 모듈형으로 만들고 각각 모듈은 스크립트 파일을 분리해. html + css + jquery + jquery 기술을 중점으로. 1900년도 레트로 감성이 풍부한 느낌으로. 필요한 경우 이미지를 생성해.1900년도 모니터의 안 좋은 상황까지 감안해 글씨를 너무 안보이게 만들더라구요.그리고 모니터 배경은 좀 생뚱맞.. 2025. 12. 30.
오! 제미나이? 어려운 알고리즘 문제도 척척 ! 오랜만에 알고리즘 문제 풀이 올려봅니다.코딩에 관심이 가신다면 살펴보셔도 좋으나 그렇지 않다면 슬며시 끝으로 가셔도 좋습니다 ㅎㅎ이번 COS PRO 1급에 출제되었던 시험중 제가 틀린 어려운 1문제는 응시시간 계속 고심하느라 대략적인 문제 패턴을 기억하고 있는데요.아 글쎼 제미나이(유료구독 PRO모드) AI에게 물어보니 순식간에 풀어주는 겁니다.제미나이 3.0이 똑똑해졌다더니 코딩 부분도 과장이 아니었네요.지문은 원래 헷갈리게 하느라 길지만 핵심만 추리면 문제 유형은 이렇습니다.아래와 같은 패턴의 문자열 리스트가 주어졌을 때, ( 실제 시험문제와는 데이터는 다릅니다 )[ 'A100', 'B2341', 'A976', 'B41', 'A543' ]첫글자는 알파벳 기준으로 오름차순,나머지는 큰 숫자 기준으로 내.. 2025. 12. 23.

티스토리툴바