Godot 4 Tween 실전 레시피 — 미니게임에서 써먹은 12가지 애니메이션 패턴

Godot 4에서 Tween API가 완전히 바뀌었다. Godot 3에서 노드 기반이던 게 빌더 패턴으로 재설계됐다. 코드는 깔끔해졌는데 API 경계가 헷갈린다. set_loops()를 PropertyTweener에 호출해서 에러 나고, set_parallel()을 tween_property() 뒤에 붙여서 동작 안 하고. 다마고치 미니게임을 만들면서 12가지 Tween 패턴을 정리했다. 삽질 한 번 할 때마다 하나씩 추가된 목록이다. 기본: Tween vs PropertyTweener 이게 모든 혼란의 원흉이다. create_tween()은 Tween을 반환하고, tween_property()는 PropertyTweener를 반환한다. 두 클래스의 메서드가 다르다. var tween: Tween = create_tween() # Tween 반환 var pt: PropertyTweener = tween.tween_property(...) # PropertyTweener 반환 메서드 Tween PropertyTweener set_loops() ✅ ❌ set_parallel() ✅ ❌ set_speed_scale() ✅ ❌ set_trans() ✅ ✅ set_ease() ✅ ✅ as_relative() ❌ ✅ set_delay() ❌ ✅ from() ❌ ✅ from_current() ❌ ✅ 체이닝할 때 반환 타입을 항상 의식해야 한다. 이걸 모르면 컴파일은 되는데 런타임에 터진다. ...

2026-03-25 · 6분 소요 · Seunghan

Rails Turbo Frame으로 탭 SPA 만들기 -- 빈 페이지 함정과 해결법

상황: Turbo Frame 탭 UI에서 빈 페이지 Rails 8에서 인터뷰 빌더를 만들고 있었다. 하나의 페이지 안에 “내 인터뷰 작성”, “전체 갤러리”, “인터뷰 결과” 같은 탭을 두고, 탭을 클릭하면 콘텐츠 영역만 바뀌는 SPA 느낌의 UI였다. 구조는 이랬다: <%# interview_app/show.html.erb — 탭 셸 %> <nav> <button onclick="switchTab('wizard')">내 인터뷰</button> <button onclick="switchTab('gallery')">갤러리</button> <button onclick="switchTab('result')">결과</button> </nav> <turbo-frame id="interview-rails-content" src="/interviews/wizard" loading="lazy"> <p>로딩 중...</p> </turbo-frame> 탭을 클릭하면 JavaScript로 railsFrame.src를 바꿔서 콘텐츠를 교체한다. wizard, gallery, show 세 뷰 모두 같은 turbo_frame_tag "interview-rails-content"로 감싸져 있어서 frame ID가 매칭되고, 콘텐츠가 자연스럽게 스왑된다. ...

2026-03-25 · 8분 소요 · Seunghan

2026 반값여행 신청방법 완전 정리 — 쏘카 55%·코레일 100% 환급·청년 14만원·봄 국내여행 지원금

2026년 봄, 국내 여행 비용을 절반 이하로 줄일 수 있는 정부 지원이 한꺼번에 쏟아진다. ‘촌캉스’(농촌+바캉스) 트렌드와 맞물려 인구감소 지역으로 떠나는 봄 여행이 어느 때보다 경제적인 선택이 됐다. 문화체육관광부의 반값여행·반값휴가·여행가는봄에 행정안전부가 쏘카·코레일과 체결한 MOU 할인까지 더하면 실질 여행 비용을 크게 낮출 수 있는 조합이 만들어진다. 각 제도별 대상, 금액, 신청 방법을 순서대로 정리했다. 반값여행 (지역사랑 휴가지원) — 여행비 최대 50~70% 환급 어떤 제도인가 농어촌 인구감소 지역으로 여행하면 사용한 경비의 50%를 모바일 지역사랑상품권으로 돌려주는 제도다. 행안부가 지정한 인구감소지역 89개 중 도시자치구를 제외한 84개 지역이 대상이고, 2026년 상반기 시범사업으로 선정된 16곳이 4월부터 운영된다. ...

