미리보기

[개요]

• 기업 맞춤형 LLM 기반 솔루션을 손쉽게 구축할 수 있는 플랫폼의 화면 개발

• 사용 기술: React, TypeScript, React Query, Axios, Tailwind, esLint, Prettier

[기여]

1. 공용 테이블 컴포넌트 구축을 통한 개발 생산성 향상

• 문제 정의

  • 서비스에서 10개 이상의 테이블 UI가 사용되고 있었으나, 도메인마다 필요한 기능(삭제/수정·토글 뷰·검색/필터)과 API 데이터 형식이 제각각인 상황

    • 어떤 도메인에서는 수정/삭제 기능의 액션 셀이 필요하지만, 다른 도메인에서는 보안 이슈로 표시가 불필요

    • 동일한 ‘id’ 데이터라도 API마다 ‘uuid’ 등으로 필드명이 달라 타입 정의가 어려움

  • 각 도메인마다 중복 코드를 복사·수정해 테이블을 구성하는 방식이어서 신규 요구사항이 생길 때마다 3시간 이상 반복 작업이 수행됨

  • “테이블 로직을 공용화해 유지보수와 개발 속도를 높이자.”라는 결론에 따라 
React Table 기반으로 통합 컴포넌트 구축 추진

    
    

• 문제 해결

  • BaseTable 컴포넌트로 테이블 구조 및 옵션을 추상화:

    • 검색·필터·정렬·액션 셀 같은 공통 기능을 Hooks + Props 형태로 모듈화

  • 도메인별 Column config만 작성하면 BaseTable에 주입해 바로 적용:

    • Header, accessor, CustomCell 등을 정의해 커스텀화하면서도, 공통 테이블 구조는 그대로 재사용

  • API 불일치(id vs uuid 등) 문제는 CustomCell이나 Column accessor에서 처리하도록 분리해
테이블의 틀 자체는 흔들리지 않도록 설계
    

• 성과

  • 테이블 구현 시간이 3시간 → 30분으로 단축, 새로 합류한 개발자 2명도 1일 내 UI를 완성할 수 있게 됨

  • 코드 중복률 70% 이상 감소: 도메인별로 일부만 수정해도 전체 테이블 반영이 가능

2. 에이전트 생성 화면의 노드 이름 생성 로직 개선을 통한 사용성 향상

• 문제 정의

  • “타입별로 여러 노드가 중복 생성될 수 있지만, 사용자가 노드 이름을 편집할 수 있어야 한다”는 요구사항

  • 노드 이름은 유일하면서도 타입이 드러나는 형태(Type_Index)여야 했음

  • 처음에는 “타입 + 숫자 카운트” 방식으로 구현되었으나 새 에이전트 최초 생성 시에는 정상 작동해도, 
수정 화면에선 카운트가 0으로 재설정되어 중복 이름이 발생하는 버그가 발견됨

  • 버그 해결에 대한 방편으로 네이밍에 uuid를 사용하는 방식으로 구현되어 있었음

  • 그러나 너무 긴 네이밍 탓에 가독성과 관리가 어렵고, 향후 노드 검색·필터링 기능 확장 시 UX 저하가 우려
    

• 문제 해결

  • 중복 검사를 거쳐 “타입_인덱스” 형태의 새 이름을 자동 생성하도록 수정하고, 수정 화면에서도 이전 노드 정보를 불러와 인덱스를 이어갈 수 있도록 보완

  • 이로써 “Type_1, Type_2, …” 등 간결하고 직관적인 네이밍을 안정적으로 유지하게 됨

• 성과

  • 노드 이름 길이를 70% 이상 단축해, 가독성 및 편집 용이성이 크게 향상
    

3. 공통 코드 스타일 확립 및 개발 환경 세팅에 기여

• 문제 정의

  • 팀원 대부분이 VSCode 환경에 익숙한 상황에서, 고객사 요구로 WebStorm을 사용해야 하는 상황

  • 운영체제별 줄바꿈·공백 차이로 인해 Git Pull 시 포맷팅 충돌이 발생

  • ESLint가 자동으로 에러를 일으키는 문제가 빈번
    

• 문제 해결

  • ESLint·Prettier 설정 통합

    • .eslintrc, .prettierrc를 일관된 규칙으로 정비

    • endOfLine 옵션으로 운영체제 간 줄바꿈 충돌을 방지

  • 개발 환경 문서화

    • WebStorm 자동 포맷팅 및 ESLint 설정 방법을 가이드화

• 성과

  • 포맷팅 관련 Git 충돌이 50% 이상 감소, 코드 스타일 불일치로 인한 소모 시간을 크게 줄임

  • 온보딩 및 협업 개선: 공통 문서 제공으로, 신규 개발자가 별도 도움 없이 바로 개발 가능

• 배포 링크: https://apps.apple.com/kr/app/rollingart/id6505098989

• Git Repo: https://github.com/YujinKang1024/rollingart-project
  

[개요]

• 스마트폰을 기울여 길을 따라 공을 정확하게 굴리고 바닥에 그림을 그리는 3D 게임

• JS로 iOS, Android 두 운영체제를 모두 지원하기 위해 React Native와 Expo로 개발

• 사용 기술: React Native, Expo, React Three Fiber(R3F), Jotai, GLSL

  
  

[기여] (그래픽 리소스 / 카메라, 씬 세팅, 셰이더 구현 기여도 100%)

