타임박스 플래너를 앱으로 활용하기 위한 PWA 기반의 웹사이트입니다. 시중의 앱들은 필요 이상으로 복잡하여 타임박스 플래너 본연의 기능만을 최소한으로 담도록 직접 개발하였습니다.

조금씩 공부하고 있었던 새로운 버전의 Next.js를 본격적으로 체화할 수 있었습니다.

인증의 구현을 위해 Supabase를 처음 사용해보며 Firebase와 비교해볼 수 있었고, Vercel의 무료 PostgreSQL을 사용해보며 Raw SQL에 더욱 익숙해질 수 있었습니다.

지원이 중단된 Recoil 대신에 Zustand를 처음으로 익히면서 Recoil과의 차이점을 느낄 수 있었습니다.

메이플스토리의 아이템이 원하는 조건으로 경매장에 올라왔을 때 알림을 받아보기 위한 웹사이트입니다. 메이플스토리를 좋아하는 한 친구의 아이디어에 착안하여 개발하였습니다.

새롭게 출시된 React 18과 Next.js 13을 적극적으로 공부하고 활용해볼 수 있었을 뿐 아니라, React-Query와 React-Hook-Form 등의 편의를 돕는 여러 라이브러리도 활용해볼 수 있었습니다.

Tailwind CSS에 조금 더 익숙해지는 계기가 되었고, Tailwind CSS 기반으로 다크 모드를 구현해보고 Flowbite 라이브러리를 통해 각종 컴포넌트를 가져와 사용해볼 수 있었습니다.

노래방을 즐기는 사람의 입장에서 자주 부르는 노래를 간편하게 관리할 수 있도록 도와주는 웹사이트입니다. 제 취미가 아이디어의 원천이었고, 저와 취미가 같은 사람들에게 도움이 되었으면 하는 마음으로 개발했습니다.

Firebase 서비스를 처음 사용해봤다는 것만으로도 의미가 있었지만, 그 과정에서 OAuth 2.0의 개념을 한 번 더 깊게 다지고 NoSQL을 실제로 사용해볼 수 있었다는 점에서 더욱 의미가 있었습니다.

최근에 인기가 많은 Tailwind CSS를 처음으로 사용해보며 이것의 차별적인 유용성을 느낄 수 있었고, 동시에 PostCSS가 무엇인지 배우는 계기도 되었습니다.

이론으로만 알고 있던 PWA를 실제로 구현해봄으로써 앞으로 웹 생태계가 뻗어나갈 무한한 가능성과 확장성을 몸소 체감할 수 있었습니다.

복잡한 상황에서의 N빵 계산을 도와 누가 누구에게 얼마를 보내야 하는지 계산해 주는 모바일 앱입니다. 동아리 활동을 하던 당시 여러 모임에서 N빵 계산 시 어려움을 겪은 몇몇 상황에서 아이디어를 얻어 개발하였습니다.

이미 Android Native로 개발을 완료한 프로젝트였지만, React Native의 학습을 위해 이를 다시 React Native로 개발하였습니다. 이전 프로젝트와 달리 이번에는 전반적인 로직과 UI & UX를 개선하고 실제로 스토어에 출시까지 했다는 점에서 의미가 있습니다. 이제는 마음만 먹으면 모바일 앱도 개발하고 출시할 수 있다는 자신감을 준 프로젝트입니다.

내가 생각하는 나의 성격과 친구가 생각하는 나의 성격을 비교함으로써 겉으로 보이는 나의 모습이 어떠한지 파악해볼 수 있는 웹사이트입니다. 실제로 지인과 성격 검사를 서로 해주면서 얻은 아이디어를 바탕으로 직접 개발하였습니다.

백 엔드 개발자와 협업하는 과정에 관해 많이 배울 수 있었습니다. 필요한 명세를 문서로 작성하여 소통하였고, 필요한 지식도 함께 공유하며 학습할 수 있었습니다.

UI & UX를 깊게 고민하며 스스로 디자인하였고, 그 과정에서 canvas API 등을 활용하여 복잡한 애니메이션들을 구현했습니다.

복수 페이지의 Next.js 웹사이트를 만들면서 라우팅, CSR, SSR, SSG에 대한 개념을 더욱 확실하게 숙지할 수 있었습니다.

GA를 설치하여 트래픽을 파악하고 사용자의 행동을 이벤트 단위로 분석하는 방법을 알게 되었습니다.

친형이 근무하는 PT 센터의 홈페이지로 사용하는 웹사이트입니다. Onepick은 해당 센터의 이름입니다. 제 분야로 가족에게 도움이 되고 싶은 마음에 진행한 프로젝트입니다.

Next.js에 조금 더 익숙해진 계기가 되었을 뿐 아니라, 고객의 확보가 중요한 웹사이트인 만큼 사용자의 유입과 경험을 위해 검색 엔진 최적화(SEO)와 UI & UX 구상에 많은 공을 들인 프로젝트입니다.

포트폴리오 용도로 제작한 웹사이트입니다. 지금 보고 있는 바로 이 웹사이트에 해당합니다.

이미 순수 React로 개발을 완료한 프로젝트였지만, Next.js의 학습을 위해 이를 Next.js로 다시 개발하였습니다. 그 과정에서 서버 사이드 렌더링을 함께 지원하는 Next.js의 위대함을 느낄 수 있었습니다. 또한, Vercel을 이용하여 정적 웹사이트의 Lean한 배포도 경험해볼 수 있었습니다.

서울대학교 중앙 동아리 햇빛봉사단에 관한 유익한 정보들을 문서화하여 제공해주는 웹 서비스입니다. 해당 동아리 활동을 하던 당시 동아리의 규모에 비해 제대로 된 대표 웹사이트가 없었다는 점이 아쉬워 구상했었던 아이디어를 바탕으로 개발하였습니다.

이미 Django 풀 스택으로 개발을 완료한 프로젝트였지만, React의 학습을 위해 이를 React와 Django를 이용하여 다시 개발하였습니다. 그 과정에서 Django REST Framework도 학습하여 백 엔드 지식을 더욱 탄탄히 하였고, AWS의 리소스들을 직접 할당, 연결, 설정하면서 배포 경험도 쌓을 수 있었습니다.

서울대학교 중앙 동아리 햇빛봉사단에 관한 유익한 정보들을 문서화하여 제공해주는 웹 서비스입니다. 해당 동아리 활동을 하던 당시 동아리의 규모에 비해 제대로 된 대표 웹사이트가 없었다는 점이 아쉬워 구상했었던 아이디어를 바탕으로 개발하였습니다.

프론트 엔드와 백 엔드를 모두 Django로 구현한 원시적인 형태의 웹 어플리케이션입니다. 당시 회사에서 채택하고 있던 환경 및 기술에 대한 완전한 이해를 목적으로 진행한 프로젝트입니다.

서울대학교 학생들이 쉽게 임시적/장기적 모임을 구성하고 이에 참여할 수 있도록 돕는 웹 서비스입니다. 학교 내에서 임시로 혹은 장기적으로 어떠한 목적을 함께 할 누군가를 간편하게 찾을 수 있도록 돕는 것을 목적으로 합니다.

처음으로 Git을 이용하여 다른 사람들과 협업을 해보고, HTML, CSS, JavaScript와 함께 React, Django를 배우면서 웹 개발의 기본 지식을 쌓을 수 있었던 프로젝트입니다. 또한 저에게 처음으로 웹 개발이라는 매력적인 분야를 알려준 계기이기도 합니다.