미리보기

훈수왕

6人 Project

2024.07 ~ 08

• AI 기반 사용자 Q&A 커뮤니티

• 역할 및 성과

  • 회원가입 / 로그인 시스템 구축

    • 사설 로그인의 경우 비밀번호 찾기기능도 mail서비스를 통해 구현하였습니다.

  • 레벨 시스템, 경험치 시스템 구축

    • 경험치 및 레벨링 시스템을 꼬리재귀함수를 통해 서버에 경험치 변동시 한번 호출하고, 변동이 없을경우에는 별도로 호출하지 않게 설계 하였습니다. 변동된 레벨은 서버에 저장되고 사용자 마이페이지와 댓글란에서 확인할 수 있습니다.

  • 사용자 글쓰기/수정/삭제 구축

    • Tiptap의 모듈화된 사용법을 doc를 참고하여 직접 커스텀 제작하여 커스텀 스타일이 있는 모던한 웹페이지의 글쓰기를 구현하였습니다. MarkDown 문법 및 코드포맷도 지원하며, 이미지 첨부도 가능합니다.

    • 게시글마다 고유의 번호를 부여하여 링크 공유시에도 해당 게시글로 이동되게끔 구현하였습니다.

    • 기존 글을 수정할 경우 해당 html을 파싱하여 그대로 에디터로 가져오고, 삭제할 경우 게시물 번호에 맞는 게시물이 삭제됩니다.

    • 간단한 단축키 (ctrl+b, ctrl+I, #, ##, ###등)을 지원하게 개발하였습니다.

  • 사용자 알림 기능 구축

    • React-query의 비동기처리를 이용해 알림이 발생할경우 새로고침 없이도 알림이 울리게 개발하였습니다.

  • 어드민 페이지 기능 구축

    • 게시물 신고시스템, 게시물 신고 알림, 게시물 신고 처리, 게시물 삭제, 유저 정지 등 커뮤니티에 있어야할 모든 기능을 추가하였습니다.

  • Figma UI/UX, 디자인 담당

    • 모던 웹페이지 (디스콰이엇) 을 참고해서 모든 디자인 요소를 담당해서 제작하였습니다.

• 프로젝트 상세 기술

  • Client React Typescript Zustand Tiptap React-query

  • Publishing TailwindCSS Framer-motion

  • Server Django Framework (Postgre SQL Database)

• 배포 사이트

훈수왕 :: AI 지식 공유 플랫폼

Emotree

5人 Project

2024.07 ~ 08

• AI 기반 사용자간 대화 감정분석 서비스

• 조코딩 2024 GOOGLE 해커톤 출품

• 역할 및 성과

  • 회원가입 / 로그인 시스템 구축

    • 간단한 소셜로그인 만 지원하는 서비스지만, 훈수왕 프로젝트와는 다르게 비로그인시 접속할 수 없는 서비스이므로 PrivateRoute를 이용해서 구축하였습니다.

  • Preserve-3D를 활용한 복잡한 CSS 구조 담당

    • Vanilla CSS의 기능중 하나인 Preserve-3D의 기능을 이용하여 별도의 Canvas없이 3D스타일의 레이아웃을 구성하였습니다.

    • grid를 이용해서 사용자 레벨에 따라 2x2의 정원, 3x3의 정원이 등장하게 하여 게임같은 경험으로 구성하였습니다.

  • 레벨 시스템, 경험치 시스템 담당

    • 유저레벨 뿐만아니라 나무의 경험치 및 레벨의 대한 경험치 시스템과 재귀적인 구조, 레벨에 변화에따른 형태변화등을 구성하였습니다.

    • 또한 레벨을 직관적으로 볼 수 있게 각 나무별 통계데이터또한 디자인된 그래프를 통해 사용자에게 세련되게 제공하였습니다.

  • 사운드 인터랙션 및 UX 담당

    • use-sound 라이브러리를 활용하여 배경 음악, 버튼 상호작용, 대화방 상호작용등 모든 효과에 음성을 제공하였습니다.

  • 배포 서비스 담당

    • AWS를 활용해서 자동 CI/CD 파이프라인 구축을 담당하여 도메인 구성 및 전체적인 프론트 인프라구축을 담당하였습니다.

• 프로젝트 상세 기술

  • Client React Typescript Zustand

  • Publishing TailwindCSS Framer-motion

  • Server Django Framework (Postgre SQL Database)

• 배포 사이트

Login :: Emotree

Blog

1人 Project

2024.05 ~ 06

• Next.js 개인 블로그 프로젝트

  • 다양한 프레임워크가 있지만 직접 밑바닥부터 블로그를 제작해보고싶다는 마음가짐 하나만으로 제작하게된 블로그입니다.

• 역할 및 성과

  • 프로젝트 전체 제작

  • MDX-Plugin 자체 세팅 및 구축

    • 마크다운의 확장형인 MDX를 Next.js에 조합하여 직접 별개의 프레임워크 없이 블로그를 제작하였습니다.

    • 마크다운 문법을 활용해서 블로그글을 작성/수정/삭제가 가능합니다.

  • 복잡한 디렉토리 구조 및 SEO 최적화

    • Category - Post로 이어지는 기본적인 블로그 게시글과 Series로 묶여있는 시리즈 게시글로 구별하여 디렉토리를 구성하였습니다.

    • 모든 게시글은 게시글의 말머리 (frontmatter)에 따라 자동적으로 SEO가 구성되게 제작하였습니다.

  • 이미지 최적화 및 이미지 서버 구성

    • 직접 제작한 build용 이미지 최적화 플러그인을 이용하여 프로젝트 빌드시 이미지를 webp로 변환하고 AWS S3로 전송합니다.

    • 각 이미지의 대한 주소는 자동으로 변환되어 각 게시글에 맞게 사용자에게 전송됩니다.

  • 사용자 지정 MDX 플러그인 제작

    • 목차, 하이퍼링크, 코드블럭, 인용문, Callout등 노션에 존재하는 대부분의 디자인요소처럼 별개의 MDX 컴포넌트를 제작하여 블로그에서 보여줄 수 있는 대부분의 기능의 플러그인을 제작하였습니다.

• 프로젝트 상세 기술

  • Client Next.js Typescript Zustand

  • Publishing TailwindCSS Framer-motion

  • Server Supabase Vercel

• 배포 사이트

Trouble Wiki

• 프로젝트 회고

블로그 프로젝트 회고 | Trouble Wiki

• Next.js 사용자제작 포트폴리오 페이지

• 역할 및 성과

  • 프로젝트 전체 제작

  • NodeMailer를 활용한 사용자 메일 전송 서비스

  • Mobile부터 QHD이상 모니터까지 지원하는 반응형 구축

    • Tailwind Responsive Custom 를 통해 사이즈를 추가하여 구축하였습니다.

  • 해외 사용률이 높은 Shadn/ui를 채택해서 학습

    • 복잡한 구조로 되어있는 자주 사용되는 UI를 간단한 코드로 사용하였습니다.

    • Custom Styling도 문제없이 가능하여 간편하게 서비스를 제작 할 수 있어 좋은 경험이 되었습니다.

  • 사용자 경험 중심의 UI/UX 개선

    • 배포 과정중에서 발견된 Header 링크 문제점 해결, 연속클릭시 발생하는 문제 해결하였습니다.

    • IntersectionObserver를 활용한 위치변경 컨트롤러 제작하여 컨트롤러 컴포넌트 하나로 전체 말머리 위치를 컨트롤 할 수 있었습니다.

• 프로젝트 상세 기술

  • Client Next.js Typescript Shadn/ui

  • Publishing TailwindCSS Framer-motion

• 배포 사이트

  KMS's Portfolio