KMS's Portfolio

Projects

Next.js 블로그

Trouble Wiki

2024.05 - 2024.06 (개인 프로젝트)

0 / 0

주요 역할 및 구현 내용

프로젝트 전반 제작

Next.js App-router 기반 블로그 자체 구축

MDX-Plugin 자체 개발

확장된 마크다운 기능(목차, 코드블럭, 인용, Callout등) 추가

SEO 및 콘텐츠 관리

Category → Post 구조 설계, Series 기능 및 목차 자동 생성 (IntersectionObserver 활용)

frontmatter 기반 SEO 최적화, 모든 게시글에 자동 메타데이터 적용

이미지 최적화 및 서버 연동

빌드 시 이미지 WebP 변환 + AWS S3 업로드, 클라이언트에 최적화된 이미지 자동 제공

이미지 최적화 로직을 통해 LCP 11.5s → 7.2s / FCP 1.7s → 0.8s로 40% 성능 개선

UI/UX & 디자인

Windows 스타일 블로그 UI 설계, 창 이동·최소화 기능 구현

반응형 디자인 및 다크모드 지원

백엔드 및 데이터 관리

Supabase 기반 댓글 및 방문자 통계 시스템 구축

Non-SQL 데이터베이스 경험, SQL 대비 장단점 분석

성과 및 배운점

웹 최적화 기법 적용, 성능 개선 및 SEO 경험 확보

MDX 활용 경험, 현대 웹사이트에서 Markdown을 활용하는 방식 습득

Supabase + S3 연동, CDN 활용 및 클라우드 스토리지 경험 습득

풀스택 프로젝트 완성, 기획부터 배포까지 전 과정 직접 수행

주요 기능

카테고리 분류, 시리즈 분류, 게시글, 음악 재생등

Github

https://github.com/yoyobar/newBlog

URL

https://wiki.yoyobar.xyz

Frontend

Next.js, TypeScript, TailwindCSS

Backend

Supabase

Deployment

Vercel

AI 커뮤니티

훈수왕

2024.08 - 2024.09 (팀 프로젝트)

0 / 0

주요 역할 및 구현 내용

프로젝트 리딩 & 일정 관리

팀장 역할 수행, 개발 일정 조율 및 이슈 해결

AWS CI/CD 및 Client 인프라 구축, 도메인 연동

Figma · Excalidraw 활용 → 개발 프로세스 체계화 및 협업 효율 극대화

이메일 인증 및 비밀번호 찾기 기능 구현

회원가입 및 인증 시스템 구축

Tiptap 기반 Custom Editor & 게시글 시스템

Markdown 문법 및 코드 포맷 지원, 이미지 첨부 기능 추가

단축키 지원 → 사용자 피드백 반영하여 UX 개선

게시글 고유 링크 및 공유 기능 구현

실시간 알림 시스템 (React Query 적용)

기존 새로고침 기반 알림에서 → 자동 동기화 방식으로 개선

좋아요 · 댓글 알림 실시간 처리

어드민 기능 개발

게시물 신고 기능 및 경고 3회 이상 ID 정지 시스템 구현

사용자 통계 및 다중 게시글 삭제 기능 추가

Figma 기반 UI/UX 디자인 총괄

모던 웹 디자인(Disquiet.io 참고) 적용, TailwindCSS 활용

Framer-motion 애니메이션 적용, 직관적인 인터페이스 구현

성과 및 배운점

React Query 기반 실시간 데이터 동기화, UX 개선 및 성능 최적화

Tiptap 기반 Custom Editor 제작, 온라인 에디터 제작 기술 습득

프롬프트 엔지니어링 활용, AI 훈수 시스템의 응답 품질 향상

자세히 보기 FIGMA

주요 기능

게시판 CRUD, 질문 작성및 AI 답변

어드민 페이지

실시간 알림

담당 파트

전체적인 모달 및 UI 구상

기획 및 개발 총괄

어드민 페이지

사용자 메일 인증, Auth 로직

실시간 알림, Admin 알림

유저 신고 처리

Github

https://github.com/OZ-Coding-School

URL

https://hunsuking.yoyobar.xyz

Frontend

React, React-query, Zustand, TypeScript, TailwindCSS, Tiptap

Backend

Django FrameWork

Database

Postgre SQL

Deployment

Amazon Web Service

AI 감정 분석 시뮬레이션

Emotree

2024.07 - 2024.08 (팀 프로젝트)

0 / 0

주요 역할 및 구현 내용

조코딩 2024 AI 해커톤 출품 - 예선 통과

Figma · Excalidraw · Notion 활용 → 개발 프로세스 체계화 및 문서화

회원가입 및 인증 시스템 구축

PrivateRoute 적용 → 비회원 접근 차단 및 권한 관리

3D 스타일 UI 및 게이미피케이션 적용

CSS transform-style: preserve-3D 활용 → Canvas 없이 3D 스타일 UI 구현

Grid 레이아웃 기반 사용자 레벨별 UI 변화 → 게임 같은 몰입감 제공

레벨·경험치 및 감정 통계 시스템 개발

AI 감정 분석 기반 경험치 및 레벨링 로직 구현

감정별 통계 데이터 그래프 시각화

어드민 페이지 기능 구축

사용자 관리 및 통계 데이터 제공

어드민 전용 사용자 계정 관리 및 사용량 분석 기능 추가

사운드 인터랙션 및 UX 최적화

배경 음악, 버튼 상호작용, 대화방 내 효과음 적용

크롬의 자동 재생 정책 대응 → 오픈소스 사운드 활용 최적화

AWS 기반 배포 및 CI/CD 구축

GitHub Actions → 자동 배포 파이프라인 구축

AWS Route53 + SSL 인증서 적용

성과 및 배운 점

OAuth2 인증 Flow 이해, 서드파티 계정 연동 및 보안 고려

대화 감정 분석 데이터 그래프 시각화, 사용자용 & 어드민용 통계 차별화

사운드 인터랙션 최적화, 크롬 정책을 고려한 오디오 재생 방식 적용

AWS 기반 인프라 구축 경험, Git 업데이트 시 자동 CI/CD 연동

자세히 보기 FIGMA 해커톤 발표자료

주요 기능

AI 감정분석, 나무 심기, 채팅방 생성

마이 페이지, 어드민 페이지

담당 파트

CI/CD, 로그인 로직, 어드민 로직

메인 페이지 로직, 경험치 시스템 로직

Github

https://github.com/OZ-Coding-School

Frontend

React, Zustand, TypeScript, TailwindCSS

Backend

Django FrameWork

Database

Postgre SQL

Deployment

Amazon Web Service