개발자 공방

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

jinlee0310 — Sun, 28 Sep 2025 19:38:36 +0900

들어가며

저희 회사에서는 React Native를 사용하여 교육용 앱 서비스를 개발하고 있습니다. 이 서비스에서 저는 카드 게임이 들어가는 기능을 맡아 개발하게 되었습니다.

하지만 개발을 시작한 지 얼마 지나지 않아 다양한 인터랙션과 애니메이션, 게임의 상태 관리, 카드의 위치와 상태 관리 등 복잡하게 뒤엉킨 요구사항에 부딪히게 되었습니다.

이러한 복잡한 요구사항에 디자인 패턴을 적용하여 풀어나간 이야기를 써보고자 합니다.

요구사항

핵심 요구사항은 카드 슬롯 교체 기능이었습니다. 2개의 보드 슬롯 중 한 곳에 이미 카드가 있을 때, 다른 카드를 올리면 기존 카드가 자동으로 빈 슬롯으로 이동해야 했습니다.

이를 구현하기 위해 카드 배치 상태 플래그, 드래그 시의 Snap 로직, 위치 변경 애니메이션 트리거 등 useState, useRef, react-native-reanimated 로직이 메인 컴포넌트에 집중되었습니다. 게임에 다른 여러가지 기능이 추가되면서 메인 컴포넌트는 수많은 state와 side effect들로 인해 점점 비대해져갔습니다.

이 문제를 해결하기 위해 카드간의 관계와 애니메이션을 제어하는 로직을 Mediator 패턴이라는 디자인 패턴을 적용하여 분리해보자 라는 생각을 하게 되었습니다.

Mediator(중재자) 패턴이란?

중재자 패턴은 서로 독립적으로 작동해야 하는 컴포넌트 간의 모든 직접 통신을 중단한 후, 컴포넌트들의 호출을 적절한 컴포넌트들로 리다이렉션하는 특수 중재자 객체를 호출하여 간접적으로 협력하게 하라고 제안합니다. 그러면 컴포넌트들은 수십 개의 동료 컴포넌트들과 결합되는 대신 단일 중재자 클래스에만 의존하게 되어 결합도가 크게 낮아집니다.
카드 컴포넌트들은 드래그앤드롭을 통해 독립적으로 움직이지만, 동시에 다른 카드의 위치와 상태에 따라 자신의 위치가 강제로 변경되어야 했습니다."독립성을 유지하면서 상호작용은 필요한" 상황이었기에, 중재자 패턴을 통해 카드 간의 복잡한 위치 결정 로직을 분리하는 것이 적합하다고 판단하였습니다.

구현

Mediator 클래스를 구현하여 카드가 드롭되었을 때 카드 간 액션을 어떻게 할 것인지 결정하고 다른쪽 카드의 id를 찾아서 해당 카드의 움직임을 제어하는 로직을 구현하였습니다. 이러한 로직을 통해 카드간의 직접적인 상호작용을 피하고 복잡한 의존 관계를 줄일 수 있었습니다.

class Mediator {
...
  public handleDrop = (cardId) => {
    // 1. 카드에 발생해야 하는 이벤트를 계산
    const event = this.calculateEvent();

    // 2. 계산 결과를 바탕으로 UI 애니메이션을 지시
    this.animatePositions(event, cardId);
  };

  /**
   * 계산된 결과에 따라 Reanimated를 통해 카드들의 움직임을 제어
   * UI 스레드에서 실행되도록 runOnUI를 사용
   */
  private animatePositions = (event, cardId) => {
    // UI 스레드에서 애니메이션 실행 지시
    runOnUI(() => {
      'worklet';
      if (event==='snap') {
        // 단일 카드 애니메이션 지시
      } else if (event==='swap') {
        // 카드 A (드롭된 카드)의 위치 애니메이션 지시
        this.springAnimation(targetPositionA,cardId);
        
        // 카드 B (밀려난 카드)의 위치 애니메이션 지시
        this.swapAnimation(targetPositionB,otherCardId);
      }
    })();
  };
}

맺음말

그동안은 프론트엔드 코드를 작성하면서 컴포넌트 간의 복잡한 의존 관계를 줄이는 경험이 부족했었습니다.  코드에 Mediator 패턴을 적용한 결과, 메인 컴포넌트는 깔끔하게 유지되었고 복잡했던 카드 상호작용 로직은 단일 책임 클래스로 캡슐화되었습니다.

이번 기능 구현과 리팩토링을 통해 디자인 패턴이 단순한 이론이 아니라 복잡성을 관리하고 코드의 수명을 연장할 수 있는 도구 중 하나라는 사실을 깨닫게 되었고 코드의 유지보수성을 높이는 좋은 경험을 할 수 있었습니다.

본문의 코드 예시는 이해를 돕기 위한 간단한 예시일 뿐입니다.

실제 프로덕션용 코드로 사용하기에는 수정이 필요한 부분이 많다는 점 참고바랍니다.

