미리보기

• HEARIM 회사 홈페이지의 프론트엔드 개발 및 유지보수

• 웹 기반 유체역학 시뮬레이션 시스템의 3D 렌더링 구현 및 상호작용 기능 개발 및 유지보수

• 외부 클라이언트의 3D 모델 조작 시스템 개발 및 유지보수

프로젝트 개요

• 웹 브라우저에서 구동되는 유체역학 시뮬레이션 시스템 개발 프로젝트

  • 프로젝트를 진행하며, "반모서리(HalfEdge) 기반의 삼각망 자료 구조 개발" 등의 논문을 통해 도메인 지식을 쌓았습니다. 이를 웹 환경에 최적화된 형태로 구현하여 대규모 3D 모델 탐색 최적화 및 렌더링 성능 향상을 달성했습니다. 또한, 사용자 친화적인 UI/UX를 설계하여 웹 기술과 과학적 시뮬레이션을 효과적으로 결합했습니다.

사용된 주요 기술

React, Redux (Redux Toolkit), Three.js, React-Three-Fiber, JavaScript (ES6+), HalfEdge 알고리즘

주요 기술적 도전

• 3D 렌더링 및 실시간 데이터 처리

  • React-Three-Fiber를 사용해 부드러운 3D 렌더링 구현 후 Redux Toolkit을 통해 실시간 입력값 처리

• 3D 모델 자료 구조 개선

  • HalfEdge 이론을 도입한 자체 개발 자료구조를 통해 3D 모델 자료 구조를 재설계하고 대규모 모델의 삼각형 순회 및 탐색 처리 시간을 10분에서 1~10초로 단축

• 직관적 UI/UX 구축

  • 아이콘 클릭을 통한 3D 모델 조작 및 데이터 입력으로 복잡한 웹 시뮬레이션의 진입 장벽 낮추고 사용자 친화적인 인터페이스 구현

기간: 2024. 06. ~ 2024. 08.

역할 및 기여 내용
React와 프론트엔드 개발에 대한 심화 학습을 진행

얻은 경험 및 역량

• React 핵심 개념 학습

• 클린 코드 작성법과 VAC 패턴을 활용한 함수형 프로그래밍, FSD(Feature-Sliced Design) 학습 및 적용

• AWS와 Github Action을 활용한 CI/CD 구축을 실습, 배포 자동화 경험

• vitest, testing-library/react, MSW 등을 사용한 테스팅, TDD(Test-Driven Development) 적용

• 프론트엔드 및 인프라 최적화 방법 학습, 성능 개선 기술 습득

기간: 2024. 05. ~ 2024. 06.

역할 및 기여 내용

• 프론트엔드 개발을 담당하여 기획자, 디자이너, 백엔드 개발자와 협업하여 서비스 출시 경험함

• 백엔드 개발자와 프론트엔드와 백엔드 간의 연동 파이프라인을 구축하기 위해 긴밀히 협력

• Swyg 웹 호스팅 서비스를 이용해 배포를 진행하며 프로젝트를 성공적으로 완성

얻은 경험 및 역량

• 최신 웹 기술인 Next.js와 Tailwind CSS를 새롭게 학습하고 적용해보는 경험

• 기획자 및 디자이너와의 협업을 통해 사용자 중심의 UI/UX를 구현하는 능력을 키움

• 백엔드와의 연동 작업을 통해 데이터 흐름을 이해하고 효율적으로 처리하는 역량을 강화

• 프로젝트를 직접 배포해보는 과정을 통해 전체 개발 및 운영 사이클에 대한 통찰력을 얻음