수행 프로젝트 상세

1. 유로운

• 개요 : 맞춤형 아트 의뢰 P2C 서비스

• 사용 기술 : NextJS, TypeScript, Tailwindcss, react-spring, Zustand, Zod, React-hook-form, Next-safe-action, Prisma, Turborepo, Supabase, Vercel

1-1. 초기 개발 세팅

• 글로벌 스타일, DB, CD, 스키마 작성

  • modular 기준과 더불어 route 별로 컴포넌트 폴더 구조 설계 - server action, service, schema를 modular로 결합

1-2. 공통 컴포넌트 설계

• 6종류의 의뢰 카드, 2종류의 작품 카드, 11종류의 의뢰 버튼 카드

  • 각 종류 별 재사용성 및 데이터 특성을 고려하여 개별 컴포넌트/headless 컴포넌트 구조 설계

• 8개의 필드를 가지고 있는 복잡한 의뢰의 경우 react-hook-form의 useController를 포함한 커스텀훅을 생성하여 데이터 관리

1-3. 반응형 및 SEO 설정

• NextJS의 Dynamic Image Generation를 활용하여 작품 별 동적인 썸네일 설정

• 3D 캐러셀 구현 중 react-spring 사용 시 모바일에서 나타나는 glitch 현상을 해결하기 위해 PC-mobile 간 컴포넌트를 분리하여 구현

2. 주말랭이 O2O 플랫폼 리뉴얼

• 서비스 구분 : 어드민, 커뮤니티, 아티클, 커머스

• 사용 기술 : NextJS, TypeScript, Tailwindcss, Zustand, Zod, React-hook-form, Next-safe-action, Prisma, Turborepo, Supabase, Vercel

2-1. 초기 개발 세팅

• 글로벌 스타일, DB, CD, 스키마 작성

  • domain 기준으로 폴더 구조 설계 - domain 폴더 내부 내 server action, model, ui로 구분 기준 설정

2-2. 로그인 & 회원가입 기능 구현

• auth.js를 이용한 credential, 카카오 로그인 구현

• NextJS의 parallel route를 이용하여 회원가입 시에만 설문조사 용 dialog로 이동

2-3. 컴포넌트 설계 및 개발

• 재사용 가능한 리스트용 카드에 대한 공통 컴포넌트 설계

2-4. 다양한 시나리오에 대비한 분기 처리

• 참여형 상품을 위한 커머스인 '경험상점'에서 프로그램 상태 별 필터링하기 위한 커스텀훅 작성

• 입력 항목 공유 시 react-hook-form과 zod의 타입을 활용하여 재사용 가능하면서 확장 가능한 form 설계

3. 크릭스

• 개요 : AI 기반 창작물 유사도 검증 및 무단 도용 탐지 플랫폼

• 사용 기술 : NextJS, TypeScript, Tailwindcss, Zustand, Zod, React-hook-form, Prisma, Turborepo, Supabase, Vercel

3-1. 로그인 & 회원가입 기능 구현

• auth.js를 이용한 구글, 카카오 소셜로그인 구현

  • 동일한 이메일일 경우 auth.js의 callback을 설정하여 각 소셜 로그인에 맞는 에러 페이지로 분기 처리

  • plugin 도입으로 지속적으로 발생하는 prisma client initialize 에러 해결

3-2. 저작물 등록, 수정 Form 기능 구현

• 한국저작권위원회 저작권등록정보서비스 오픈 API 연동으로 저작물 검색 구현

• react intersection observer를 사용하여 무한 스크롤 기능 구현

3-3. 불법 도메인 탐지 보호 스케줄러

• google search API 연동으로 키워드에 해당하는 검색 결과 수집 구현

• 이벤트 주도 워크플로 엔진인 inngest를 연동하여 batch 작업 수행 구현

• batch 작업 수행 후 결과를 이메일 발송 플랫폼인 resend를 이용하여 이메일 발송 구현

성과

1. 모노레포 번들 사이즈 최적화