- 참고 링크
    https://refactoring.guru/ko/design-patterns/mediator

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

jinlee0310 — Sun, 5 Jan 2025 22:11:32 +0900

Intro

사이드 프로젝트를 개발하면서 특히 신경썼던 부분들을 정리해본다.

기술스택

프로젝트에서 사용한 기술 스택은 다음과 같다.

코어: React, Next.js, TypeScript
스타일링: shadcn/ui, tailwind
상태관리: jotai
API 통신: React-Query, axios
Package Manager: pnpm
로깅: Sentry

폴더 구조 설계

Next.js에서 폴더 구조 설계 방법에 정답은 없다. 하지만 이전의 개발 경험들을 미루어봤을 때 많은 양의 파일들 사이에서 수정해야 하는 코드를 찾는 일은 언제나 괴로웠기에.. 그리고 다른 사람과 의사소통을 할 때에도 필요한 코드를 찾는데 시간이 오래 걸리는 것은 소통의 불편함을 가져왔다.

이런 부분을 최대한 방지하고자 폴더구조를 설계할 때 코드의 맥락을 계속 생각하면서 설계하고 프로젝트의 초반에 원칙을 분명하게 세우려고 노력했다.

/public

public 아래에는 프로젝트에서 사용되는 fonts, images 등 asset 파일들을 넣었다.

/app

app폴더는 Next.js에서 라우팅 기능을 지원해주는 폴더이다. /app/blog-input이라는 폴더를 만들고 안에 page.tsx를 만들면 /blog-input이라는 url의 페이지가 만들어진다.

/app에서는 전역으로 사용하는 style과 error 페이지를 만들어 사용했고 url이름을 표시하는 폴더 안에서는 최대 section 단위의 컴포넌트까지만 사용하도록 하였다.

/src

/src에서는 다시 constants, components, hooks, lib, store, types 등으로 나눈다. 해당 폴더에는 프로젝트 전체를 관통하는 파일들을 넣는다. 예를 들면 useThrottle, useResize등은 프로젝트 전체에서 사용 가능하기 때문에 /src/hooks아래에 넣는 방식이다.

/src/components

components들은 page url 기준으로 사용되는 컴포넌트들과 그렇지 않은 컴포넌트로 나눴다.

url과 상관 없이 사용되는 컴포넌트들은 /shared와 /ui에 분류했다. shadcn/ui에서 받은 raw한 컴포넌트들과 Text처럼 ui 표시에 중점을 두는 컴포넌트들은 /ui에 추가하였고 KakaoAdfit 컴포넌트처럼 프로젝트 어디에서나 사용할 수 있는 컴포넌트는 shared에 추가했다.

page url을 기준으로 사용되는 컴포넌트들은 /blog-input, /blog-recap 하위에서 ui의 컴포넌트들을 조합하고 페이지에 필요한 로직들을 추가해서 만들었다. 이때 추가한 로직이나 타입 등은 /hooks, /lib, /store, /types 등으로 /src에서 나눈 것과 동일한 형식으로 다시 나눴다.

예를 들면

현재 프로젝트에서 해당 부분은 section tag로 이루어져 있고 /app/blog-recap 폴더에 속해있다.

‘이 블로그 방문하기’ 부분은 단순 텍스트로 이루어져 있기 때문에 /ui의 Text컴포넌트를 사용했다.

하단 부분은 blog-link-card라는 이름으로 /components/blog-recap 하위에 넣었다. blog-link-card에서 필요한 부분은 다음 두가지이다.

서버에서 온 프로필 사진, 블로그 이름, 블로그 주소 데이터
블로그 주소에서 프로토콜을 제외한 나머지 부분

카드를 렌더링하는 데 필요한 데이터들은 /components/blog-recap/store에 분류하고 readonly atom을 이용해 가져왔다.

블로그 주소에서 프로토콜을 제외하는 로직은 /components/blog-recap/blog-link-card의 utils.ts 에 넣었다.

openapi-generator-cli

사이드 프로젝트를 개발하면서 사용했던 라이브러리 중 하나는 openapi-generator-cli이다.

open-api-tools는 OAS에 따라 개발된 API 스펙 문서에 따라 클라이언트에서 사용 가능한 타입들을 자동으로 생성해주는 도구이다.

우리 사이드 프로젝트에서는 api schema 문서를 open api로 받아볼 수 있었고 이를 이용해 openapi-generator-cli를 사용하여 shema의 타입을 자동 생성할 수 있었다.

사용 방법

npm init을 통해 만든 프로젝트 폴더에서 아래 명령어를 실행한다

npm install @openapitools/openapi-generator-cli

그리고 package.json에 다음과 같은 스크립트 명령어를 작성한다.

  "scripts": {
    ...
    "generate": "openapi-generator-cli generate -i {api문서 주소}/openapi.json -g typescript-axios -o src/api/generated"
  },

