미리보기

엔씨소프트 계약직 과정에서 Graphics AI Lab Neural Rendering 팀의 Frontend-Engineering 직무를 수행하며, 다양한 프로젝트에서 역할을 담당했습니다

Auto-Rigger Tool 프로젝트를 통해 3D 아티스트, 애니메이터, 개발자를 위한 웹 기반 3D 리깅 서비스를 개발했습니다.
React와 Three.js를 활용하여 사용자 친화적인 3D 인터페이스를 설계하고, 효율적인 UI/UX를 구현해 작업 환경을 최적화했습니다.

FA-WebViewer 프로젝트에서는 음성 발화 파일(.wav)을 기반으로 애니메이션을 생성하고 이를 시각화하는 웹 애플리케이션을 개발했습니다.
FastAPI와 React를 활용해 데이터 처리와 UI 간의 원활한 통신을 구현하고, 기술 시연용으로 안정적이고 최적화된 웹 환경을 구축했습니다.

Gaussian Splatting Viewer 프로젝트를 통해 3D Gaussian Splatting 기술을 활용하여 동영상이나 YouTube URL을 입력받아 point-cloud 3D 데이터를 생성하고 이를 웹에서 시각화하는 프로토타입을 개발했습니다.
AWS S3 스토리지를 활용한 파일 업로드 및 관리 기능을 구현하고, GPU 서버와의 통신을 통해 복잡한 Gaussian Splatting 처리를 지원했습니다.

각 프로젝트를 통해 최신 웹 기술과 백엔드 구현, 데이터 처리, 상태 관리, 실시간 시각화에 대한 실무 경험을 쌓으며, 협업과 문제 해결 능력을 더욱 발전시켰습니다.

Gaussian Splatting Viewer는 엔씨소프트 계약직 과정에서 수행한 프로젝트입니다. 3D Gaussian Splatting 기술을 사용하여 동영상 파일 또는 YouTube URL을 입력받아 point-cloud 3D 데이터를 생성하고, 이를 웹에서 시각화하는 기능을 제공하는 프로토타입 프로젝트입니다. 프론트엔드는 React와 React Three Fiber를 기반으로, 백엔드는 FastAPI로 구현되었으며, AWS S3 스토리지를 활용한 파일 관리와 GPU 서버와의 통신을 통해 복잡한 데이터 처리 작업을 지원했습니다.

기간
2024-12-19 ~ 진행중

담당
프론트엔드 개발

스택
React, React Three Fiber (R3F), SCSS, WebGL, FastAPI, Python, AWS S3

인원: FE, BE 개발 1명, GPU 서버 개발 1명, PM 1명

주요 기능

1. 프로젝트 생성

   • 동영상 파일(.mp4, .mov) 업로드 또는 YouTube URL 입력을 통한 프로젝트 생성 기능 구현.

   • 소스 타입(Vanilla, Equirectangular, Fisheye)을 선택하여 데이터 처리 방식 최적화.

2. Gaussian Splatting 데이터 처리

   • 업로드된 데이터를 GPU 서버로 전송하고 Gaussian Splatting 알고리즘으로 처리.

   • 결과물(.ply 파일)을 S3 스토리지에 저장하고, .ply 파일을 .splat 파일로 변환하여 시각화 지원.

3. 3D Viewer

   • React Three Fiber와 WebGL을 활용해 생성된 3D 데이터를 렌더링.

   • 줌, 회전, 이동과 같은 조작 기능 제공 및 UI/UX 최적화.

4. 프로젝트 관리 및 결과 다운로드

   • 프로젝트 목록을 카드 형태로 제공하며, 처리 상태(진행 중, 완료)를 실시간으로 표시.

   • 생성된 3D 데이터(.splat 파일)를 다운로드할 수 있는 기능 구현.

FA-WebViewer는 엔씨소프트 단기 계약직 과정에서 사내용 프로젝트 시연용 웹 개발 업무로 수행한 프로젝트로,
음성 발화 파일(.wav)을 기반으로 애니메이션을 생성하고 이를 시각화하는 기능을 제공하는 웹 애플리케이션입니다.
3D 모델과 애니메이션 데이터를 효율적으로 처리할 수 있습니다.

기간: 2024-12-04 ~ 2024-12-20

담당: 프론트엔드 개발