2026-03-24 · 7분 소요 · Seunghan

Flutter GoRouter ShellRoute로 바텀 네비게이션 전역 유지하기 — 삽질부터 Liquid Glass 인터랙션까지

바텀 네비가 사라지는 순간 Flutter 앱을 만들다 보면 어느 순간 이런 상황을 만난다. 메인 화면에 탭 5개짜리 바텀 네비게이션 바가 있고, 할일 수정이나 새 메모 생성 버튼을 누르면 context.push('/tasks/new')로 화면을 전환한다. 그런데 화면이 전환되는 순간 바텀 네비가 통째로 사라진다. iOS 네이티브 앱에서는 탭 안에서 push 하면 탭 바가 유지된다. Apple의 메모 앱에서 메모를 열어도, 미리 알림에서 항목을 수정해도 하단 탭 바는 그대로 있다. 그런데 Flutter에서는 기본적으로 이렇게 동작하지 않는다. 원인을 찾아보니 라우터 구조 자체의 문제였다. ...

2026-03-24 · 9분 소요 · Seunghan

Flutter Material SnackBar 걷어내기 --- Overlay 기반 Glassmorphism Toast + Apple HIG 시스템 색상

Material SnackBar가 거슬리기 시작한 순간 Flutter 앱에서 Glass 디자인 시스템을 구축하면서 Material Design 컴포넌트를 하나씩 걷어내고 있었다. AlertDialog는 GlassDialog로, Card는 GlassCard로, AppBar는 GlassAppBar로. 하나씩 바꿔가니 앱 전체가 반투명 블러 기반의 통일된 느낌이 잡혔다. 그런데 문제가 하나 남았다. 토스트 알림이었다. ScaffoldMessenger.of(context).showSnackBar()로 띄우는 Material SnackBar가 화면 하단에 불투명한 초록/파랑/주황 배경으로 뜨는데, Glass로 바뀐 나머지 UI와 전혀 어울리지 않았다. 하단 고정 위치도 마음에 안 들었다. iOS 네이티브 앱들처럼 상단에서 슬라이딩으로 내려왔다가 올라가는 토스트가 필요했다. ...

2026-03-24 · 7분 소요 · Seunghan

Flutter 노트 앱 디자인 리뉴얼 — Bear 스타일 에디터와 Glassmorphism 알림 적용기

Flutter로 노트 앱을 만들다 보면 어느 순간 기능은 다 있는데 “네이티브 앱 같지 않다"는 느낌이 든다. 버튼은 Glass 디자인 시스템으로 마이그레이션했는데, 정작 에디터 화면과 알림 히스토리는 초기 Material3 코드 그대로 방치돼 있었다. const Divider(), Colors.blue.shade50, OutlineInputBorder() — 이런 것들이 앱 전체 톤을 깨고 있었다. Bear 앱의 에디터 UX를 참고하고, iOS 26 Liquid Glass에서 영감 받은 Glassmorphism을 알림 카드에 적용해봤다. 이 글에서는 실제 삽질 과정과 구현 코드를 정리한다. Bear 앱은 왜 글쓰기가 편한가 Bear는 Apple Design Award를 받은 마크다운 노트 앱이다. “도구가 방해하지 않는다(Tools stay out of your way)“가 핵심 철학이다. 실제로 Bear 에디터를 열면 눈에 띄는 UI 요소가 거의 없다. 제목, 날짜, 본문 — 이 세 가지만 보인다. ...

2026-03-24 · 8분 소요 · Seunghan

Rails 커뮤니티 게시판에 마크다운 에디터 + 좋아요 시스템 붙이기 — importmap 환경에서의 현실적인 선택

