미리보기

강아지 유치원을 운영하는 사업체들을 B2B로서 강아지 일기장, 돌봄, 셔틀 관련 운영을 쉽게 도와줄 수 있는 어플리케이션입니다.

현재 프로젝트 진행 중이며, 개발 중인 상태에 합류하여 견주 마이페이지, 강아지 상세정보 페이지 등을 맡게 되었습니다. 또한 QA 단계에서 발생하는 이슈를 해결 중으로 25년도 초 안으로 앱 출시가 목표이고, 1차 MVP는 완료된 상태로 2차 MVP를 목표로 하고 있습니다.

작업 사항

• QA에서 발견된 문제점들을 적극적으로 해결하여 서비스 개선

  • 백엔드, 기획 및 디자인 팀과 협업하며 Jira, Discord를 활용하여 이슈를 구체적으로 논의하고 해결

• CRUD 기능 구현을 통해 프론트엔드 전문성 강화

  • 견주/강아지 정보 조회, 수정, 삭제, 업로드 기능을 구현

  • 프로필 사진 업로드 및 수정 기능 작업을 통해 사용자 경험 강화

• 프로필 이미지 설정 및 수정 기능

  • ios 환경에서 발생하던 onBlur 이슈로 인해 프로필 이미지 수정이 불가능했던 문제를 해결

  • 다양한 디바이스 환경에서도 동작하도록 코드 품질 개선

• Tanstack Query를 활용한 효율적인 비동기 처리 및 에러 핸들링

  • getQueryData 메서드와 staletime등의 옵션을 활용해 캐시 된 데이터를 사용함으로써 불필요한 API 호출 감소

  • useQuery의 selet 옵션을 활용한 데이터 가공으로 일관된 반환 데이터와 코드 간소화

• React Hook Form을 통한 폼 상태관리 간소화 및 일관성 확보

  • useForm 훅으로 제어 컴포넌트를 관리하여 실시간 데이터 검증 및 에러 처리 구현

사용 기술 및 협업 툴

• 기술 : React, TypeScript, Recoil, Tanstack Query, Styled Components

• 협업 툴 : Figma, Notion, Github, Jira

직장인, 학생, 전문직종 등 다양한 분야의 사람들이 데스크 테리어를 공유하고, 본인만의 무드를 찾을 수 있는 어플리케이션으로 글쓰기, 투표하기, 나만의 무드 찾기 등을 제공하고 있습니다.

현재 프로젝트 진행 중이며, 기획 단계부터 참여하여 와이어프레임, API 설계에 주도적으로 기여하고 있습니다. 1차 MVP 완료 및 25년도 안으로 출시를 목표로 하고 있습니다.

작업 사항

• Notion, Discord 를 통해 팀원간의 커뮤니케이션 진행

  • 회의 내용, svg파일, 환경 변수 설정 등을 Notion에 문서화 하여 팀원들과 공유

  • 실시간으로 이슈 처리가 필요한 경우 DIscord를 활용해 신속히 해결

  • 백엔드 팀과 특정 이슈나 개선 사항이 발생하면 GitHub Issuse 페이지를 통해 협업 및 피드백 진행

• 기획 단계 부터 참여하여 프로젝트 설계에 기여

• JWT 토큰을 활용한 인증 시스템 구현

  • Axios Interceptor를 활용하여 반복되는 요청을 일관되게 관리하며 코드의 재 사용성을 향상

• Tanstack Query의 캐싱, 값 업데이트, 에러 핸들링 기능을 활용하여 효율적인 비동기 처리 구현

• React Hook Form을 사용하여 폼의 상태 관리 코드를 단순화하고 일관성 확보

사용 기술 및 협업 툴

• 기술 : Next.js, TypeScript, Recoil, Tanstack Query

• 협업 툴 : Figma, Notion, Github

포켓몬 API를 알게되어 작업을 진행하게 되었습니다. React Query는 물론 무한 스크롤링, 다크모드, axios를 공부하기 위해 제작하게 되었습니다. 현재는 완성도 높은 프로젝트를 구현하기 위해 꾸준히 개선하고 있습니다.

