Figma·Playwright MCP로 AI Native하게 실시간 공연 시간표 개발하기
·
👨‍💻 Programming/WEB
Claude Code, Figma MCP, Playwright MCP를 활용해 요구사항 분석부터 테스트까지 약 1시간 만에 완성한 공연 시간표 기능 개발기입니다.배경모아동은 교내 동아리 정보를 한 곳에서 확인할 수 있는 서비스입니다. 동아리 모집 시즌 외에는 사용자 유입이 줄어드는 한계가 있어, 모집 시즌 외에도 찾아올 이유를 만드는 것이 과제였습니다. 학교에서 1학기 초에 개최하는 동아리 소개 한마당 행사를 활용해 보기로 했습니다. 신입생을 포함해 많은 학생들이 참여하는 큰 행사인데, 그동안은 공연 타임테이블이 이미지 형식으로만 제공되다 보니 현재 진행 중인 공연이 무엇인지, 어떤 곡을 공연하는지 세부 정보를 확인하기 어렵다는 불편함이 있었습니다. 이 문제를 소프트웨어로 해결할 수 있겠다고 판단했고, ..
React에서 직접 구현하는 카운트업 & FLIP 기법 애니메이션
·
👨‍💻 Programming/WEB
배경네이버 부스트캠프의 그룹 프로젝트 과정에서 "우리 모두 다빈치"라는 드로잉 기반 멀티플레이 게임을 만들고 있습니다.https://wlldv.art/ 우리 모두 다빈치그림을 기억하고 따라 그려보세요! 가장 유사하게 그린 사람이 이기는 실시간 드로잉 게임wlldv.art게임이다 보니 애니메이션 하나하나가 생각보다 재미에 큰 영향을 줬고, 실제 피드백에서도 그런 반응을 받을 수 있었습니다.그중에서 가장 시각적으로 집중이 됐던 부분이 라운드가 끝나고 점수가 쌓이면서 등수가 바뀌는 순간이었고, 여기에 애니메이션을 어떻게 적용했는지 정리해보려 합니다! 무엇을 만들려 했는가라운드별 점수 누적 화면에는 두 가지 상태가 존재합니다.Before: 이번 라운드 이전까지의 등수After: 이번 라운드 점수가 반영된 새로운..
CES 2026 해외 기술 견학 프로그램 참여 후기
·
🌍 Life
2026년 연초, 소프트웨어융합 혁신원에서 진행하는 해외 기술견학 프로그램에 선발되어 감사한 마음으로 CES 2026에 다녀왔습니다.올해는 연초부터 정말 바빴어요... 네이버 부스트캠프 프로젝트도 함께 진행하며 정신없이 보내고 있습니다.아직 2025 회고도 남기지 못했지만..ㅎㅎ 즐거운 마음으로 2026 CES 참관 후기를 정리해보려고 합니다. 1. 일정이번 일정은 2026년 1월 5일 월요일부터 1월 11일 일요일까지, 총 5박 7일이었고, 한국 시간 기준 월요일에 출발하여 일요일에 돌아왔습니다.월요일: 라스베가스 도착(저녁) → 호텔 체크인 후 휴식화~목요일: CES 참관금요일: 새벽 샌프란시스코 이동 → 스탠포드 대학, 실리콘밸리, 구글 비지트 센터, 애플 실리콘밸리, 애플 엔지니어 간담회, 금문..
Naver Cloud Platform 활용 프로젝트 경험기
·
카테고리 없음
프로젝트 소개저희 팀은 브라우저에서 실제 운영체제처럼 동작하는 웹 기반 OS 에뮬레이터를 개발했습니다. 단순한 데스크탑 UI가 아니라, 실제 OS의 구조를 웹 안에 얼마나 흡수할 수 있을지를 고민하며 파일시스템, 프로세스, 터미널, 부팅 화면까지 직접 구현한 프로젝트입니다.Windows를 모티브로 디자인하고, 사용자는 브라우저 환경 안에서 터미널을 열고 cd, ls와 같은 명령어를 입력해 실제와 유사한 동작을 수행할 수 있습니다.프로젝트 설계웹에서 돌아가는 OS를 만들다 보니 자연스럽게 상태 관리, 성능, 동시성, 싱크 문제 등이 발생했습니다. 또 “웹이 실제 OS처럼 동작하려면 어떤 내부 구조가 필요한가?”라는 근본적인 질문을 바탕으로 파일시스템 구조, 프로세스 모델, 터미널 파서 등 다양한 요소를 직..
왜 자바스크립트가 만들어졌을까? 웹 역사와 함께 보는 탄생 이야기
·
👨‍💻 Programming/JavaScript
프로그래밍 언어를 익히기 위해서는 해당 언어가 왜 만들어졌는지, 왜 이 언어를 선택하고 사용하는지 아는 것이 중요하다고 느낍니다..아래 질문들에 대해서 구체적으로 설명할 수 있게 될 겁니다자바스크립트가 뭔가요?자바스크립트 누가 어쩌다 왜 만들었어요?프론트엔드 개발할때 JS가 왜 필요한가요? 세계적인 정보 공유 시스템의 탄생웹 이전 시대, 문서는 어떻게 공유했을까?자바스크립트의 탄생을 알기 위해서는 먼저 HTTP, HTML, 브라우저가 어떻게 만들어졌는지 알아야 합니다.웹 발명 이전(1989년)에는 문서를 어떻게 주고받았을 것 같나요? 웹이 발명되기 전에도 대학교나 연구기관에서는 수강신청, 논문, 연구 문서 등을 주고받아야 했습니다.당시에는 1970년대에 개발된 이메일(SMTP)이나 FTP 같은 방식으..
저장하고 9초 기다리던 개발자, esbuild-loader로 탈출한 후기
·
👨‍💻 Programming/WEB
올해 1월부터 진행해 온 부경대학교 동아리 플랫폼 "모아동" 서비스의 개발 속에 있었던 경험을 공유해보고자 합니다.이번 포스팅에서는 React + Webpack 환경을 직접 구성하면서 경험한 빌드 속도 개선 과정을 중심으로 정리해보려 합니다https://www.moadong.com/ 모아동모아 동아리! 부경대학교 모든 동아리를 한눈에!www.moadong.com CRA를 쓰던 지난 프로젝트동아리 활동을 하면서 웹 프론트엔드로 두 번의 프로젝트를 진행했는데 모두 Create React App(CRA) 기반으로 개발했었습니다.당시엔 셋업이 쉬워서 부담 없이 쓸 수 있었지만, 내부 설정을 커스터마이징하거나 빌드 최적화에 손을 대기 어려웠습니다. 또한 내부적으로 이미 로직이 다 되어있어서 빌드 도구의 내부적인 ..