그리고 터미널에 npm run generate를 입력하면 /src/api/generated 폴더 안에 api.ts, base.ts, common.ts 등 자동 생성된 파일들을 볼 수 있다.

나는 openapi-generator를 이용해 통신함수 구현까지 자동화를 하지는 않았고 자주 변경될 수 있는 schema의 타입을 자동 생성하는 것에 만족하였다.

Outro

프로젝트를 개발하면서 이전에 느꼈던 한계점들을 보완하려고 노력했는데 역시 프로젝트 설계와 적절한 도구 사용은 많은 경험이 필요한 일인 것 같다.

references.

https://xionwcfm.tistory.com/459

https://velog.io/@529539/Nextjs14-TypeScript-Project-Setting-Structure

https://min9nim.vercel.app/2022-04-07-openapi-generator/

https://www.stevy.dev/react-design-guide/

https://github.com/Blazity/enterprise-commerce

https://github.com/SoYoung210/craft

ps. 혹시 부족한 부분이나 개선점을 발견하셨다면 댓글 부탁드립니다

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

jinlee0310 — Sun, 22 Dec 2024 03:56:34 +0900

약 3주간의 사이드 프로젝트를 성공적으로 개발한 후기를 적어본다

서론

11월 중순쯤 수민님이 사이드 프로젝트 모임을 모집하셨다. 글또 10기 네임드이신 수민님과의 사이드 프로젝트라 같이 해보고 싶기도 하고 글또 운영진이신 은찬님이 백엔드 개발자 역할을 해주신다고 하셔서 더 눈길이 갔다.
너무 감사하게도 함께 프로젝트를 진행하고 싶다는 수민님의 러브콜을 받았다! 설레는 마음으로 톡방이 만들어지기를 기다렸다. 함께하는 채은님, 경탁님도 평소에 글또에서 자주 이름을 봤었고 궁금했던 분들이어서 함께할 수 있다는 것이 너무 기뻤다.

킥오프

첫 미팅은 온라인으로 진행했다. 수민님께서 해커톤을 위한 개발도 좋지만 해커톤 끝난 뒤에도 계속해서 운영할 수 있는 프로젝트를 해보고 싶다고 말씀하셨다. 수민님의 이 말이 너무 인상적이었고 이 포부 덕분에 해커톤이 끝난 뒤에도 운영과 개발을 하려면 프로젝트를 어떻게 설계하면 좋을 지 계속 고민했던 것 같다.

아이디에이션

노션 문서에 각자 만들고 싶은 아이디어들을 적어왔다. 여기서부터는 채은님의 진행이 너무 좋았다. 채은님께서 아이디어를 정할 수 있는 기준점을 먼저 적어와주셨는데 이 부분이 너무 인상적이었다. 채은님께서는 이 이후로도 계속 기준점에 대해 제시해주셨는데 여기서 PM의 존재 의미를 깨닫게 된 것 같다. 채은님의 진행 능력과 문제를 해결하는 과정을 바로 옆에서 보고 배울 수 있게 되어 너무 좋았고 다른 사람의 4~5년간 쌓아온 노하우를 배울 수 있어서 너무 귀중한 시간이었다.
채은님의 지휘에 따라 아이디어를 발산하고 다시 좁히고 발산하고 다시 좁히는 과정에서 한사람 한사람의 피드백들이 너무 좋았고 특히 은찬님의 피드백에서 인상적이었던 부분이 많았다.

그리고 개발..

개발을 하면서 개인적으로는 좋았던 점도 많았고 아쉬웠던 점도 많았고 힘든 점도 많았다. 프로젝트를 개발하며 개인적으로 느꼈던 점들을 풀어보려고 한다.
우선 좋았던 점은 이전에 업무 하면서 스스로 부족하다고 느꼈던 점들을 많이 보완했다는 생각이 들었다. 폴더구조나 상태관리를 사용하면서, 그리고 인애님과 계속 토의를 하면서 내가 원하는 이상적인 개발을 할 수 있었다. 이전에는 명확하지 않은 폴더관리와 상태관리, 그리고 제대로 정리되지 않고 정의되지 않은 수많은 타입들 때문에 개발을 하는 것이 너무 힘들었던 기억이 있다. 이 부분을 보완하기 위해 폴더 관리와 상태 관리를 설계할 때 최대한 결합도를 낮추고 응집도를 높이는 개발을 하려고 노력했고 그 결과 DX가 너무 좋아졌다고 스스로 느꼈다.
그리고 shadcn/ui와 tailwind를 처음 사용해봤는데 개발 경험이 너무 좋았다. 코어가 되는 컴포넌트를 직접 설계 해야 하는 부담이 적었고 클래스 이름을 직접 지어주지 않았던 것이 너무 편했던 것 같다.(이전에는 styled-components를 사용해서 이름을 계속 지어줘야 했다.)
그리고 api 통신 기능을 개발할 때 @openapitools/openapi-generator-cli를 사용했는데 이것도 너무 편리했던 것 같다. 백엔드 스펙이 변경될 때 이전에는 하나하나 찾아가며 타입을 작성했는데 이번 프로젝트에서는 라이브러리를 사용해 타입을 자동으로 생성할 수 있었다.
아쉬웠던 점은 내가 사용해보고 싶었던 canvas api를 사용해보지 못했다는 점이다. 그래픽스를 조금 공부하면서 canvas를 사용해보고 싶다는 생각을 했었는데 UI나 기능 면에서 canvas가 들어갈만한 부분이 없어서 조금 아쉬웠다. 그리고 애니메이션을 적용해보고 싶었는데 시간적인 부분에서 애니메이션을 적용하기 어려웠던 것 같다. 이부분은 앞으로 프로젝트를 발전시키면서 적용해보고 싶은 욕심이 있다.
힘들었던 점은 프로젝트 초기 세팅 부분이었다. 설계를 잘 하고 싶다는 욕심이 있다보니 고민하는 시간이 길어지게 되어 실질적으로 개발하는 시간이 계속 미뤄졌던 것 같다. 이 부분도 앞으로 어떻게 해야 보완할 수 있을 지 고민해봐야 할 것 같다.

