미리보기

어트랙션은 뉴스레터 종합 관리 및 추천 서비스로 현재 베타 버전으로 운영되고 있습니다. 이 서비스는 월 2,000명 이상의 고유 방문자수를 기록하고 있으며, 해당 서비스는 향후 기능 추가와 오류 수정을 통해 사용성을 향상시킬 계획입니다.

서비스 구현 및 배포

• Next14 사용을 통한 성능 최적화 및 사용자 경험 개선

• AWS Amplify / CD 파이프라인으로 자동화된 배포 실현

• 디자인 시스템 구축으로 일관된 UI/UX 제공 및 신속한 디자인 반영

• Cloudflare DNS와 CDN 적용으로 보안 강화 및 서비스 안정성 확보

프로젝트 관리

• JIRA를 통한 TiDD(Ticket Driven Development) 방법론 적용

• GitHub Actions로 자동화된 테스트 구축

• 모노레포 도입으로 코드베이스 효율적 관리

• FSD 아키텍처 적용으로 협업 효율성 증대

오류 추적 및 사용자 소통

• Sentry를 통한 실시간 오류 추적 및 대응

• 채널톡으로 사용자 피드백 수집 및 서비스 개선 반영

사용 기술

• Next14, TypeScript, TailwindCSS, React-Query, StoryBook

• PNPM, PNPM workspace, Github Actions, AWS Amplify

• Sentry, ChannelTalk

URL

• 어트랙션 프로덕션 서비스

• 어트랙션 테스트 서비스

• 어트랙션 프론트엔드 레포지토리

clab-platforms는 C-Lab 구성원과 경기대학교 학생들을 위한 통합 서비스 플랫폼으로, Members 서비스, Time 서비스, 디자인 시스템 패키지, 아이콘 관리 기능을 포함하여 사용자 경험을 중시하는 다양한 기능을 제공합니다.

서비스 유지보수 및 개선

• Rollup에서 tsup으로 마이그레이션해 CJS/ESM 형식 지원, 소스맵, d.ts 생성 설정을 간소화

• checksum을 이용한 쉘 스크립트 작성으로 변경된 패키지만 빌드되도록 최적화

• Members 내 레거시 코드 분석 및 개선으로 가독성과 유지보수성 향상, 새로운 기능 추가 효율성 증대

패키지 개발

• Icon 패키지: SVGO와 SVGR을 사용해 SVG 아이콘을 리액트 컴포넌트로 최적화 및 변환, 자동화된 아이콘 관리 및 로딩 속도 향상

• Time 패키지: Next14와 TypeScript를 활용한 시간표 구성/공유 플랫폼 개발, FSD 아키텍처로 폴더 구조 정립 및 사용자 친화적 UI 제공

디자인 시스템 관리

• TailwindCSS 기반의 디자인 시스템 유지보수

• Storybook으로 컴포넌트 문서화, clsx, tailwind-merge, cva 라이브러리 사용으로 코드 품질 및 가독성 향상

사용 기술

• Next14, React, TailwindCSS, TypeScript, React-Query, Recoil

• PNPM, turborepo, Vite, Github Actions

• Sentry, ChannelTalk

URL

• clab-platforms 레포지토리

• clab-platforms 코드리뷰 목록

개인 기술 블로그 프로젝트는 Next14를 활용하여 직접 개발한 나만의 블로그 서비스입니다. 이 블로그는 단순히 학습한 내용을 기록하는 용도를 넘어, 새로운 기술들을 적용하고 실전적인 배움을 얻는 장으로 기능하고 있습니다. 현재도 지속적으로 유지보수를 진행하며, 사용자 경험을 개선하고 새로운 기능을 추가하는 데 힘쓰고 있습니다.

서비스 구현 및 배포

• Next13을 사용해 SSR 환경을 경험하며, app-router의 안정성 문제와 타 라이브러리 충돌을 해결하고 트러블슈팅 과정을 블로그에 기록

• Next 메이저 버전 업데이트 및 마이그레이션 진행, 발생한 문제들 해결

• md/mdx 파일을 ContentLayer, rehype, remark로 파싱하고 리액트 컴포넌트와 매핑하여 시각적 요소 구현

• Vercel을 통해 코드 변경 시 자동 빌드 및 배포, 최신 콘텐츠를 안정적으로 제공

• Framer-motion을 활용한 전환, 애니메이션 효과를 적용하여 사용자 경험 개선

SEO 최적화

• 구글 서치 콘솔과 네이버 서치 어드바이저를 통해 검색 엔진 접근성 개선

• 메타 태그와 OpenGraph 적용으로 소셜 미디어 콘텐츠 시각화 최적화

• robots.txt 파일로 검색 엔진 크롤러 인덱싱 지침 제공 및 Next를 통한 동적 사이트맵 생성

프로젝트 관리

• Github Issue와 Github Project를 이용해 프로젝트 태스크 관리 및 진행 상황 시각화

• 칸반 보드를 활용하여 우선순위 설정 및 기능/버그 수정 관리

사용 기술

• Next14, Typescript, TailwindCSS, Recoil, Framer-motion

• Vercel,

  구글 서치 콘솔, 네이버 서치 어드바이저

URL

• Github Issue

• Github Project

• 신현호 기술블로그

• 신현호 기술블로그 레포지토리

교내 개발 보안 동아리 C-Lab의 코어팀으로 활동하며, 사용자 피드백을 반영해 기존 서비스를 개선하고 신규 서비스 개발을 담당했습니다. 코드 리뷰와 팀원들과의 소통을 통해 코드의 효율성을 높였고, 문제 해결 과정을 통해 협업의 중요성을 배웠습니다. 이를 통해 서비스의 안정성을 향상시키고, 사용자 경험을 개선하며, 효과적인 팀워크가 프로젝트 성공에 미치는 영향을 깊이 이해하게 되었습니다.

교내 개발 동아리 부회장으로서 프론트엔드 개발자 겸 튜터로 활동하며, 구성원들과 지식을 공유하고 프로젝트를 진행했습니다. HTML, CSS, JavaScript, React 실습을 통해 협업하며 함께 성장했고, 이를 통해 협업과 소통의 중요성을 깨닫고, 창의적이고 효율적인 해결책을 찾는 데 큰 도움을 받았습니다. 이 과정에서 팀워크와 소통 능력을 크게 발전시킬 수 있었습니다.

42서울의 본과정 교육생으로서 대학에서 학습하던 이론들을 라이브러리에 의존하지 않고 C언어로 직접 구현해보며 기초적인 컴퓨터 과학, C언어에서의 메모리 관리를 학습할 수 있었습니다. 또한, 해당 과정의 동료 학습 과정을 통해 새로운 사람들과 지식을 공유하며 학습했습니다. 이는 현재 저에게 꾸준히 학습을 지속할 수 있도록 하는 원동력이 되었습니다.