작업 사항

• 프로젝트 기획 및 디자인 구성

  • Figma를 활용해 직관적으로 원하는 정보만 보일 수 있도록 구조 작업

• Lazy, Suspense 통해 코드 스플리팅 작업 및 뷰포트에 보이지 않는 이미지 로딩 지연

  • Redux Toolkit로 테마에 대한 상태를 저장하여 전역으로 테마 상태 관리

  • localStorage를 활용해 유저 브라우저에 테마 타입 저장하여 새로고침 해도 테마가 유지되므로써 사용자 경험을 향상

• 라이브러리 사용 없이 scrollHeight, scrollTop, clientHeight 요소 활용해 무한 스크롤 구현

  • scrollHeight, scrollTop, clientHeight 요소를 활용해 뷰포트 바닥에 닿을 경우 요청한 데이터 만큼만 불러오도록 무한 스크롤 구현

• 원하는 포켓몬을 쉽게 찾기 위해 URLSearchParams 활용해 검색 페이지 및 검색 기능 구현

  • input action 속성을 통해 페이지가 이동하면서 URL 파라미터에 검색 키워드 저장

  • URLSearchParams 메서드를 활용해 검색 키워드를 추출 후 React Query의 useQuery와 Redux Toolkit을 활용해 filtering된 검색 결과를 표시

  • 원하는 검색 결과가 없을 경우의 조건문을 통하여 Nothing 컴포넌트 보이도록하여 사용자 경험을 향상

사용 기술

• Vite, React, TypeScript, Redux Toolkit, React Query, Styled Components

기획 부터 디자인까지 제가 직접 작업했습니다. 노션, 템플릿 소스 등을 이용할 수 있었지만 저만의 포트폴리오 사이트를 가지고 싶어 제작했습니다. 주요 색상인 black & white로 전체적으로 심플함을 줬고, UX와 내용 구성을 신경쓰며 진행한 포트폴리오 입니다.

작업 사항

• 포트폴리오 제작 의도를 파악하고 기획 및 구체화 작업

  • 커리어 코칭 등을 통해 수용한 피드백을 기반으로 자기 소개, 경력, 프로젝트, 교육 등 중요도 순으로 간결하면서도 효과적인 순서로 배치

  • 포트폴리오를 보는 사용자들에게 원하는 정보를 쉽게 전달할 수 있도록 고려

• 개성을 살려 UI / UX 디자인 (PC, Mobile)

  • 개성을 살려 디자인하는 동시에 여러 사용자들이 편안하게 느낄 수 있는 디자인 추구하며 작업

  • 무채색인 black & white를 활용해 심플하면서도 차분한 느낌을 주었으며, Tooltip, 익숙한 배치 등 UX 측면을 고려하며 사용자 경험을 개선하기 위해 노력 중

• 웹 표준 / 접근성 고려 및 인터랙션 작업

  • 직접 디자인한 웹 페이지를 마크업하여 웹 표준을 준수하고 웹 접근성을 고려하며 진행

  • 메인 화면에서 수용한 피드백을 반영해 애니메이션을 간단하게 구현할 수 있도록 framer-motion 라이브러리 활용해 사용자의 시선을 효과적으로 이끌어냄

사용 기술

• React, TypeScript, Redux Toolkit, TailwindCSS, Styled Components

당일 일정에서 하루,친구의 mate를 합쳐서 서비스명을 “하루메이트”로 짓게 되었습니다. 하루메이트는 당일 일정을 만들고 친구에게 손쉽게 공유 할 수 있는 서비스입니다. 친구와 놀러가기 위해서 계획을 짤 때 일정을 편리하게 공유하면 좋겠다는 생각으로 부터 시작되었습니다.

작업 사항

• 프로젝트 아이디어 도출 및 기획 구성

  • 쉽고 간단하게 일정을 만들고 공유할 수 있는 서비스를 제작하고자 Figjam을 활용해 팀원들과 flow chart를 만들고 벤치마킹을 통해 아이디어를 구체화