10일간의 해커톤의 끝, 그리고 수상! 출시!

10일 간 나름대로 여러 고민을 하면서 개발을 마쳤고 마지막 날에는 점심도 안먹고 계속 수정과 배포를 반복했다. 모든 팀원의 노고가 담긴 우리 서비스가 정말 마음에 들었지만 결과는 어떻게 될 지 몰라 기대를 하지는 않았는데 1pick에 선정되어 너무 기뻤다.
수상을 하고 나서도 부족하다고 느끼는 부분을 계속 수정하고 목요일에 글또 커뮤니티에도 우리 서비스를 공개했다. 서비스 체험 후기를 댓글에 계속 남겨주셨는데 너무 감사했다. 다른 사람들 통계를 볼 수 있는 부분이나 명언 카드에 긍정적인 피드백을 남겨주셨다. 개인적으로 페이지를 공유 했을 때 나오는 개인 맞춤 페르소나 이미지가 가장 마음에 든다.
여기에 다 적지는 못했지만 팀원들 하나하나 너무 감사하고 소중하다. 개발 초기에는 생각보다 조금 힘들었는데 눈을 빛내면서 빨리 출시해서 후기 받고 싶다는 팀원들 덕분에 더 열심히 끝까지 개발할 수 있었던 것 같다.
마지막으로 우리 팀원들, 정말 고생 많았어요. 감사합니다.☺️

셰이더 함수 정리

jinlee0310 — Sun, 24 Nov 2024 23:30:42 +0900

패스트 캠퍼스에서 수강한 강의 내용 중 셰이더 함수에 대해 정리하였다.

우선 무작정 따라해볼 수 있도록 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;

void main(){
  // 2. 대각선 그라데이션 만들기
  float x = vUv.x;
  float y = vUv.y;

  float gradient = (x + y) / 2.0;
  vec3 col = vec3(gradient);

  gl_FragColor=vec4(col, 1.0);
}

만약 사선 모양의 그라데이션을 만들고 싶다면 위와 같이 코드를 수정해주면 된다.

3. step

precision mediump float;

varying vec2 vUv;

void main(){
  // 3. step
  float x = vUv.x;
  float y = vUv.y;

  float strength = step(0.5, x); // 기준점, 변수
  vec3 col = vec3(strength);

  gl_FragColor=vec4(col, 1.0);
}

step 함수는 첫번째 인자로 기준점을 받고 두번째 인자로 변수를 받는다. 변수가 기준점을 넘지 않으면 0.0을 리턴하고 기준점을 넘으면 1.0을 리턴한다.

4. min, max

precision mediump float;

varying vec2 vUv;

void main(){
  // 4. min, max
  float x = vUv.x;
  float y = vUv.y;

  float strength = min(0.5, x);
  // float strength = max(0.5, x);
  vec3 col = vec3(strength);

  gl_FragColor=vec4(col, 1.0);
}

JavaScript의 Math.min, Math.max 함수와 같은 리턴값을 가진다.

4. min, max

precision mediump float;

varying vec2 vUv;

void main(){
  // 4. min, max
  float x = vUv.x;
  float y = vUv.y;

  float strength = min(0.5, x);
  // float strength = max(0.5, x);
  vec3 col = vec3(strength);

  gl_FragColor=vec4(col, 1.0);
}

JavaScript의 Math.min, Math.max 함수와 같은 리턴값을 가진다.

5. clamp

precision mediump float;

varying vec2 vUv;

void main(){
  // 5. clamp
  float x = vUv.x;
  float y = vUv.y;

  // 0.3 이하에서는 0.3을 리턴, 0.7 이상에서는 0.7을 리턴, 0.3 ~ 0.7에서는 x를 리턴
  float strength = clamp(x, 0.1, 0.8);
  vec3 col = vec3(strength);

  gl_FragColor=vec4(col, 1.0);
}