• 아이콘 패키지 구조 변경을 통해 번들 사이즈 80% 축소 작업 관련 블로그

2. 개발자 경험 개선

• Next-safe-action 내부 기본 인스턴스 생성 및 에러 핸들링 로직 추가하여 명확한 에러 원인 파악 환경 설정 관련 블로그

• package script에 cache, build 파일을 삭제하는 script 추가하여 프로젝트 재시작 시간 절약

3. 모노레포 eslint 보수 및 개선

• 디자인 시스템과 앱에서 eslint가 적용되지 않는 문제를 config package 분리 및 설정 파일 조정으로 해결

• github action에 lint, prettier 검사를 추가하여 일정 이상의 에러가 발생할 경우 탐지하도록 CI 설정

• lint, prettier 설정과 충돌하는 vscode extension 액션을 조정

4. package 유지보수

• 자주 쓰이는 외부 provider 추가(inngest, solapi, resend)

• 내부 라이브러리 및 패키지에 대해 dependency가 맞지 않는 경우 버전 업그레이드

  • plugin과 dependency가 맞지 않는 경우 패키지의 버전 범위 조정으로 해결

수행 업무 상세

1. 커뮤니티 채널 관리

• 담당 채널: 일반 채널, 질문 채널

• 일반 채널: 학생이 자유롭게 글을 작성하는 공간, 커뮤니티 활동 촉진 목표.

• 질문 채널: 학생은 강의에 대한 질문을 개시, 선생님은 이를 효과적으로 관리하여 답변 제공하는 공간.

2. 모바일 웹 개발 및 UX 개선

• 모바일 환경(웹뷰)에서 발생하는 터치 이벤트 및 스크롤 이슈 관리

• 게시물 작성 및 해시태그 기능에 대해 사용자 상호작용 고려하여 구현

3. 컴포넌트 설계 및 개발

• Atomic Design Pattern 적용하여 일관된 컴포넌트 설계 및 개발

• 재사용성과 사용자 정의 가능성을 고려하여 컴포넌트 분리 결정

• 디자인 시스템 명칭 및 property 타입을 고려하여 40%의 atom 및 molecule 구현

4. 파싱, 포맷팅 유틸 함수 작성

• 게시글 데이터에서 해시태그를 포함한 경우 파싱하여 a태그로 별도 구현

• 게시글 데이터에서 웹링크를 포함한 경우 파싱하여 OG tag 미리보기 컴포넌트로 별도 구현

• Timestamp 형태의 데이터를 현재 시점과 비교하여 작성된 지 얼마나 됐는지 포맷팅

성과

1. 모바일 뷰에서 다양한 기능을 가진 컴포넌트의 상호작용 개선

• 다양한 기능과 인터렉션을 가진 Input UI에 대해 디자이너, 앱 개발자와 함께 논의

• 여러가지 시나리오에 대해 사용자 경험을 최선으로 이끌 수 있는 경우를 제안 및 적용

  • 이모티콘, 미디어, 텍스트에 대한 입력 조건에 대해 테스트 케이스 수집 후 제안

    모바일 뷰에서 미디어 추가 방식에 대한 사용자 경험 개선

2. 사용자 친화적으로 UI 개선

• 해시태그, 웹링크 미리보기와 같은 특수 정보를 파싱 함수 작성하여 컴포넌트 분리

  사용자에게 쉽고 직관적인 정보 전달을 할 수 있는 UI 개발 기여

3. 커뮤니케이션 강화 및 논의 주도

• Notion 페이지를 활용한 주기적인 프론트엔드 논의 사항 업데이트 및 주요 정보 정리

• 온보딩, 정형화된 에셋 추가 및 관리 프로세스 등의 문서 작성

  신규 팀원의 신속한 적응 도움 및 팀 내 코드 퀄리티 유지, 협업 촉진

프로젝트 요약

• 서비스: 의류 수거함 위치 조회 및 헌옷 나눔 웹 서비스
• 담당: 리드, 풀스택
• 백엔드 레포지토리, 프론트엔드 레포지토리
• 사용 기술: JavaScript, ReactJS, MUI, Emotion, NodeJS, ExpressJS, MySQL, Sequelize, Azure App Service