• 메인 페이지 UI 및 useRef, requestAnimationFrame를 통한 커서 커스터마이징 구현

  • 커서 커스터마이징을 이미지 사용하기보단 마우스 이벤트에 따라 사용자 경험을 개선하도록 구상

  • useRef를 통해 마우스 커서 컴포넌트를 저장하고 requestAnimationFrame 메서드를 활용해 마우스 동작을 최적화

• 마이 페이지 UI 작업 및 유저 닉네임 수정하기

  • 마이 페이지 반응형을 적용하고 React Query를 통해 유저 정보를 가져와 닉네임을 수정할 수 있도록 작업

  • 글자 수 제한, "탈퇴한 사용자" 닉네임은 사용할 수 없도록 작업해 사용자의 악용사례를 방지

• 웹 디자인 경험을 살려 전반적인 디자인 총괄 및 로고 디자인

  • 전체적인 UI 디자인 담당, UX의 경우 팀원들과 협업하여 수정

  • 로고 디자인 직접 수행하여 프로젝트의 브랜딩을 기여

사용 기술

• React, TypeScript, Redux Toolkit, React Query, Styled Components

• 프론트엔드 기술(JavaScript, React Query, Next.js 등)에 대한 지속적인 학습을 위해 스터디 개설 및 운영

• 소규모 인원으로 선별된 강의 또는 교재를 학습한 후, 이론 및 실습 내용을 정리하여 발표 진행 (링크, 링크)

• 부트캠프 과정에서 학습한 프론트엔드 기본기를 심층적으로 분석하고, 내용을 정리하여 발표 진행 (링크)

학점은행제, 환급과정 관련 이러닝 기업

[IT 온라인 수강 홈페이지 리뉴얼 프로젝트]

• 퍼블리싱 및 프로젝트 매니저 어시스턴트 담당

• 클라이언트와 소통하며 일정 조율 및 개선 방향성을 제시함으로써 프로젝트 구체화.

• Google Sheets를 활용해 진행도, 주요사항 등 작업 현황을 체크하며 프론트개발자와 협업.

• 적응형 웹 방식에서 작업하던 환경에서, 이번 프로젝트를 통해 (동일한 UI에 배치만 변경되는 프로젝트 구성) 반응형 웹을 도입하여 업무 환경 및 작업 효율을 2배 개선.

• Adobe XD 협업 툴을 사용해 디자인 요구사항 체크.

사용 기술

• HTML, CSS, jQuery, Adobe Photoshop, Adobe XD

학점은행제, 환급과정 관련 이러닝 기업

[재능 중개 마켓 플랫폼 프로젝트]

• 웹 디자인/퍼블리싱 및 프로젝트 매니저 어시스턴트 담당

• 과거에 활용되었던 템플릿을 기반으로 기존 레거시 코드를 개선하는 작업을 수행, 코드의 가독성을 높히고 유지보수성을 향상 시킴.

• QA업무에서 기능 작동 여부 및 개선 사항 등을 정리하고, 이를 프론트엔드 개발자와 공유하여 프로젝트의 품질을 지속적으로 향상 시킴.

• Slick Slider 라이브러리를 커스터마이징해 슬라이드 등 동적인 화면을 구현.

[다양한 기업 유지보수]

• 10개 이상의 기업을 대상으로 웹 디자인 및 퍼블리싱 유지보수를 담당.

• 각 기업의 독특한 요구사항이나 컨셉에 부합하는 맞춤형 서비스를 제공해 클라이언트의 니즈를 충족 시킴.

[각종 랜딩페이지 작업]

• 디자인 및 퍼블리싱 담당

• SEO 고려와 웹 표준, 접근성에 신경쓰며 다수의 랜딩페이지 작업 수행.

• 기획자와의 지속적인 소통을 통해 디자인 및 기능 개선에 기여.

사용 기술

• HTML, CSS, jQuery, Adobe Photoshop