프론트엔드 개발자

황병선

"개발자가 불편할수록 사용자가 편하다"라는 멘토님의 말씀을 듣고,  
더 나은 사용자 경험을 제공하기 위해 깊이 고민하며 개발에 임하고 있습니다.  
제가 만든 기능이 사용자에게 자연스럽게 다가가고, 불편함 없이 활용될 때 가장 큰 보람을 느낍니다. 
이를 위해 소통의 강점을 활용하여 팀원들과 긍정적인 분위기에서 적극적으로 커뮤니케이션하며 
사용자의 니즈를 파악하고, 개발 과정에서 끊임없이 개선하며, 
비즈니스적 가치 실현을 목표로 합니다.

<h4><strong>Description</strong></h4><p>손글씨 롤링페이퍼의 따뜻함을 웹 환경에서도 간편히 느낄 수 있도록 설계한 플랫폼</p><ul><li><p><a target="_blank" rel="noopener noreferrer nofollow" href="https://rolling05.netlify.app/">Website</a></p></li><li><p><a target="_blank" rel="noopener noreferrer nofollow" href="https://github.com/hbs0133/FE-Rolling-5team">GitHub</a></p><p></p></li></ul><h4><strong>Experience</strong></h4><h6>프로필 이미지 업로드 기능 개발 및 개선</h6><ul><li><p>기존에 기본 프로필 이미지 사용으로 인한 유저 간 구별 어려움을 해결하기 위해, Firebase Storage를 활용한 <strong>프로필 이미지 업로드 기능</strong>을 개발해 개인화된 사용자 경험을 제공했습니다.</p></li><li><p>기존에는 사용자가 프로필 이미지를 변경할 때마다 서버에 업로드하여 미리보기를 제공하던 방식을 사용했으나, 이로 인해 비효율적으로 데이터가 저장되는 문제를 해결하기위해 로컬에서 미리보기를 제공하고, 최종적으로 제출 시에<br>서버에 이미지를 업로드하도록 변경하여 서버 저장공간 사용을 최적화 하였습니다.</p><p></p></li></ul><h6><strong>WYSIWYG방식의 텍스트에디터 추가</strong></h6><ul><li><p><strong>텍스트 에디터</strong>를 활용하여 다양한 서식 지원으로 메시지 작성 환경을 풍부하게 사용자 경험을 향상했습니다.</p><p></p></li></ul><h6>롤링페이퍼 미리보기 추가</h6><ul><li><p><strong>미리보기 기능</strong>을 통해 롤링페이퍼 작성 흐름을 직관적으로 개선했습니다.</p></li><li><p>SCSS로 반응형 레이아웃을 설계해 다양한 디바이스에서 일관된 미리보기 화면을 제공했습니다.</p></li></ul><h6>모달 기반 메시지 확인 및 제출 프로세스 최적화</h6><ul><li><p>롤링페이퍼 제출 전 사용자 확인을 위한<strong> 모달</strong> <strong>기반 UI</strong>를 설계했습니다.</p></li><li><p>사용자가 실수를 줄이고, 안정적인 메시지 작성/제출 환경을 제공했습니다.</p></li></ul><h6>드롭다운 기반 동적 UI 설계</h6><ul><li><p>React Context API를 활용해 다크 모드와 테마 적용이 가능한 <strong>드롭다운 UI를 개발</strong>했습니다.</p></li><li><p>클릭 외부 감지, 애니메이션 효과를 통해 사용자 경험을 최적화하였습니다.</p><p></p></li></ul>

Rolling

<h4><strong>Description</strong></h4><p>GitHub Projects와 Notion에서 영감을 받은 팀 협업 및 일정 관리 최적화를 위한 대시보드 중심 플랫폼</p><ul><li><p><a target="_blank" rel="noopener noreferrer nofollow" href="https://sched6.netlify.app/">WebSite</a></p></li><li><p><a target="_blank" rel="noopener noreferrer nofollow" href="https://github.com/hbs0133/taskify">GitHub</a></p><p></p></li></ul><h4><strong>Experience</strong></h4><h6>SEO 최적화 및 메타데이터 설정</h6><ul><li><p>Open Graph 태그(og:title, og:description, og:image 등)를 설정했습니다. <br>공유 시 썸네일과 설명을 통해 공유받은 사용자가 사이트의 핵심 정보를 한눈에 파악하고, 직접 방문할 가능성을 높였습니다.</p></li></ul><h6>페이지네이션 커스텀 훅 개발</h6><ul><li><p>페이지네이션을 커스텀 훅으로 모듈화하여 코드 재사용성을 증가시켰습니다.</p></li><li><p>페이지네이션 UI에서 총 페이지가 2페이지 이하일 경우, 렌더링을 하지 않도록 개선하여 불필요한 인터페이스 요소를 줄였습니다. 이 최적화를 통해 필요한 경우에만 페이지네이션이 표시되며, 사용자 경험을 향상시켰습니다</p></li></ul><h6>무한 스크롤 기능 구현</h6><ul><li><p>무한스크롤을 커스텀 훅으로 모듈화 하여 코드 재사용성을 증가시켰습니다.<br>useInfiniteQuery와 Intersection Observer를 결합하여 사용자가 별도의 조작 없이도 자연스럽게 데이터를 불러올 수 있도록 개선했습니다.</p></li><li><p>cursor 기반 API 요청을 적용하여, 페이지기반 보다 더 효율적으로 데이터 로딩을 할 수있게 개선했습니다.</p></li></ul><h6>초대받은 대시보드 검색기능</h6><ul><li><p>검색 기능을 추가하여 초대받은 대시보드를 실시간으로 필터링할 수 있도록 개발했습니다.<br>키워드가 일부라도 포함되면 검색되도록 구현하여 유연한 검색 경험을 제공했습니다.</p></li></ul><h6>TanStack Query를 활용한 데이터 상태 관리</h6><ul><li><p>데이터를 효율적으로 관리하기 위해 TanStack Query를 사용하여 서버 상태를 최적화했습니다.<br>- <code>useQuery</code>를 활용하여 대시보드, 초대 내역, 멤버 리스트 데이터를 불러오는 기능을 구현했습니다.<br>- <code>useMutation</code>을 사용하여 대시보드 수정, 멤버 삭제, 초대 취소 등의 변경 사항을 서버에 즉시 반영하도록 했습니다.<br>- <code>invalidateQueries</code>를 활용하여 데이터 변경 시 최신 데이터를 유지할 수 있도록 캐싱 전략을 최적화했습니다.</p><p></p></li></ul>