clamp 함수는 2개의 기준점을 가진다.x가 min값보다 작으면 min, min과 max 사이라면 x, max보다 크면 max를 리턴한다.

6. smoothstep

precision mediump float;

varying vec2 vUv;

void main(){
  // 6. smoothstep
  float x = vUv.x;
  float y = vUv.y;
  
  float strength = smoothstep(0.2, 0.8, x); // 내장 함수

  vec3 col = vec3(strength);

  gl_FragColor=vec4(col, 1.0);
}

step 함수에서 기준점을 그라데이션 처리하는 함수이다. 기준점의 간격이 늘어날수록 그라데이션 영역도 늘어난다.

7. mix

precision mediump float;

varying vec2 vUv;

void main(){
	// 7. mix
  float x = vUv.x;
  float y = vUv.y;

  vec3 green = vec3(0.0, 1.0, 0.0);
  vec3 blue = vec3(0.0, 0.0, 1.0);
  
  vec3 col = mix(green, blue, x);

  gl_FragColor = vec4(col, 1.0);
}

mix 함수는 첫번째 인자와 두번째 인자를 세번째 인자의 비율로 보간한 값을 리턴해주는 함수이다.

8. pow, sqrt

precision mediump float;

varying vec2 vUv;

void main(){
	// 8. pow, sqrt
  float x = vUv.x;
  float y = vUv.y;

  vec3 col = vec3(x);
  vec3 green=vec3(0.0, 1.0, 0.0);

  if(pow(x, 2.0) - 0.005 <= y && y <= pow(x, 2.0) + 0.005){
    col = green;
  }
  // if(sqrt(x) - 0.005 <= y && y <= sqrt(x) + 0.005){
  //   col = green;
  // }

  gl_FragColor=vec4(col, 1.0);
}

pow와 sqrt함수 역시 JavaScript의 Math.pow, Math.sqrt와 같다.

9. mod

precision mediump float;

varying vec2 vUv;

void main(){
  // 9. mod: (a % b)
  float x = vUv.x;
  float y = vUv.y;

  vec3 col = vec3(mod(x * 2.0, 1.0));

  gl_FragColor=vec4(col, 1.0);
}

mod함수는 나머지를 반환해주는 함수이다. 첫번째 인자로 들어온 값을 두번째 인자로 나눈 나머지를 반환한다.

10. fract

소수점 이하의 값을 반환해주는 함수이다.

위 mod 함수는 아래 코드로도 대체할 수 있다.

precision mediump float;

varying vec2 vUv;

void main(){
  float x = vUv.x;
  float y = vUv.y;

  vec3 col = vec3(fract(x * 2.0));

  gl_FragColor=vec4(col, 1.0);
}

또한 아래 코드를 작성하면 이러한 효과를 만들 수도 있다.

precision mediump float;

varying vec2 vUv;

void main(){
  // . fract: 소수점 이하의 값을 반환
	float x = vUv.x;
  float y = vUv.y;

  // vec3 col = vec3(fract(x * y));
  // col = step(0.5, col);

  vec3 col = vec3(fract((x - 0.11) * 7.0));
  vec3 col2 = vec3(fract((y - 0.11) * 7.0));

  col = step(0.5, col) * step(0.5, col2);

  fract(0.4); // 0.4
  fract(2.3); // 0.3

  gl_FragColor=vec4(col, 1.0);
}

11. sin, cos

sin 함수와 cos 함수는 그래픽스에서 자주 사용되는 함수이다.

아래와 같이 코드를 작성한다.

precision mediump float;

varying vec2 vUv;

void main(){
  // 11. sin, cos
  float x = vUv.x;
  float y = vUv.y;

  vec3 col = vec3(sin(x * 1.0));
  // vec3 col = vec3(cos(x * 20.0));

  gl_FragColor=vec4(col, 1.0);
}

desmos 사이트에 가면 수학 그래프들을 그려볼 수 있다. 0과 1 사이에서 그래프를 따라 위와 같은 분포를 가진다고 생각하면 된다.

만약 그라데이션이 검은색부터 흰색까지 진행되다가 다시 검은색으로 돌아오는 그림을 그리고 싶다면 아래와 같이 코드를 작성하면 된다.

precision mediump float;

varying vec2 vUv;

void main(){
  // 11. sin, cos
  float x = vUv.x;
  float y = vUv.y;

  vec3 col = vec3(sin(x * 3.0));
  // vec3 col = vec3(cos(x * 20.0));

  gl_FragColor=vec4(col, 1.0);
}

비슷한 원리를 사용해서 코드를 아래와 같이 작성하면 다음과 같은 그림을 만들 수 있다.

11. sin, cos

sin 함수와 cos 함수는 그래픽스에서 자주 사용되는 함수이다.

아래와 같이 코드를 작성한다.

precision mediump float;