스택: React, Three.js, R3F, SCSS, FastAPI, Uvicorn

인원: -

주요 기능

• App1: .wav 파일 업로드 및 애니메이션 생성 요청 - 사용자가 Drag & Drop 또는 클릭으로 .wav 파일을 업로드하고, FastAPI와 통신하여 애니메이션 데이터를 생성 및 수신하는 기능 구현.

• App1: 애니메이션 재생 및 모델 선택 - 생성된 애니메이션 데이터를 기반으로 3D 모델에서 애니메이션을 재생하고, 3가지 모델(일반, 실사, 카툰) 중 선택 가능하도록 구현.

• App2: .wav 및 .nfa 파일 기반 애니메이션 재생 - 사용자가 .wav(음성) 및 .nfa(애니메이션 데이터) 파일을 업로드하고, 이를 통해 3D 모델에서 애니메이션을 재생하는 뷰어 기능 구현.

• FastAPI와의 통신 - Frontend와 Backend 간 효율적인 API 요청/응답을 처리하고, 외부 FA 파이프라인과의 연동을 통해 애니메이션 데이터를 생성 및 반환하는 통합 환경 구축.

Auto-Rigger Tool은 엔씨소프트 단기 계약직 과정에서 사내용 웹 페이지 개발 업무의 일환으로 수행한 프로젝트로,
3D 아티스트, 애니메이터 및 개발자를 위해 설계된 웹 기반 3D 리깅 서비스입니다.
사용자는 3D 모델을 업로드하고, 크기와 위치를 조정하며, 마커를 배치하여 스켈레톤을 생성하고 미리보기할 수 있습니다.
이 서비스는 직관적인 UI와 효율적인 워크플로우를 통해 리깅 작업의 생산성을 높이는 것을 목표로 합니다.

기간: 2024.11.12 ~ 2024.11.29

담당: 프론트엔드 개발

스택: React, Three.js, R3F, Sass, Node.js

인원: -

주요 기능

• 모델 업로드 및 조정: 사용자가 .glb 또는 .gltf 형식의 3D 모델을 업로드하고, 크기, 위치, 회전 값을 슬라이더를 사용하여 직관적으로 조정 가능하도록 구현.

• 마커 배치 및 대칭: 턱, 어깨, 팔꿈치, 손목 등 주요 관절에 리깅 마커를 배치하고, 좌우 대칭 기능을 통해 작업 효율화.

• 스켈레톤 미리보기: 사용자 배치 데이터를 기반으로 스켈레톤을 생성하여 3D 모델과 함께 미리보기가 가능하도록 구현.

• 리깅 데이터 생성: 서버와 통신하여 업로드된 데이터를 기반으로 Blender 스크립트를 실행, 리깅 결과를 .glb 파일로 다운로드할 수 있도록 구현.

공공 데이터 API를 활용하여 날씨와 대기질 정보를 제공하는 웹 서비스로, 사용자에게 실시간 환경 정보를 제공합니다. 또한, 다람쥐 육성 게이미피케이션 요소를 통해 사용자가 다양한 종류의 다람쥐를 육성하며 일일 미션을 수행할 수 있는 기능을 구현하였습니다.

기간: 24.07.22 ~ 24.09.13

담당: 프론트엔드 개발

스택: TypeScript, React, CSS, Zustand

인원: 총 5명 (FE 2명, BE 3명)

주요 기능

• 날씨/대기질 정보 제공: 공공 데이터 API를 활용하여 실시간 날씨 및 대기질 정보를 조회할 수 있는 서비스 구현.

• 상태 관리: Zustand를 사용하여 전역 상태 관리를 구현하여 데이터의 일관성과 효율적인 업데이트 보장.

• 인증/인가 기능: Kakao OAuth를 통해 사용자가 로그인할 수 있도록 하였으며, 로그인 시 JWT 토큰을 발급하고 이를 통해 사용자별 다람쥐 정보 호출.

• 게이미피케이션: 사용자는 다양한 종류의 다람쥐 (예: 사무라이 다람쥐, 기사 다람쥐 등)를 육성할 수 있으며, 일일 미션을 완료하여 도토리를 획득하고 다람쥐를 성장시키는 시스템 구현.

