미리보기

스포츠 교육기관 운영자를 위한 통합 학생 관리, 출결 시스템 및 셔틀 운영 솔루션

• 1명 TL, 1명 PM, 2명 백엔드, 2명 프론트엔드 개발자로 진행한 외주 계약 프로젝트

• 초기 서비스 기획에서부터 아키텍팅, ERD, 비지니스 로직과 런칭까지 전 과정 참여

• 300명 이상의 회원을 관리하며, 실사용자들을 통해 QA 진행

클라이언트의 요구사항에 맞는 복잡한 비지니스 로직을 가진 웹 애플리케이션 개발

• 요구사항의 잦은 변경에 대응하고 디자인 일관성을 위해 재사용성이 높은 컴포넌트를 Atomic 디자인 패턴에 따라 원자 단위로 나눠 분자와 유기체의 조합으로 템플릿과 페이지를 구성해 유지보수 비용을 최소화

• 다양한 커스텀 기능을 충족하기 위해 기존 react-calendar 대신 캘린더를 직접 설계·구현, 시중에 있는 다양한 예제 코드를 분석하고 DaisyUI 커뮤니티에 질문하며 요구사항을 완벽히 반영하는 컴포넌트 개발

프론트엔드 개발

• API 데이터 패칭 최적화: 10개의 DB 테이블 (총 200개의 속성)에서 46개의 API 데이터를 가져오기 위해 
초기에는 HOC(Higher-Order Component)패턴을 사용

  • Props Drilling 문제와 디버깅 복잡도로 인해 유지보수가 어려워 Custom Hook으로 리팩토링

  • Custom Hook 적용 후 코드 가독성 및 재사용성 증가, 상태 관리가 간결해지고 API 호출의 일관성 확보

• PWA 구현: vite-plugin-pwa의 Manifest로 메타데이터를 정의하여 네이티브 앱처럼 사용할 수 있도록 
구현 및

• Service Worker의 오프라인 캐싱 설정을 통해 로딩 속도 개선과 네트워크 의존성 최소화

• UI 최적화 · 개발 속도 개선: TailwindCSS + DaisyUI 조합으로 기존 UI 라이브러리 대비 90% 코드량 감소

웹 애플리케이션 배포 및 최적화

• GitHub Actions와 pnpm를 활용한 CI/CD 자동화 및 의존성 캐싱으로 배포 시간을 5분에서 3분으로 감소

• 도메인 및 배포 환경 구성: 가비아에서 도메인 구매 후 Route 53과 연동하여 DNS 설정

• 정적 데이터 저장소로 S3 활용, CloudFront를 활용해 웹사이트 배포 및 HTTPS 적용

• AWS Certificate Manager로 SSL을 등록하여 HTTPS 리다이렉트 및 보안 강화

캐나다의 소외된 예술가들을 위한 비영리 온라인 전시 플랫폼 스타트업

• 사이드 프로젝트로 시작해 지속 가능한 운영 모델 확립 후 캐나다의 정식적인 비영리 스타트업으로 전환

• 사업 기획부터 많은 시행착오를 거쳐 문제점을 보완하고 개선안을 도출

• 시장 분석과 사용자 피드백을 반영하여 서비스 개선을 지속하며, 안정적인 성장 전략 수립

프론트엔드 개발

• SEO 최적화 : 서버 사이드 렌더링(SSR)과 정적 사이트 생성(SSG)을 통해 검색 엔진 크롤러에 유리하도록 페이지 설계 및 각 페이지에 동적 메타 태그를 추가하여 구글 검색 시 최상단에 위치 시키는데 성공

• 화면 최적화 : 모든 웹 페이지의 컴포넌트를 반응형으로 구현하여 화면 크기에 맞춰 레이아웃과 콘텐츠가 
자동으로 조정되도록 하여 모바일, 태블릿, 데스크톱 등 다양한 디바이스에서 최적화된 사용자 경험을 제공

• 전시 정보 표시 : NestJS로 만들어진 API로 각 화면에 전시 내용 표시