varying vec2 vUv;

void main(){
  // 11. sin, cos
  float x = vUv.x;
  float y = vUv.y;

  vec3 col = vec3(sin(x * 1.0));
  // vec3 col = vec3(cos(x * 20.0));

  gl_FragColor=vec4(col, 1.0);
}

desmos 사이트에 가면 수학 그래프들을 그려볼 수 있다. 0과 1 사이에서 그래프를 따라 위와 같은 분포를 가진다고 생각하면 된다.

만약 그라데이션이 검은색부터 흰색까지 진행되다가 다시 검은색으로 돌아오는 그림을 그리고 싶다면 아래와 같이 코드를 작성하면 된다.

precision mediump float;

varying vec2 vUv;

void main(){
  // 11. sin, cos
  float x = vUv.x;
  float y = vUv.y;

  vec3 col = vec3(sin(x * 3.0));
  // vec3 col = vec3(cos(x * 20.0));

  gl_FragColor=vec4(col, 1.0);
}

비슷한 원리를 사용해서 코드를 아래와 같이 작성하면 다음과 같은 그림을 만들 수 있다.

precision mediump float;

varying vec2 vUv;

void main(){
  // 11. sin, cos
  float x = vUv.x;
  float y = vUv.y;

  vec3 col = vec3(sin(x * 20.0));
  // vec3 col = vec3(cos(x * 20.0));

  gl_FragColor=vec4(col, 1.0);
}

12. abs

절대값을 반환해주는 함수이다.

precision mediump float;

varying vec2 vUv;

void main(){
  // 12. abs
  float x = vUv.x;
  float y = vUv.y;

  vec3 col = vec3(abs(cos(x * 20.0)));

  gl_FragColor=vec4(col, 1.0);
}

13. distance, length

두 정점 사이의 거리(길이)를 반환해주는 함수이다.

아래와 같이 코드를 작성해보자

precision mediump float;

varying vec2 vUv;

void main(){
  // 13. distance: 두 정점 사이의 거리
  float x = vUv.x;
  float y = vUv.y;

  float dist = distance(x, 0.5);

  vec3 col = vec3(dist);

  gl_FragColor=vec4(col, 1.0);
}

0.5에서부터 x위치까지의 거리를 반환해주어서 0.5와 가까울수록 어두운 색이고 멀어질수록 0.5와 가까운 색을 나타낸다.

precision mediump float;

varying vec2 vUv;

void main(){
  // 13. distance: 두 정점 사이의 거리
  float x = vUv.x;
  float y = vUv.y;

  float dist = distance(x, 0.5);
  dist = step(0.3, dist);

  vec3 col = vec3(dist);

  gl_FragColor=vec4(col, 1.0);
}

이 함수에 step 함수를 사용하면 0.3을 기준으로 0과 1을 반환하는 그림을 그릴 수 있다.

precision mediump float;

varying vec2 vUv;

void main(){
  // 13. distance: 두 정점 사이의 거리
  float x = vUv.x;
  float y = vUv.y;

  // float dist = distance(x, 0.5);
  float dist = distance(vec2(x, y), vec2(0.5));
  dist = step(0.3, dist);

  vec3 col = vec3(dist);

  gl_FragColor=vec4(col, 1.0);
}

강의에 나온 함수들을 설명한 것이고 더 자세히는 The Book of Shaders에 가면 더 많은 함수들을 확인할 수 있다.

이렇게 함수들만 쭉 정리해본 이유는 이 데모의 코드를 분석해보고 구현해보기 위해서이다. 다음 글에서는 해당 데모의 코드를 분석해보고 직접 구현해보겠다.

Scramble Text Animation

jinlee0310 — Sat, 9 Nov 2024 21:50:19 +0900

전부터 구현해 보고 싶었던 scramble text effect를 구현해 보았다.
코드 레퍼런스: https://codepen.io/soulwire/pen/mEMPrK

1. Scramble Text Effect

이와 같이 텍스트가 임의의 문자로 변환되다가 점점 올바른 텍스트로 변해가는 애니메이션 효과를 말한다. 일반적으로 랜덤하게 문자들이 바뀌다가 올바른 텍스트가 서서히 자리 잡는 방식으로 구현된다.

2. 구현 코드

1. 1차 구현

기본 구현 아이디어는 다음과 같다.(chatGPT의 도움을 받았다.)

텍스트를 배열에 넣고
랜덤 index의 텍스트를 characters의 랜덤한 글자와 교체한다.
믹스된 텍스트를 렌더링한다.