카카오테크 부트캠프 클라우드 네이티브 제주에서의 개인 프로젝트로, Express와 MySQL을 사용한 게시판 사이트를 구현하여 백엔드와 데이터베이스의 연동을 경험하고 이해도를 높이기 위한 목적으로 진행되었습니다.

기간: 24.04 ~ 24.07

담당: 프론트엔드 개발

스택: Javascript, React, Express, MySQL

인원: 개인 프로젝트

주요 기능

• React를 사용하여 게시판의 프론트엔드를 구현하고 사용자 인터페이스를 직관적으로 설계

• Express를 활용해 서버를 구축하고, RESTful API를 통해 데이터 요청 및 관리를 처리

• MySQL을 사용하여 데이터베이스를 설계하고, 게시글의 CRUD 기능 구현

React와 Styled-components를 활용하여 포켓몬 도감을 구현한 개인 프로젝트로, 포켓몬 정보 조회 및 필터링 기능을 제공합니다. Firebase를 사용해 OAuth 로그인 및 사이트 배포를 완료하였습니다.

기간: 23.11.13 ~ 23.12.04

담당: 프론트엔드 개발

스택: Javascript, React, Styled-Components

인원: 개인 프로젝트

주요 기능

• React를 사용하여 포켓몬 도감 UI와 데이터를 동적으로 렌더링 및 Styled-components로 스타일링

• Firebase Authentication을 통해 Google OAuth 로그인을 구현하여 간편한 사용자 인증 제공

• Firebase Hosting을 활용하여 프로젝트를 배포

스타벅스의 공식 웹사이트를 클론하여 프론트엔드와 백엔드를 경험해보기 위한 프로젝트로, 기본적인 웹 디자인부터 게시판 및 회원 관리 기능을 구현하였습니다.

기간: 23.01.01 ~ 23.06.13

담당: 프론트엔드 개발

스택: Javascript, HTML, CSS, PHP

인원: 개인 프로젝트

주요 기능

• HTML, CSS, JavaScript를 사용하여 스타벅스 홈페이지의 UI,UX 클론

• PHP를 활용해 게시판 기능을 구현하여 사용자가 게시글 작성, 수정, 삭제

• 회원가입과 로그인 기능을 통해 사용자 관리 및 세션 관리 추가

카카오테크 부트캠프 해커톤에서 개발된 프로젝트로, 제주도를 여행하는 관광객들이 맞춤형 장소 추천을 받을 수 있도록 AI 기반 대화형 시스템을 구현하였습니다. 사용자의 입력을 바탕으로 관심사, 나이, 여행 날짜 등을 고려하여 개인화된 추천 서비스를 제공하는 것을 목표로 하였습니다.

기간: 2024.08.05 ~ 2024.08.07

담당: 프론트엔드 개발

스택: TypeScript, React, Zustand

인원: 총 5명 (클라우드 1명, BE 2명, FE 2명)

주요 기능

• 사용자의 기초 정보를 입력받아 (인원 수, 나이, 관심사, 여행 날짜 등) AI 질문 생성.

• 대화형 인터페이스를 통해 사용자가 AI와 상호작용하며 추가 질문을 통해 정보 구체화.

• 비짓제주 관광 공공 데이터를 활용하여 최종적으로 사용자에게 적합한 관광 정보 추천.

• 프롬프트 엔지니어링을 통해 AI가 정확한 정보를 제공하도록 설계.

클라우드 과정 in JEJU는 실무형 클라우드 개발자 양성을 목표로, 한국전파진흥협회, 카카오, 그리고 구름이 협력하여 운영하는 교육 프로그램입니다.

4개월간의 실시간 온라인 강의는 자기주도 학습을 통해 프론트엔드 기술을 깊이 있게 탐구할 수 있는 기회를 제공했습니다.

이후 2개월간 제주도에서의 온전한 몰입 과정을 통해, 이론을 바탕으로 한 실제 프로젝트 경험을 쌓을 수 있었습니다.

프론트엔드와 백엔드의 긴밀한 협업을 통해 전체적인 서비스 개발 프로세스를 경험하며, 클라우드 기반 환경에서 프론트엔드의 역할과 중요성을 체감했습니다.

새로운 교육 방식 덕분에 문제 해결 능력과 팀 내 소통의 중요성을 배우고, 이를 바탕으로 실무에 바로 적용할 수 있는 자신감을 얻었습니다.