고등학생과 대학생 흥미를 고취시킬 frontend backend 작업들.
작년에 domain 을 열고 one point lesson 과 함께 만들어 본 홈페이지는 vanilla js 였다.
그 이후로, 아이들이 대학에 가게되고 흥미를 주고자 올해는 나름 시간이 나는대로 backend 도 다뤄 보았다. go 를 써보고, firebase 도 연결해보고, 이번 며칠은 시간내서 vibe coding 과 gemini key 로 cloudflare 에 typescript 로 만든 page 를 접근권한이 있는 사람만 접속해서 사용할 수 있게 deploy 해 본 기록을 짧게 정리해 본다. 백엔드는 과금이 될 수 도 있고 보안에 대한 google cloud 자동 메일이 와서 key 를 변경하고 비공개로 전환했다.
1. FrontEnd:
github bio 페이지는 기존 github repo 인데, 별도로 페이지에서 연결은 안되지만 따로 sub page 를 접속하면 게임 리스트를 가지고 놀 수 있도록 구조를 이번에 refactor 해 보았다. 아직 UI 에 크게 신경 쓸 필요는 없어서 css 만으로 재사용해서 구조는 크게 신경 쓰지 않은 페이지인 셈이다.
정리:
1) 코드에 대한 이해, 2) refactor 를 빨리 전환, 3) 유닛 시험 후 에러 분석 은 최근 LLM 모델들의 응답이 정말 탁월했다. 아직 claude 도 사용하지 않았는데, 일반 grok 과 gemini 가 대답하는 내용이 정도라면 refactor 는 그냥 맡겨도 90% 는 한번에 나오는 경험을 하게 되었다.
2. BackEnd:
일반 javascript 로 firebase function 을 이용해서 DB 를 로그인, 포스트 저장, 불러오기 등을 했다. hosting 하지 않고도 여전히 기존 frontend 에서 접속해서 내용을 디버깅해서 사용하는데 2.5 달러 정도 든 셈이다.
정리:
처음에 go 를 이용해 보았는데, 이런 interactive 한 것을 짜기에는 아깝다고나 할까. 단순히 DB 연결하는 것이라면 여전히 순수 js 인 vanilla js 로도 가능해 보인다. 서버를 새로 셋업하지 않고 firebase 를 쓰니까 참 편하다.
3. Gemini App
typescript 로 vite (react 기반) 짧게 aistudio 로 코딩과 사진 넣고 비디오를 생성하는 vibe 코딩을 정말 기가막히게 쉽게 만들어 줬다. 이래서 gemini 가 최근 급부상한다고 본다.
정리:
전부터 써보고 싶은 cloud API 기능을 이번에 LMM 을 사용해서 만들고, 해당 파일은 자동으로 연동되도록 cloudflare 에 web Hook 을 연결해서 배포해 보았다. 예전에 Heroku 사용하던 것 보다 더 간편하다고 볼 수 있다. 나중에 빌드 배포 및 hosting 을 firebase 에서 해도 될 것 같다.
순서는 , webpage 접속 > member log in > 바로 글 작성 DB 는 firebase 에 저장.
> 제한된 사람만 Policy 가 적용된 페이지에 접속. 이 페이지는 typescript 로 짠 비디오생성 페이지 > 다운로드 해서 post 에 추가로 blog 올릴 수 있음.
그 결과는 다음과 같다.
나노바나나 이미지 첨부:
비디오용 프롬프트:
A sweeping, epic, hand-drawn illustrated scene in the style of detailed political cartooning mixed with cosmic surrealism, highly saturated colors, dramatic cinematic lighting, ultra-sharp 4K detail.
The image is divided into five symbolic zones connected by a winding golden path that represents a journey of human consciousness:
Left side - "The Technological Challenge": Ancient crumbling Greek/Roman columns labeled "OLD NARRATIVES" falling apart, a giant glowing blue cybernetic eye made of binary code watching everything, robots teaching frightened children at desks, a giant world map globe tilted with red warning highlights over USA, Russia, China, scales of inequality tipping heavily, factories spewing smoke, people wearing VR headsets trapped in "DIGITAL CONTROL" cages, signs reading "FAKE NEWS" and "PROPAGANDA".
Center descending into darkness - "The Political Challenge" and "Despair": The path drops into a dark chasm with a black hooded shadowy figure representing "Human folly and fear (terrorism/war)", a floating pink brain with a large question mark, a terrified man on his knees staring at an immense swirling galaxy vortex above him saying in a speech bubble "I am small...", cosmic scale making humanity look insignificant.
Center-right - "Truth": The path climbs upward past cracked mirrors reflecting distorted realities, stacks of books titled "SCIENCE FICTION" with magnifying glasses revealing "ETHICAL DILEMMA", scales of truth barely balancing, fake news headlines floating.
Far right - "Resilience" and Hope: The path reaches bright sunlight under a massive glowing tree of life with binary code faintly in the leaves, a calm person in lotus meditation pose radiating golden light halo, a small peaceful schoolhouse with children learning, arrows pointing to "ADAPTABILITY & CRITICAL THINKING", a hand writing "MY MEANING" in a glowing book.
Overall color journey from cold blue-digital left side gradually warming to golden hopeful light on the right, dramatic side-lighting, cosmic background with faint binary rain throughout, highly detailed, symbolic, dense with metaphor, in the distinct style of complex philosophical editorial illustrations, masterpiece, best quality, intricate line work, vibrant yet thoughtful mood.
Camera work: slow dramatic panoramic camera move from left to right along the golden path over 15 seconds, subtle particle effects of floating binary code, gentle uplifting orchestral score.
생성된 비디오 결과:
댓글