export default function ScrambleText() {
  const texts = useMemo(() => { // text 배열 선언
    return [
      "Neo,",
      " Type messages everywhere!",
      "Add a bio to your profile!",
      "Add a description to your repo!",
      "Make your readme stand out!",
      "Unstyled, Composable Random Text Animation React Component",
    ];
  }, []);

  const duration = useMemo(() => 1500, []); // 각 글자의 스크램블 지속 시간 (1초)
  const pauseDuration = useMemo(() => 2000, []); // 각 글자 사이 멈춤 시간

  const [displayText, setDisplayText] = useState<string>("");
  const [textIndex, setTextIndex] = useState<number>(0); // 현재 보여줄 텍스트 인덱스

  const characters = "!<>-_\\\\/[]{}—=+*^?#________";

  // 랜덤한 순서로 인덱스를 확정하기 위한 배열 생성
  const shuffledIndices = useMemo(() => {
    const indices = [...Array(texts[textIndex].length).keys()];
    for (let i = indices.length - 1; i > 0; i--) {
      const j = Math.floor(Math.random() * (i + 1));
      [indices[i], indices[j]] = [indices[j], indices[i]];
    }
    return indices;
  }, [textIndex, texts]);

  useEffect(() => {
    let iterations = texts[textIndex].length;
    const confirmedChars: boolean[] = new Array(texts[textIndex].length).fill(
      false,
    );

    const scramble = () => {
      const scrambledText = texts[textIndex]
        .split("")
        .map((_, index) =>
          confirmedChars[index]
            ? texts[textIndex][index]
            : characters[Math.floor(Math.random() * characters.length)],
        )
        .join("");

      const currentIndex =
        shuffledIndices[texts[textIndex].length - iterations];
      confirmedChars[currentIndex] = true;
      confirmedChars[currentIndex + 1] = true;

      setDisplayText(scrambledText);

      iterations -= 2;

      if (iterations <= 0) {
        clearInterval(intervalId);
        setDisplayText(texts[textIndex]); // 최종 텍스트 설정
        setTimeout(() => {
          setTextIndex((prev) => (prev + 1) % texts.length);
          iterations = texts[(textIndex + 1) % texts.length].length;
        }, pauseDuration);
      }
    };

    const intervalId = setInterval(scramble, 100); // 0.1초마다 scramble 함수 실행

    return () => clearInterval(intervalId); // 컴포넌트 언마운트 시 interval 제거
  }, [duration, shuffledIndices, texts, textIndex, pauseDuration]);

  return <Text>{displayText}</Text>;
}

이렇게 하면 효과는 구현할 수 있지만 아래처럼 글자와 글자 사이의 전환이 뚝뚝 끊기면서 이루어지게 된다.

이 부분이 마음에 들지 않아 레퍼런스 코드를 자세히 뜯어봤다.

2. 2차 구현

텍스트의 길이가 점점 늘어나거나 점점 줄어드는 듯한 효과를 어떻게 구현하나 봤는데 queue 배열을 선언하여 구현했다. queue의 길이는 현재 텍스트와 다음 텍스트의 길이 중 긴 것을 선택하고 from과 to에 현재 텍스트와 다음 텍스트의 글자를 하나씩 넣는다. 부족한 텍스트는 “”로 처리한다.

iteration을 queue의 길이만큼 반복하도록 로직을 구현했다.
그리고 랜덤한 숫자를 가진 start와 end를 queue에 추가하고 iteration 횟수에 따라 start 이하일 때 현재 텍스트, start 이상일 때 랜덤 텍스트, end 이상일 때 다음 텍스트를 렌더하는 방식으로 텍스트를 믹스했다.

const PHASES = [
  "Neo,",
  "sooner or later",
  "you're going to realize",
  "just as I did",
  "that there's a difference",
  "between knowing the path",
  "and walking the path",
  "Unstyled, Composable Random Text Animation React Component",
];

const ScrambleText = () => {
  const interval = 100;
  const pauseDuration = 2000;
  const characters = "!<>-_\\\\/[]{}—=+*^?#________";

  const [displayText, setDisplayText] = useState<(string | ReactNode)[]>([]);
  const [textIndex, setTextIndex] = useState<number>(0);
  const [queue, setQueue] = useState<
    { from: string; to: string; start: number; end: number }[]
  >([]);

  const text = PHASES[textIndex];

  const initializeQueue = useCallback(() => {
    const nextText = PHASES[(textIndex + 1) % PHASES.length];
    const length = Math.max(text.length, nextText.length);
    const newQueue = Array.from({ length }, (_, i) => {
      const from = text[i] || "";
      const to = nextText[i] || "";
      const start = Math.floor(
        (Math.random() * (text.length + nextText.length)) / 2,
      );
      const end =
        start +
        Math.floor((Math.random() * (text.length + nextText.length)) / 2);
      return { from, to, start, end };
    });

    setQueue(newQueue);
  }, [text, textIndex]);

  useEffect(() => {
    let iterations = queue.length;

    const scramble = () => {
      const scrambledText = queue.map(({ from, to, start, end }) => {
        if (queue.length - iterations >= end) {
          return to;
        } else if (queue.length - iterations >= start) {
          const char =
            characters[Math.floor(Math.random() * characters.length)];
          return (
            <span className="dud">
              {char}
            </span>
          );
        } else {
          return from;
        }
      });

      setDisplayText(scrambledText);
      iterations -= 1;

      if (iterations <= 0) {
        clearInterval(intervalId);
        setDisplayText(text.split(""));
        setTimeout(() => {
          initializeQueue();
          setTextIndex((prev) => (prev + 1) % PHASES.length);
        }, pauseDuration);
      }
    };

    const intervalId = setInterval(scramble, interval);
    return () => clearInterval(intervalId);
  }, [text, queue, initializeQueue, pauseDuration]);

  return <Text>{displayText}</Text>;
};