• 정보 수정 기능 구현 : React Hook Form과 Zod를 활용한 실시간 유효성 검사로 UX 향상

• TailwindCSS와 DaisyUI로 디자인 요구사항 구현, Figma를 통한 협업으로 디자인 품질 및 일관성 보장

백엔드 개발

• 다양한 기능을 점진적으로 확장해 나가기 위해 Nest JS로 백엔드 시스템 구축 및 CRUD 개발

• 많은 형태의 전시 데이터 효율성을 위해 PostgreSQL를 사용하여 데이터베이스 구축

• Docker, DBeaver, Postman 등의 도구를 활용해 개발 및 테스트 프로세스 최적화

체계적인 웹 애플리케이션 개발

• Agile 방법론을 바탕으로 2주 스프린트 주기로 Jira를 통해 진행 상황 문서화

• 매주 코드 리뷰 및 미팅을 통해 지속적으로 코드 품질 개선과 방향성 확립

• 팀 공통 Wiki를 구축해 학습 내용과 오류 해결 방안을 문서화하여 팀원 간 지식 공유 활성화

• 전략 수립 : 직접 시장을 분석하여 차별화된 BM 및 파트너십 구축

12세부터 대학생을 대상으로 Python 기반의 다양한 AI 알고리즘 및 Tensorflow 교육 진행

• 1:1 과외 형태로 모든 학생들을 대상으로 모두 영어로 교육 진행

• 실습 중심의 학습과 이수 프로젝트 등 수업에 필요한 모든 커리큘럼을 직접 설계

AI 및 ML 과정

• Python을 활용한 머신 러닝 및 딥 러닝의 기초 개념 교육

• Scikit-learn과 Tensorflow같은 외부 라이브러리를 사용하여 간단한 모델 설계 및 응용 지도

• A* 나 Dijkstra 같은 최적화 및 경로 탐색 알고리즘을 교육 및 AI의 다양한 활용 사례를 이해

웹 프로그래밍 기초 과정 / Python 중급 과정 / SQL 과정 강사

• HTML, JS, CSS 기반으로 기본적인 웹 페이지 제작 및 동적인 기능 구현

• 객체 지향 프로그래밍, 파일 입출력, 예외 처리 및 외부 라이브러리 활용 능력을 통한 실제 프로젝트 적용

• SQL vs NoSQL 이론 학습 후 Docker와 DBeaver를 활용한 데이터베이스 환경 구축 및 관리

게임을 통한 컴퓨터공학 학습 경험 증진에 대한 연구로 중국 텐진(TianJian, 天津) 대학교와 공동 게임 개발

• Python 교육 커리큘럼 설계: AI 개념 학습을 위한 퍼즐·챌린지·퀘스트 기반 게임 시스템 개발

• Godot Engine을 통한 애니메이션, 배경음악, 화면 전환 효과를 직접 구현하여 데스트톱 게임 개발

• 팀원들 간 지속적인 스터디그룹을 활성화, Python과 비슷한 구조의 GDScript를 한달만에 빠르게 학습을 진행하여 게임 공유 플랫폼인 itch.io에 배포하여 QA 및 유지보수 진행

• 로그인 후 재인증을 위해 JWT 생성 및 MongoDB 내 저장

밴쿠버 기반 비영리 라디오 방송국의 디지털 인프라 개선 진행

웹 개발 : Figma를 활용해 기금 마련 웹사이트의 Wireframe을 설계하고, Drupal과 CSS를 사용해 구현

• 웹사이트 리뉴얼로 전년 대비 55% 증가한 기금을 유치하는데 기여

• Drupal 8에서 Drupal 9으로 마이그래이션 진행을 위한 문서화 및 Docker 셋업
  

앱 개발 : React Native기반의 iOS / Android 앱을 출시하여 청취자 유입 40% 증가

• 웹의 내용을 이식하는 과정에서 Agile 방법론 보단 Waterfall 방법론을 택해 6단계로 개발 목표를 
지정, 각 단계를 순차적으로 진행하며 상부에 보고, 이를 통해 프로젝트 진행을 체계적으로 관리