1. 프레임 드랍 현상 개선 (관련 링크)

• 문제 정의

  • R3F의 useFrame 훅에 이동/셰이더 변형/리소스 로드 등이 모두 집중되어 매 프레임마다 과도한 연산이 발생

  • JS 메인 스레드가 막히면서 눈에 띄는 프레임 드랍이 확인됨

  • 한때 Expo Eject를 통한 네이티브 스레드 활용을 고려했으나, 
Expo 관리 체계 유지가 필요해 JS 레벨 최적화로 문제를 해결하기로 결정

• 문제 해결

  • 3D 리소스 로드를 초기화 단계로 분리하고 이동 로직과 셰이더/텍스처 변형을 별도 훅으로 나누어
실제 매 프레임 호출되는 코드를 최소화

  • useMemo, useRef 등을 통해 중복 계산을 줄이고, 기울기 값 등은 이벤트 기반으로 업데이트하도록 변경
    이를 통해 Expo 환경을 유지하면서도 매 프레임 호출량을 대폭 감축
    

• 성과

  • 매 프레임 중복 연산 제거만으로 프레임 드랍이 눈에 띄게 줄어 부드러운 3D 플레이 환경을 구현

2. 프로그래머 간 협업 체계 구축 및 문서화 (관련 링크)

• 배경

  • 2인이 협업하는 과정에서 “자주 쓰는 명령어나 빌드·배포 설정”을 체계적으로 공유하면 
개발 속도와 협업 효율을 높일 수 있다고 판단

• 실행

  • Notion을 Wiki처럼 활용하여, 팀이 합의한 개발 규칙(커밋 컨벤션, 브랜치 전략 등)과 
빌드 프로세스 등을 한곳에 기록

• 효과

  • 반복적으로 명령어나 툴 설정을 찾을 필요가 없어 개발 기간 중 실제 로직 구현에 집중

  • 문서화가 프로젝트 전반의 지식 베이스 역할을 하면서, 원활하고 일관된 개발 프로세스를 유지

• 배포 링크: https://anchorportfolio.site/

• Git Repo: https://github.com/YujinKang1024/anchor

[개요]

• 부트 캠프에서 진행한 개인 프로젝트로, 3D 요소와의 상호작용을 강조한 포트폴리오 웹사이트

• ‘도전적·신선한 웹 경험’을 강조하기 위해 보트 이동, 섬 상호작용, 물 셰이더 등의 다양한 3D 요소 기획 및 구현

• 사용 기술: React, React Three Fiber(R3F), Styled Components, GSAP, GLSL

[기여]

1. 렌더링 타이밍 충돌로 인한 화면 점멸 문제 해결 (관련 링크)

• 문제 정의

  • 섬에 있는 자판기를 클릭하면 음료 캔이 굴러나오는 이벤트를 구현

  • 첫 번째 캔 생성 시 화면 전체가 흰색으로 깜빡이는 현상이 발생

  • 원인을 추적하는 과정에서 console.log를 넣으면 깜빡임이 없어지는 점으로 보아
렌더링 타이밍 충돌(Race Condition)을 의심하게 됨

• 문제 해결

  • requestAnimationFrame을 활용한 렌더링 안정화

  • 캔 생성 로직을 곧바로 실행하지 않고, 브라우저의 다음 애니메이션 프레임 직전에 콜백을 실행하도록 변경

  • 상태 업데이트, Three.js의 씬 재계산, 포스트프로세싱(Blur/Bloom 등)이 동일한 프레임에 맞춰 동작하게 함

• 성과

  • 점멸 문제를 수정하여 3D 씬에서 안정적으로 상호작용이 가능하게끔 함

2. 도메인 중심의 디렉토리 구조로 리팩토링 진행

• 문제 정의

  • 기존에는 3D 씬(보트 이동, 섬 상호작용 등)이 모두 한 컴포넌트에 뒤섞여 있어 가독성이 낮았음

  • 각 컴포넌트 별 의존성을 파악하기 힘들어 현 구조로는 유지보수에 난관을 겪을 것으로 판단함

• 문제 해결

  • 씬, 보트, 섬 등 기능별로 컴포넌트와 상태 로직을 묶어, 각 디렉토리에 components/hooks/utils 등을 배치

  • 예시: 보트 이동 관련 코드는 boat/, 섬 상호작용 로직은 island/ 폴더 내에 정리하여, 수정 범위를 명확히 구분

  • 이를 통해 새로운 섬이나 3D 객체를 추가할 때 해당 도메인 폴더만 수정하면 되도록 구조화

• 성과

  • 씬이나 섬 로직이 도메인별로 독립적이 되어 추가 기능 구현 시 코드 파악과 변경이 용이해짐

• 배포 링크: https://store.steampowered.com/app/1475380/TheDawn/

• README: https://nebula-plot-fa4.notion.site/Team-Limited-18774c7337988171b2fac87ab5dbc350

[내용]

• Unity 엔진을 활용하여 3인칭 슈팅 3D 게임 ‘여명' 개발. 14인 팀 작업 수행

• 불명확했던 컨셉을 재정립하고, 배경 팀장으로서 일정/리소스 관리 주도

• Steam에 무료 출시, 8000명+ 유저 평가 “매우 긍정적” 달성

• Unite Seoul Education Day 1위, 인디 크래프트 TOP 40 선정