미리보기

웹 애플리케이션 One Pass를 통해 유소년 스포츠 교육 관리 플랫폼 구축

담당 업무

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

• 지속적인 QA와 엣지 케이스를 고려하여 안정성과 신뢰성을 높인 플랫폼을 제공하여 현재 약 300명의 회원을 안정적인 서비스를 지원

• 요구사항의 잦은 변경에 대응하기 위해 재사용성이 높은 컴포넌트를 설계하고 구현하여 개발 효율성을 극대화하며 유지보수 비용을 최소화했으며, Atomic Design 원칙을 적용하여 컴포넌트 구조를 체계적으로 구성하고, 확정성을 고려한 코드베이스를 구축

• 프로젝트에서 요구된 복잡한 비즈니스 로직과 다양한 커스텀 기능을 충족하기 위해 기존 React 라이브러리 대신 캘린더 컴포넌트를 직접 설계 및 구현함. 이를 통해 클라이언트의 세부적인 요구 사항을 완벽히 반영하며, 확장성과 성능을 고려한 최적화된 솔루션을 제공

프런트엔드 개발

• React와 Vite를 활용해 프런트엔드를 구현하고, pnpm을 사용해 의존성 관리를 최적화하여 설치 속도를 대푹 단축하고, 하드 링크를 통해 디스크 공간 사용을 최소화하여 효율성을 향상

• TailwindCSS를 통해 클라이언트의 디자인 요구사항을 충족하며 사용자 친화적인 인터페이스를 제공할 수 있었으며, 다른 UI 라이브러리보다 가벼운 DaisyUI를 통해 빠르고 직관적인 컴포넌트 구현

• 회원과 학생 등록 과정에서 강력한 데이터 검증과 유효성 검사를 적용하여 사용자 데이터를 안전하게 처리함

백앤드 통합 및 배포

• GitHub Actions를 사용하여 CI/CD 자동화를 구현, 코드 병합 시 자동으로 빌드 및 테스트를 실행하고 배포를 간소화하여 개발 및 배포 효율성을 극대화

• AWS S3를 사용해 이미지 업로드 및 관리를 처리하고, AWS EC2를 통해 서버를 안정적으로 배포하여 높은 가용성을 유지하며 가비아에서 구매한 도메인의 네임서버 설정을 통해 Route53으로 S3 버켓을 연결하여 효율적인 서비스를 제공

• Swagger, DBeaver, Postman을 사용해 백엔드와의 통신을 테스트하고 API 문서화를 통해 개발 프로세스를 효율적으로 관리

핵심 구현 기능

회원 관리 로직 구현

• 회원의 출석, 결석, 보강, 이월, 회비 납부 등 다양한 상태 관리 및 기록을 처리하는 기능을 구현

• React Hook Form과 zod를 활용해 데이터 입력 시 실시간 유효성 검사를 적용, 사용자 경험을 향상시킴

Progressive Web App (PWA) 구현

• vite-plugin-pwa를 활용해 PWA 구현, Service Worker과 웹 애플리케이션 Manifest 설정

• PWA의 장점인 네이티브 앱과 유사한 사용자 경험과 광범위한 플랫폼 호환성을 활용하여, 다양한 기기에서의 사용자 편의성 강화

Json Web Token (JWT) 구현

• Access Token과 Refresh Token 구조로 인증 프로세스를 효율적으로 관리하고,사용자의 로그인 상태를 유지하는 기능 구현 및 ContextAPI를 통해 토큰 정보를 중앙에서 관리하여 유지보수 비용 감소

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

| 탁월한 사업 아이템을 바탕으로 사이드 프로젝트에서 출발, 실 서비스로 확장하여 비영리 스타트업으로 성장

담당 업무

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

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

• 매주 코드 리뷰를 통해 지속적으로 코드 품질 개선

• 팀 공통 Wiki를 구축하여 개발 중 학습한 내용과 발생한 오류의 해결방안을 문서화하여 팀원 간 지식 공유를 활성화하고, 유사한 문제의 재발을 방지하며 개발의 효율성을 향상시킴

프런트엔드

• SEO 최적화를 위해 Next.js 를 사용해 프런트 엔드 구현

• TailwindCSS와 DaisyUI를 통해 디자인팀의 요구사항을 충족하며 Figma를 활용한 협업을 통해 세부 사항을 조율하며 높은 디자인 품질과 일관성 보장

백엔드

• 다양한 기능을 점진적으로 확장해 나가기 위해 Nest.js로 백엔드 시스템 구축

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

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