서드 파티 서비스 없이 개인 포트폴리오 및 기술 블로그를 직접 설계, 개발, 배포하며 Next.js의 다양한 기능을 활용

핵심 구현 기능

이미지 최적화:

• 최신 이미지 포맷인 .avif로 변환해 75% 이상의 용량을 줄이면서 고화질을 유지했으며, 이를 통해 페이지 로딩 속도를 효과적으로 개선함

• 레이지 로딩을 구현하여 초기 로딩 시 우선순위가 낮은 리소스를 지연 처리, 사용자에게 더 빠른 페이지 사용 경험 제공

애니메이션 구현 & 다국어 지원:

• CSS와 JavaScript를 활용하여 다양한 사용자 정의 애니메이션 효과를 설계하고 적용, 역동적이며 생동감 넘치는 인터페이스를 제공

• 토글 기능을 통해 한국어와 영어 콘텐츠를 자유롭게 전환하여 표시 가능

배포 및 최적화:

• pnpm을 사용하여 의존성 관리와 저장 공간 최적화를 동시에 달성, 배포 효율성 극대화

• Vercel을 통한 자동화된 CI/CD 파이프라인 설정으로 빠르고 안정적인 배포 환경 구성

• Lighthouse 점수 96, 93, 100, 100 (Performance, Accessibility, Best Practices, SEO)을 달성하며 높은 품질의 웹사이트 구현

UI/UX 개선:

• DaisyUI의 컴포넌트를 활용하여 UI 일관성을 확보하고 개발 속도 향상하며 유연한 커스터마이징을 통해 일관된 디자인을 손쉽게 적용

• TailwindCSS와 DaisyUI를 통합해 사용하여 세밀한 구현과 정교한 스타일링을 가능하게 하여, 최적화된 반응형 UI를 구현

트러블 슈팅

다수의 큰 이미지로 인한 Largest Contentful Paint (LCP) 지연

문제:

• 페이지 로딩 시 너무 큰 이미지로 인해 LCP가 지연되어 사용자 경험에 악영향을 미침

해결:

• Next.js 의 priority 태그 사용: next/image의 priority 속성을 사용하여 중요한 이미지의 우선 로딩을 지정, 페이지 로딩 속도 개선

• 이미지 파일 포맷 최적화: WebP또는 AVIF 포맷을 기본 이미지 포맷으로 사용하여 이미지 품질을 유지하면서 파일 크기를 줄여 이미지 로딩 속도가 빨라지고 LCP 개선에 기여

• Lazy Loading: 페이지의 주요 콘텐츠가 로딩된 후, 나머지 이미지들을 Lazy Loading 방식으로 불러와 페이지 로딩 속도를 향상, 이미지가 뷰포트에 들어오면 로딩되도록 설정하여 불필요한 리소스 로딩 지연

동적 콘텐츠 로딩 시의 사용자 경험 저하

문제:

• 동적으로 데이터를 로드하는 동안 페이지 로딩이 지연되고, 사용자 경험이 저하됨

해결:

• 로딩 인디케이터 추가: 데이터를 로딩하는 동안 로딩 스피너와 상태 표시기를 추가하여 사용자가 기다리는 시간을 명확하게 인지할 수 있도록 개선

• Skeleton Screen 사용: 데이터를 로드할 때, 실제 콘텐츠가 로드될 때까지 UI의 구조적 틀을 표시하여 사용자가 콘텐츠가 로딩 중임을 시각적으로 인식할 수 있게 함

해커톤 대회 중 기상청 API 기반으로 현재 위치의 실시간 날씨를 가져와 온도에 맞는 옷을 네이버 쇼핑 API를 통해 추천하며 장바구니에 넣어 결제 후 DB에 적재하는 풀 스택 웹 어플리케이션 개발하여 3위 수상

핵심 구현 기능

이미지 최적화 및 데이터 표시:

• Next.js의 이미지 최적화 기술(next/image)을 사용해 네이버 쇼핑 API에서 가져온 사진 정보를 최적화하여 75% 이상의 용량 감소를 달성

