미리보기

개발자, 디자이너, 아티스트를 위한 소셜 커뮤니티 서비스

• WebSite, Github

• Typescript, React.js, TailwindCSS, Zustand, React Query

• 팀 내 프론트엔드 개발 및 디자인 전반을 주도함

Service

• 개발자, 아티스트, 디자이너 간 협업과 소통을 위한 소셜 커뮤니티 서비스기능 개발

• 주요 기능: 피드, 프로젝트 참여, 검색, 채팅 및 그룹 채팅, 알림 기능

Frontend

• Atomic Design 및 Compound Pattern 기반으로 20개 이상의 컴포넌트 설계

• 반응형 디자인을 적용해 다양한 디바이스 환경에 유연하게 대응

• 검색 기능의 사용성 개선

  • 문제: 검색 모달 뒤로가기 시 상태가 초기화되어 사용자 경험이 단절됨

  • 해결: query string과 popstate event를 활용해 검색 상태가 유지되도록 개선

• Lighthouse 기반 접근성 개선

  • 문제: 스크린 리더 사용자에게 콘텐츠 접근에 어려움이 발견됨

  • 해결: 접근성 저해 요소 파악을 통해 이미지 대체 텍스트 제공, 색상 대비 조정, 웹폰트 최적화, 접근성 프로퍼티 사용 등으로 접근성 점수 25% 향상 (83점 → 100점)

• Open Graph 태그 적용으로 공유 미리보기 개선

  • 문제: 소셜 미디어에서 공유 시 메타 데이터가 표시되지 않아 서비스가 명확히 보이지 않음

  • 해결: react-helmet-async를 활용하여 동적 메타태그 설정, Open Graph 태그로 미리보기 정보 제공

집들이 선물 펀딩 서비스

• WebSite, Github

• Typescript, Next.js, PandaCSS, Recoil, React-Query

• 랜딩 페이지, 마이페이지, FAQ 페이지와 공통 컴포넌트 구현을 담당함

Service

• 집들이 선물 선택에 어려움을 겪는 사용자를 위한 선물 펀딩 서비스

• 주요 기능: 선물 등록 및 공유, 금액 송금 및 메세지 작성, 펀딩 내역 보기

Frontend

• Card, Draggable, Button 등 재사용 가능한 UI 컴포넌트 설계

• 드래그와 마우스 휠 스크롤을 모두 지원하는 가로 스크롤 인터페이스로 자연스러운 탐색 경험 구현

악보 제작 및 편곡 (2018.03 ~ )

• 비개발 직군

• 프리랜서로 7년간 약 5,300건 이상의 악보 제작 및 편곡 업무 수행

• 고객의 요구 사항에 기반하여 사용자 경험을 고려해 작업을 수행함

• 동료들과 React의 핵심 기능에 대해 JavaScript로 직접 구현하는 과정 (4주)

• 동작 원리와 렌더링 구조에 대해 깊이 이해할 수 있게 되었습니다.

• 다양한 직군과 협업하여 결과를 도출하는 해커톤 (10일)

• 다른 직군과의 협업을 통해 짧은 시간 내에 효율적으로 협업하는 방법을 배우게 됨.

• ’집업(zipup)’ 프로젝트가 13팀 중 3등을 수상하였습니다.