핵심 구현 기능

SEO 최적화

• 각 페이지에 Metadata를 추가하여 검색 엔진에 효과적으로 페이지 정보 전달

• 구글 검색 시 최상단에 위치 시키는데 성공

화면 최적화

• 모든 웹 페이지의 컴포넌트를 반응형으로 변경하여 다양한 플렛폼에서 접근성 향상

개인정보 수정 기능 구현

• zodResolver를 활용하여 React Hook Form과 zod를 통합, 폼 검증과 외부 값의 유효성을 런타임에 검증

• NestJS를 사용하여 정보 수정을 위한 CRUD API 개발 후 Postman을 통해 테스트 진행

관련 뉴스 동적 표시

• Next.js와 rss-parser를 활용해 관련된 주제의 Medium 기사를 동적으로 가져와 표시

전략 수립

• 차별화된 비지니스 모델 및 전략 수립에 기여

• 직접 시장을 분석하고, 파트너십 구축 및 고객 확보를 위한 전략을 실행

체계적인 컴퓨터 공학 과정을 제공하며, 실습 중심의 교육을 통해 실질적인 기술을 얻을 수 있도록 돕는 교육 기관

담당 업무:

커리큘럼 개발

• 12세부터 대학생까지 다양한 주제를 기초부터 심화과정까지 교육하며 효과적이고 체계적인 커리큘럼을 제작

• 퇴사후에도 외주 계약을 통해 지속적으로 커리큘럼을 제작하며 능력을 인정받음

AI 과정 강사

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

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

• A* 나 Dijkstra 같은 최적화 및 경로 탐색 알고리즘을 교육

• AI의 다양한 활용 사례를 이해하고 실제 프로젝트에 적용할 수 있도록 지도

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

• HTML, CSS, JavaScript를 교육하며 기본적인 웹 페이지 제작과 동적인 기능 구현을 목표로 교육

• 객체 지향 프로그래밍, 파일 입출력, 예외 처리 및 외부 라이브러리 활용 능력을 실제 프로젝트에 적용할 수 있도록 교육

• NoSQL, PostgreSQL, MySQL의 차이점을 중심으로 Docker와 DBeaver를 활용한 데이터베이스 환경 구축 및 관리 방법

  을 교육함

Dr. Imran 교수님의 연구 조수로 활동하며 게임을 통해 컴퓨터 공학 지식을 교육하는 방식에 대한 연구

담당 업무

중국에 위치한 텐진(TianJian, 天津) 대학교와 공동 연구를 진행함

• 프로그래밍 개념을 흥미롭게 학습할 수 있도록 설계된 Python 교육 게임 “Ancient Treasure Adventures"를 개발함

• Dr. Imran 교수님의 지도 아래 4명의 연구 조수와 함께 Python 초보 학습자를 위한 효율적인 교육 방법을 탐구하는 연구 프로젝트를 진행함

• 게임 내에서 Python 학습 경험을 강화하기 위해 퍼즐, 챌린지, 퀘스트를 통해 플레이어가 흥미롭게 학습할 수 있는 상호작용형 교육 방식을 설계하고 구현함

• Godot 게임 엔진을 활용하여 직관적이고 사용자 친화적인 인터페이스를 개발함

• 학습 경험을 향상시키기 위해 애니메이션, 배경음악, 화면 전환 효과를 통합하였으며, GDScript를 활용해 게임 로직과 상호작용을 구현

웹 개발자 (2023.09 ~ 2023.12), 앱 개발자 (2022.05 ~ 2022.12)

비영리, 자원봉사 중심의 밴쿠버 방송국이며 라디오와 인터넷을 통해 방송하는 플랫폼

담당 업무

웹 개발

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

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

• Drupal 8에서 Drupal 9으로 마이그래이션 진행

앱 개발

• React Native를 사용해 첫 모바일 애플리케이션을 성공적으로 출시, iOS와 Android에서 원활하게 동작하도록 구축

• GitLab API를 통해 웹 페이지에 게시된 글을 앱에서 확인할 수 있도록 연동함

• 개인 설정을 손쉽게 관리할 수 있는 UI를 설계하여 전반적인 사용자 만족도를 향상시킴

서드 파티 서비스 없이 개인 포트폴리오 및 기술 블로그를 직접 설계, 개발, 배포하며 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명의 회원을 대상으로 한 월간 학술 및 사회적 행사를 기획하고 조직하여, 커뮤니티 내에서 활발한 참여와 네트워킹 기회를 창출

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

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