전체 글 6

게임 기능에 디자인 패턴 적용하기

들어가며저희 회사에서는 React Native를 사용하여 교육용 앱 서비스를 개발하고 있습니다. 이 서비스에서 저는 카드 게임이 들어가는 기능을 맡아 개발하게 되었습니다.하지만 개발을 시작한 지 얼마 지나지 않아 다양한 인터랙션과 애니메이션, 게임의 상태 관리, 카드의 위치와 상태 관리 등 복잡하게 뒤엉킨 요구사항에 부딪히게 되었습니다.이러한 복잡한 요구사항에 디자인 패턴을 적용하여 풀어나간 이야기를 써보고자 합니다. 요구사항핵심 요구사항은 카드 슬롯 교체 기능이었습니다. 2개의 보드 슬롯 중 한 곳에 이미 카드가 있을 때, 다른 카드를 올리면 기존 카드가 자동으로 빈 슬롯으로 이동해야 했습니다.이를 구현하기 위해 카드 배치 상태 플래그, 드래그 시의 Snap 로직, 위치 변경 애니메이션 트리거 등 us..

Frontend 2025.09.28

테블리 프로젝트 폴더 구조 설계

Intro사이드 프로젝트를 개발하면서 특히 신경썼던 부분들을 정리해본다.기술스택프로젝트에서 사용한 기술 스택은 다음과 같다.코어: React, Next.js, TypeScript스타일링: shadcn/ui, tailwind상태관리: jotaiAPI 통신: React-Query, axiosPackage Manager: pnpm로깅: Sentry폴더 구조 설계Next.js에서 폴더 구조 설계 방법에 정답은 없다. 하지만 이전의 개발 경험들을 미루어봤을 때 많은 양의 파일들 사이에서 수정해야 하는 코드를 찾는 일은 언제나 괴로웠기에.. 그리고 다른 사람과 의사소통을 할 때에도 필요한 코드를 찾는데 시간이 오래 걸리는 것은 소통의 불편함을 가져왔다.이런 부분을 최대한 방지하고자 폴더구조를 설계할 때 코드의 맥락..

Frontend 2025.01.05

사이드 프로젝트: 테블리 개발 후기

약 3주간의 사이드 프로젝트를 성공적으로 개발한 후기를 적어본다서론11월 중순쯤 수민님이 사이드 프로젝트 모임을 모집하셨다. 글또 10기 네임드이신 수민님과의 사이드 프로젝트라 같이 해보고 싶기도 하고 글또 운영진이신 은찬님이 백엔드 개발자 역할을 해주신다고 하셔서 더 눈길이 갔다.너무 감사하게도 함께 프로젝트를 진행하고 싶다는 수민님의 러브콜을 받았다! 설레는 마음으로 톡방이 만들어지기를 기다렸다. 함께하는 채은님, 경탁님도 평소에 글또에서 자주 이름을 봤었고 궁금했던 분들이어서 함께할 수 있다는 것이 너무 기뻤다.킥오프첫 미팅은 온라인으로 진행했다. 수민님께서 해커톤을 위한 개발도 좋지만 해커톤 끝난 뒤에도 계속해서 운영할 수 있는 프로젝트를 해보고 싶다고 말씀하셨다. 수민님의 이 말이 너무 인상적이..

일상 2024.12.22

셰이더 함수 정리

패스트 캠퍼스에서 수강한 강의 내용 중 셰이더 함수에 대해 정리하였다.우선 무작정 따라해볼 수 있도록 glsl에서 사용되는 함수들에 대해 알아볼 것이다.개발 환경은 Vite+VanillaJS환경이다.1. 그라데이션precision mediump float;varying vec2 vUv;void main(){ // 1. 그라데이션 float x = vUv.x; float y = vUv.y; float col = x; gl_FragColor=vec4(col, col, col, 1.0);}vUv는 vertex shader에서 가져온 값을 의미한다.x좌표에 따라 color의 값이 0.0부터 1.0까지 변화한다.2. 대각선 만들기precision mediump float;varying vec2 vUv;v..

Graphics 2024.11.24

Scramble Text Animation

전부터 구현해 보고 싶었던 scramble text effect를 구현해 보았다.코드 레퍼런스: https://codepen.io/soulwire/pen/mEMPrK1. Scramble Text Effect이와 같이 텍스트가 임의의 문자로 변환되다가 점점 올바른 텍스트로 변해가는 애니메이션 효과를 말한다. 일반적으로 랜덤하게 문자들이 바뀌다가 올바른 텍스트가 서서히 자리 잡는 방식으로 구현된다.2. 구현 코드1. 1차 구현기본 구현 아이디어는 다음과 같다.(chatGPT의 도움을 받았다.)텍스트를 배열에 넣고랜덤 index의 텍스트를 characters의 랜덤한 글자와 교체한다.믹스된 텍스트를 렌더링한다.export default function ScrambleText() { const texts = ..

Web Animation 2024.11.09

글또 10기 1주일 활동 후기

1. 글또 참여 계기글또에 참여한 계기에는 우연이 많았다. 주변 지인들이 추천해준 것은 아니고 깃헙에서 아주 예전에 팔로우 드린 분께서(그분은 아마 나를 모를 것이다) 글또 레포지토리에 속해 있었고 랠릿에서 본 인상 깊은 이력서의 주인분이 글또 활동을 하신 적이 있다고 해서 나도 참여해보고 싶었다. 하지만 딱히 글또 모집에 관심을 갖고 찾아본 것은 아닌데 그동안 관심을 갖고 찾아본 동아리나 모임 등은 거의 탈락했기 때문이다.(ㅠㅠ) 그리고 사실 나는 글을 쓰는 것과는 거리가 멀었다. 어릴 때는 백일장에서 상도 받았었지만 고등학교 때 이과에 가면서 상대적으로 중요성이 떨어지는 국어와 글과 책과는 이별을 하게 되었다.(덕분에 대입 자소서 한 장 써본 적이 없다.) 그러다 우연히 글또 10기 모집 글을 보게 ..

일상 2024.10.10