수행 업무

• 서울시 11개구 공공데이터를 수집하여 총 5,100여개의 의류수거함 위치 데이터 전처리. 관련 기술 블로그 포스팅
• 카카오 맵 API를 활용한 위치 검색 기능 구현
• Azure App Service를 통한 프론트엔드, 백엔드 앱 배포
• 팀장으로서 프로젝트 리드 - 회의 진행, Gantt Chart 작성
• 기획 및 와이어프레임 작성 및 페이지 디자인
• Trouble Shooting - Webpack 환경 설정으로 Warning console 해결

프로젝트 요약

• 서비스: 추석 안부 공유 및 소원 작성 웹 서비스
• 담당: 리드, 프론트엔드, 디자인
• 프론트엔드 레포지토리
• 사용 기술: TypeScript, ReactJS, Tanstack Query, Styled-components, React-Spring, Bun, AWS Amplify

수행 업무

• 소원 플로우에서 Funnel 구조 및 React-Spring 활용하여 페이지 트랜지션 구현
• 소원 상세 보기 및 공유 페이지에서 이미지 저장 기능 구현
• AWS Amplify를 통한 프론트엔드 앱 배포 및 CI/CD, 엑세스 로그 관리
• 팀장으로서 프로젝트 리드 - 회의 진행, 일정 산정
• 기획 및 와이어프레임 작성 및 캐릭터 디자인
• 프로젝트 회고 - 기획, 설계, 디자인, 프론트엔드, 배포까지의 기록
  → 일일 최고 방문자 수 11,668명 (9월 28일 추석 연휴 시작일), 소원 작성 수 140개

프로젝트 요약

• 서비스: 인공지능 모델을 활용한 청각장애인 아동의 영어 수화 학습 웹 서비스
• 담당: 리드, 인공지능, 프론트엔드
• 프로젝트 레포지토리
• 사용 기술: TypeScript, ReactJS, Styled-components, Python, LSTM, Flask, Tensorflow

수행 업무

• [FE] 기능 핵심 버튼 별 청각장애인 수어 영상을 담은 tooltip 기능 구현
• [FE] 사용자 편의를 고려, debounce 적용하여 단어 검색페이지 자동완성 기능 구현
• [AI] 인공지능 LSTM 모델 프로토타입 테스트, 학습 및 평가
  • 알파벳, 단어 별 총 200개씩 영상 데이터를 직접 수집하여 학습
• [AI] 하이퍼파라미터 조정을 통해 오차율(loss)을 1.89에서 0.016으로 감소시켜 90% 가량 개선
• [AI] 서비스 성능 개선 위한 flask 코드 작성
• 프론트와 socket 통신 중 관절 인덱스 수에 대한 응답 반환까지 시간 1s에서 4000ms로 감소시켜 60% 개선
• 팀장으로서 프로젝트 리드 - 회의 진행, 기획 주도
• 기획 및 와이어프레임 작성 및 캐릭터 디자인
• 프로젝트 회고 - KPT 회고 방식을 활용하여 작성

Githru-vscode-extension

• git의 메타데이터를 이용해 git graph를 시각화하는 확장 프로그램

수행 업무

• 초기 컨벤션 정의 및 컨트리뷰션 규칙 논의
• git log 데이터 필드 별 parse 모듈 담당

관련 자료

• 프로젝트 레포지토리
• 전체 활동 이력
• git log와 관련한 기술블로그

교육 내용 요약:

• 웹개발 기초: HTML, CSS, JavaScript, Express, React
• 전산학 기초: Python, Numpy, Pandas
• 인공지능: Tensorflow

관련 프로젝트

• 인공지능 모델을 활용한 청각장애인 아동의 영어 수화 학습 웹 서비스 🤟 손생님 프로젝트 수행

수상

• 인공지능 웹 프로젝트 부문 최우수상, 인기상 수상
• 개근상, 리더쉽상 수상