커뮤니티 게시판에 Q&A 기능을 만들고 있었다. 질문을 올릴 때 코드 블록이나 볼드 처리를 할 수 있어야 했고, 추천순 정렬 필터도 있으니 좋아요 기능도 필요했다. 그런데 이 프로젝트는 importmap-rails 기반이라 npm 패키지를 자유롭게 쓸 수 없는 환경이었다. 결론부터 말하면, 외부 라이브러리 없이 기존 Stimulus 컨트롤러를 재사용하는 게 가장 좋은 선택이었다. 그 과정에서 겪은 삽질들을 정리한다. importmap-rails 환경에서 마크다운 에디터 선택지 Rails 8의 기본 JS 관리 방식은 importmap이다. esbuild나 webpack 같은 번들러 없이, ESM(ES Modules)을 CDN에서 직접 가져다 쓴다. 설정이 단순한 대신 CommonJS 전용 패키지나 CSS를 함께 번들링해야 하는 라이브러리는 쓰기 어렵다. ...

2026-03-24 · 9분 소요 · Seunghan

WarioWare에서 훔친 미니게임 설계 원칙 — Godot 4로 3종 구현까지

미니게임을 만들다 보면 욕심이 생긴다. 조작을 추가하고, 규칙을 복잡하게 만들고, 스코어 시스템을 정교하게 다듬고. 그런데 막상 플레이하면 재미없다. 5초 안에 “이게 뭐하는 게임이지?“가 파악이 안 되면 이미 실패다. 닌텐도 R&D1 팀이 2003년에 만든 WarioWare(미니게임천국)는 이 문제를 정면으로 해결한 게임이다. 5초짜리 게임 200개를 쏟아내면서도 하나하나가 직관적이다. 이 글에서는 WarioWare의 설계 원칙을 분석하고, 내 다마고치 프로젝트에 적용한 과정을 기록한다. WarioWare가 20년째 연구 대상인 이유 WarioWare 시리즈는 게임 디자인 수업에서 단골 교재다. “마이크로게임"이라는 장르를 사실상 창조했기 때문이다. ...

2026-03-24 · 7분 소요 · Seunghan

한국 주식 수급분석 대시보드 만들기 — pykrx 사망부터 네이버 크롤링까지

주식 투자에서 “외국인이 샀다”, “기관이 팔았다"는 뉴스를 자주 접하지만, 정작 이 데이터를 프로그래밍으로 가져와서 분석하려면 막막한 경우가 많다. 특히 한국 시장은 KRX가 투자자별 매매동향을 공개하고 있어 데이터 접근성이 좋은 편인데, 문제는 이걸 자동화하는 도구들이 생각보다 불안정하다는 거다. 이번에 수급분석 웹 대시보드를 만들면서 겪은 삽질을 기록한다. pykrx가 완전히 깨져서 네이버 증권 크롤링으로 우회한 과정, lightweight-charts로 누적 순매수 차트를 구현하면서 Y축 포맷팅에서 막힌 부분, 그리고 실제 데이터를 수집해서 대시보드에 연결하기까지의 전체 과정이다. ...

2026-03-24 · 8분 소요 · Seunghan

Godot 4 다마고치 미니게임 개발기 — 줌아웃 좌표계, Tween 루프, WarioWare 설계

다마고치 스타일 펫 게임을 Godot 4로 만들고 있다. 밥 주고, 쓰다듬고, 산책시키는 기본 기능은 어렵지 않았는데, 미니게임을 추가하면서 예상 못한 문제가 쏟아졌다. 똥 피하기 게임 하나 만드는데 좌표계 문제로 반나절을 날렸다. 이 글에서는 Godot 4의 Tween 루프 문법, 부모 노드 스케일 변경 시 자식 좌표 보정, 그리고 _process()에서 값이 매 프레임 덮어써지는 함정까지 실제로 겪은 삽질을 정리한다. Godot 4 Tween의 set_loops() 함정 에러 상황 똥이 하늘에서 떨어지면서 회전하는 애니메이션을 넣으려고 이렇게 작성했다: ...

2026-03-23 · 8분 소요 · Seunghan
개인정보처리방침 이용약관 면책조항 문의