미리보기

노션을 기반으로 웹사이트 제작부터 폼 빌딩, 데이터 관리까지 해주는 올인원 웹 서비스
PM 1, Designer 1, FE 1(담당), BE 1

Skills

• Next.js (App Router), React.js, TypeScript
• Zustand, Axios
• React-hook-form, Zod, TailwindCSS, Amplitude
• Vercel, Slack, Notion

Link

• Github : https://github.com/uujeen/formflet-fe
• Notion : https://bit.ly/42r0wvH

Features

• 텍스트 기반 폼 생성
  • 사용자가 동적으로 폼 생성을 위해 텍스트 형식으로 양식에 맞춰 작성하도록 진행
  • 문단을 block 형태로 선택하여 폼을 작성하려고 했으나 시간적, 기술적 이슈로 인해 텍스트 작성 방식을 사용

Issues

• 사용자 모집
  • MVP 개발 이후 사용성과 타겟 설정이 유효한 지 실질적인 사용자의 비율로 정량실험을 진행하고자 Amplitude를 적용
  • 3주간 730명 방문과 55명의 사용자 회원가입 확인
  • 유저 테스트에 참여하고 피드백을 바탕으로 스프린트, 스크럼 단위로 프로젝트 방향을 주기적으로 논의 및 설정
• Auth 관리
  • 초기에 모든 토큰을 쿠키에 저장해서 사용 → 보안 상 부적합하다고 판단
  • Access, Refresh Token을 구분지어 쿠키와 로컬 스토리지에 개별 저장하여 보안을 향상, Silent Refresh 적용으로 UX 개선
  • Access Token을 재발급하는 과정에서 race condition 방지를 위해 뮤택스, 큐를 적용하여 순차적 요청을 진행하도록 개선
• Next.js 페이지 이동 감지 함수
  • 페이지 이동 시 작성중이던 폼이 휘발되는 문제를 해결하기 위해 모달창을 띄워 사용자에게 경고를 주려고 하는데, events 함수가 Next.js 13부터 사라져서 마이그레이션 하거나, 코드로 구현해야하는 상황
  • Provider를 작성하고, 필요한 페이지 내에서 이벤트 감지 함수를 호출하여 모달창을 띄우게끔 진행

인터렉티브하게 즐길 수 있는 3D 메타버스 웹 SNS 플랫폼
FE 2(팀장 및 FE 담당), BE 2. 5주 프로젝트

Skills

• React.js, Three.js(R3F, drei, rapier)
• Recoil, Axios, styled-components

Link

• Github : https://github.com/Poly-World/polyworld-frontend
• Notion : https://bit.ly/3EcEsK7
• Youtube : https://bit.ly/45mv7LK

Features

• 월드
  • 물리엔진을 적용하여 UX 개선
• 방
  • 1인칭으로 카메라가 전환되며 몰입감 있는 UX 개선
• 유저 & NPC
  • Blender를 사용해서 캐릭터 리깅, 애니메이션 제작
  • 스칼라 값에 따라 상태 애니메이션 호출하여 움직임을 자연스럽게 함
• 인터렉션
  • 유저 접근 시 상호작용 가능 오브젝트를 표시해주는 화살표를 추가하여 UX 개선

Issues

• 3D 오브젝트 랜더링 이슈
  • 3D모델이 랜더링 될 때 로드가 완료가 안된 상태에서 파싱하여 에러 발생
  • 오브젝트가 로드될 때 콜백함수를 호출하여 파싱이 된 오브젝트가 동기적으로 렌더링되도록 수정
  • 따라서 부가적으로 CPU 부하 기존 50% → 25% 로 50% 감소
• 1인칭 카메라 핸들러 이슈
  • 방에서 1인칭으로 동작할 때 이벤트 핸들러 에러 발생
  • 마우스 클릭의 state값을 setTimeOut 함수를 사용하여 빠른 속도로 변경이 일어나지 않도록 수정

3D 메타버스 맵에서 스탬프 투어로 얻은 재화로 가상화폐를 획득하는(P2E) 플랫폼. 2인 진행

Skills

• Unreal Engine5, C++, Bridge
• MariaDB, MySQL, Solidity
• MetaMask, Remix

Link

• Github : https://github.com/uujeen/Columbus

Features

• 월드
  • 울릉도의 Height Map을 가져와 지형 구현
• 캐릭터
  • UX개선 위해 Bridge를 사용해서 실제 사람과 유사하게 생긴 MetaHuman 사용, 리깅을 통해 동작 애니메이션 추가
• 콘텐츠
  • 맵 곳곳에 생긴 스탬프를 획득해 일정 개수가 모이면 가상화폐와 교환이 가능하게 하는 것을 목표로 진행
• 가상화폐 토큰 제작
  • Columbus Token을 Remix IDE를 사용하여 제작
  • MetaMask 이용해 Columbus Token과 게임내의 Stamp와 교환을 할 수 있는 것을 목표로 진행
  • MySQL과 BluePrint 및 C++를 사용해 DB 연동

• 팀스파르타 프로덕트 캠프 2기 (2023.11 ~ 2024.02)
• Zero to One, 12주 동안 팀 빌딩부터 프로덕트 개발 및 실제 상용 가능한 서비스 만들기 프로젝트

• 크래프톤 정글 2기 (2023.04 ~ 2023.08)
• 알고리즘, CS, OS C언어 구현을 통해 컴퓨터 공학적 기초를 탄탄하게 쌓음
• 합숙하며 몰입 & 팀 프로젝트 기반 자기주도적 학습 매주 팀 미션 수행 및 코드 리뷰

• 중국 길림대학교 어학연수 (2019.10 ~ 2020.07)