예시 코드에는 생략했지만 참고로 리액트의 diffing algorithm 때문에 span의 key를 중복 없이 설정 해줘야 한다. key가 같으면 리액트가 이전에 렌더된 랜덤 텍스트를 다음 텍스트로 교체하지 않는다.

3. Interval 처리

레퍼런스에서는 requestAnimationFrame 함수와 frame이라는 변수를 사용해 스크램블 하는 시간을 텍스트 길이에 상관 없이 거의 동일하게 처리했다.
하지만 나는 인터벌 시간을 0.1sec로 설정하는 것이 보기에 가장 좋아서 길이가 길다면 스크램블 되는 시간을 늘리는 애니메이션을 선택했다.(이부분은 취향 차이인 것 같다.)

4. css 처리

css는 레퍼런스와 동일한 색상으로 처리했다. 랜덤한 텍스트를 어두운 색상으로 설정하면 좀 더 극적인 scramble text 효과를 볼 수 있다.

5. 텍스트 생성 효과

scramble text effect는 여러개의 텍스트들을 전환해도 되지만 아래처럼 아무것도 없는 상태에서 스크램블 되면서 텍스트가 나타나는 효과도 만들어볼 수도 있다. PHASES 안에 “”를 추가하면 아래와 같은 효과를 만들어볼 수 있다.

3. 후기

사실 레퍼런스 코드 복붙해도 되긴 할텐데 리액트에 맞게 코드를 수정하느라 구현에 좀 시간이 걸렸다. 그리고 chatGPT에게 리액트에 맞게 바꿔달라고 20번은 물어봤는데 레퍼런스와 비슷한 느낌이 전혀 나지 않아서 결국 하나하나 뜯어보며 코드를 작성해야 했다ㅋㅋ..

ps. 혹시 부족한 부분이나 개선점을 발견하셨다면 댓글 부탁드립니다

글또 10기 1주일 활동 후기

jinlee0310 — Thu, 10 Oct 2024 02:08:28 +0900

1. 글또 참여 계기

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

2. 글또 활동 후기

정말 많은 사람들의 자기소개를 읽고, 인사를 나누고, 또 모르는 사람에게도 말을 걸어보면서 글또에 소속감을 느끼게 되었다. 그리고 모르는 사람임에도 이모지를 30개나 달아주신 분들께 정말 감사했다.
OT가 끝나고 여러 소모임에 들어갔다. 다진마늘, 글읽었또, 밈또, 감사회고해또 등등.. 특히 OT때 언급이 있었던 다진마늘이 가장 궁금했다. 활동을 시작한 지 1주일 정도 지난 지금은 다진마늘 운영진(?)에 들어가있다ㅎㅎ(커피챗도 예정되어있다.) 1주일만에 승진(?)을 한 것 같은 느낌이다.
종이비행기도 날려보고 대나무숲에 고민도 써보았다. 특히 너무 힘든 날 대숲에 고민을 적었는데 많은 분들이 응원의 이모지와 댓글을 남겨 주셔서 너무 감사했다. 나도 꼭 나중에 사람들에게 힘이 되는 서비스를 운영해보고 싶어졌다.
글을 쓰려면 책을 좀 읽어야 할 것 같아 책읽어또에 들어갔고 그래픽스에 대한 공부도 계속 하고 싶어 쓰리제이에스해또에 들어갔다. 천천히 활동 영역을 넓혀 보면서 앞으로의 나의 진로도 같이 고민 할 예정이다.

3. 다짐

우선 미약하더라도 6개월을 꾸준히 활동해보는 것이 목표이다. 굵직한 활동을 하기에는 너무 대단한 분들이 많으셔서 내가 그런 활동을 할 수 있을지는 잘 모르겠지만 6개월 이상을 꾸준히 해본 것이 많지 않기에, 이번에 그 목록에 글또 활동을 넣어보려고 한다.
그리고 글 쓰는 것과 좀 더 친해질 수 있을 것 같다. 지금까지는 나를 표현하는 것에 너무 소홀했었다. 왠지 생색 내는 것 같기도 하고, 부끄럽기도 하고, 그리고 잘하는 엔지니어라면 굳이 표현하지 않아도 주변 사람이 다 알 것이라는 혼자만의 착각에 빠져 있었던 것 같다. 이번 활동을 통해 나 자신을 잘 표현하는 방법을 익히고 싶다.