• API에서 반환된 다수의 상품 이미지를 레이지 로딩(Lazy Loading)으로 빠르게 렌더링되도록 개선

날씨 기반 실시간 UI/UX 구현:

• 기상청 API의 데이터를 기반으로 현재 날씨 상태(비, 눈, 맑음 등)에 따라 CSS 애니메이션을 실시간으로 구현

• 온도 및 날씨 변화에 따른 옷 추천을 즉각 반영하여 사용자 경험을 최적화

API 통합 및 백엔드 작업:

• Postman을 활용해 기상청 및 네이버 쇼핑 API의 데이터 스키마를 분석하고, 안정적인 API 호출을 위한 테스트 환경 구축

• 백엔드 API를 통해 결제 내역과 사용자 데이터를 MySQL 데이터베이스에 저장하며, 트랜잭션을 사용해 데이터 일관성을 보장

UI 컴포넌트 및 스타일링:

• Tailwind CSS를 사용해 반응형 및 일관성 있는 디자인을 구현하며 DaisyUI를 통해 미리 스타일링된 UI 구성 요소를 통해 빠르고 손쉽게 직관적인 인터페이스를 구축

• 컴포넌트 기반으로 설계된 UI를 활용해 사용자 친화적인 인터페이스 개발

인터파크 티켓팅 웹사이트의 클론 코딩을 진행하며 독자적으로 인터파크에서 아쉬웠던 부분을 보안한 서비스 제공

SK 플래닛 T Academy에서 풀스택 개발자 3명과 진행한 팀 프로젝트

핵심 구현 기능

UI 및 화면 개발:

• Figma로 디자인된 UI를 기반으로 React를 사용해 대부분의 화면과 UI를 구현

• DaisyUI를 사용하여 예외 상황에 대한 유연한 처리 로직을 구현하며 다른 UI 라이브러리보다 가벼운 성능을 통해 효율성을 극대화하고, TailwindCSS와의 원활한 통합으로 더욱 빠르고 직관적인 UI 개발

• Vite를 사용하여 개발 환경을 최적화하고, 빠른 빌드 및 개발 경험을 제공

• React Router DOM을 사용해 클라이언트 측 라우팅을 구현하여 SPA 내에서 원활한 내비게이션을 지원

PDF 생성 및 다운로드 기능 구현:

• jspdf와 qrcode.react를 활용하여 QR 코드를 생성하고, 이를 포함한 PDF 데이터를 생성한 뒤 Blob 객체로 변환하여 브라우저를 통해 사용자가 파일을 다운로드할 수 있는 기능을 개발

• 재사용성을 고려해 헬퍼 함수(Helper Function)를 제작하였으며, 이를 문서화하여 팀원들이 간편히 활용할 수 있도록 지원

좌석 선택 및 실시간 데이터 동기화:

• 좌석 선택 화면을 설계 및 개발하고, 선택된 좌석 정보를 실시간으로 백엔드에 전송하여 데이터 동기화를 구현

• useEffect와 API 호출을 통해 실시간 예매 정보를 제공

회원가입 및 로그인 페이지 개발:

• React Hook Form을 이용해 사용자 친화적인 회원가입 및 로그인 기능 개발

• Spring을 활용하여 CRUD API를 구축하고, Spring Security와 BCrypt를 통해 비밀번호 보안 강화

데이터베이스 설계 및 구축:

• 요구사항 분석을 기반으로 데이터베이스 엔티티를 설계 및 구축

• Spring 백엔드와 통합하여 안정적인 데이터 처리를 보장

• 부회장으로서 100-200명의 회원을 대상으로 한 월간 학술 및 사회적 행사를 기획하고 조직하여, 커뮤니티 내에서 활발한 참여와 네트워킹 기회를 창출

• 임원들과 협력하여 이벤트의 창의적 기획 및 실행을 주도, 연구 및 학문적 능력 향상에 기여

• 회원들의 전문성 향상과 학문적, 사회적 경험을 제공하여, 클럽의 전반적인 성장과 발전에 중요한 역할을 수행