프론트엔드 개발자

손성호

안녕하세요, 사용자 경험을 최우선으로 생각하는 프론트엔드 개발자 손성호입니다.

프론트엔드는 사용자와 가장 가까운 접점이며, 서비스의 첫인상을 좌우하는 중요한 영역입니다.

그래서 저는 항상 "사용자가 어떻게 하면 더 편리하게 서비스를 이용할 수 있을까?"를 고민하며, 사용자의 관점에서 생각하고 개선하는 개발을 하고 있습니다.

창의적

책임감

유연함

고객 중심

적응력

<ul><li>활동기간 : 2024.04.25 ~ 2024.05.07</li><li>활동 내용<ul><li>해당 책 스터디를 통해, 프레임워크가 개발되기전 SPA나 라우팅 같은 여러 기능들이 어떻게 구현되었는지 학습</li><li>이를 바탕으로 온라인 탁구게임사이트(비욘드퐁)에 적용하여 실제 코드까지 작성</li></ul></li></ul>

'프레임워크없는 프론트엔드 개발' 책 스터디

<ul><li>활동기간 : 2023.12 ~ 2024.04</li><li>활동 내용<ul><li>c++기반의 알고리즘 스터디</li><li>기초 알고리즘 지식이 부족하다 생각해 17주간 스터디하며 알고리즘 능력향상</li></ul></li></ul>

알고리즘 스터디 (알고있니?)

<ul><li>활동기간 : 2022.03 ~ 2023.12</li><li>활동내용<ul><li>2022: 동아리 일원으로서, javascript,html,css기초 공부 및 해커톤 참여</li><li>2023: 2023 기획팀장으로서, 일원들에게 javascript문법 설명 및 숙제 제출, 검사 해커톤 피드백</li><li><a target="_blank" rel="noopener noreferrer nofollow" href="https://www.notion.so/kw-likelion11/HTML-5-13-79af08d3a1964e078195c29f050084aa">https://www.notion.so/kw-likelion11/HTML-5-13-79af08d3a1964e078195c29f050084aa</a></li><li><a target="_blank" rel="noopener noreferrer nofollow" href="https://www.notion.so/kw-likelion11/CSS-5-20-a70ce5d21df1416ead300fc118478886">https://www.notion.so/kw-likelion11/CSS-5-20-a70ce5d21df1416ead300fc118478886</a></li><li><a target="_blank" rel="noopener noreferrer nofollow" href="https://www.notion.so/kw-likelion11/6-24-f2957472302e4beab4c6bbe9d3fe54cb">https://www.notion.so/kw-likelion11/6-24-f2957472302e4beab4c6bbe9d3fe54cb</a></li></ul></li></ul>

연합동아리 멋쟁이 사자처럼 9,10기

깃허브

<ul><li>프로젝트 : <a target="_blank" rel="noopener noreferrer nofollow" href="https://github.com/boostcampwm-2024/web35-watchducks">https://github.com/boostcampwm-2024/web35-watchducks</a></li><li>역할 : 프론트엔드 총괄 및 디자인</li><li>사용기술 : React, Zustand, Tailwind, TanstackQuery, ApexChart, Netlify</li><li>주요 성과<ul><li>다크모드기능 추가<ul><li>문제 : 데모 발표 중, 눈이 아프다는 사용자 피드백 확인</li><li>해결 : TailwindCSS를 이용하여 다크모드 기능 구현</li><li>성과 : 사용자경험, 색상관련 긍정적 반응을 받음</li></ul></li><li>Navbar관련 Props drilling개선<ul><li>문제 : Navbar컴포넌트에서 하위 컴포넌트들에 props로 상태를 넘겨, 불필요한 렌더링 발생</li><li>해결 : Zustand를 이용해 Navbar의 상태를 전역으로 관리하여 렌더링 최적화</li><li>성과 : 4개 컴포넌트 리렌더링 → 리렌더링 제거</li></ul></li><li>랭킹,트래픽데이터관련 TanstackQuery를 이용 api캐싱<ul><li>문제 : 메인페이지에 접속 시, 매번 트래픽데이터를 요청</li><li>해결 : TanstackQuery를 이용해, 프론트엔드에서 api캐싱 적용</li><li>성과: 불필요한 네트워크 요청 최적화</li></ul></li></ul></li></ul>

트래픽 분석 플랫폼 (와치덕스)

<ul><li>프로젝트 : <a target="_blank" rel="noopener noreferrer nofollow" href="https://github.com/Jeju-Dorang/Frontend">https://github.com/Jeju-Dorang/Frontend</a></li><li>수상 : 장려상</li><li>역할 : 프론트엔드 팀장</li><li>사용 기술 : React, Zustand, Tailwind, Netlify</li><li>주요성과<ul><li>UX 전문가 피드백 기반 모바일 최적화<ul><li>커뮤니티(네이버 부스트캠프)에서 현직 프론트엔드 개발자에게 UI,UX 피드백 요청</li><li>문제 : 모바일 환경에서 버튼 롱클릭 시, UX를 해칠 것 같단 피드백을 받음</li><li>해결 : CSS의 -webkit-touch-callout 설정을 None으로 설정</li><li>성과 : 모바일 사용자경험 개선</li></ul></li><li>카카오 맵 react-sdk기반 커스텀 맵마커 컴포넌트 구현<ul><li>문제 : 기존 맵마커 컴포넌트의 경우, 길찾기 기능이 없음</li><li>해결 : 길찾기 기능이 들어간 커스텀 컴포넌트 구현</li><li>성과 : 길찾기 기능을 통해, 사용자가 편의시설들을 쉽게 찾아갈 수 있게 됨</li></ul></li><li>스토리 좋아요 디바운스 기능 구현<ul><li>문제 : 인스타 스토리 기능중 좋아요 버튼을 계속누르면 요청이 계속되는걸 확인</li><li>해결 : 스토리 좋아요 관련 디바운스기능을 추가</li><li>성과 : 3초간의 요청들을 한번에 묶어 처리해 서버 부하 1/3로 최적화</li></ul></li></ul></li></ul>

제주 한달살이 도움 사이트 (제주도랑)

<ul><li>프로젝트 : <a target="_blank" rel="noopener noreferrer nofollow" href="https://github.com/BeyondPong/Frontend">https://github.com/BeyondPong/Frontend</a></li><li>역할 : 프론트엔드, 전체 팀 팀장</li><li>사용기술 : Vanilla Javascript, Bootstrap, Docker, Socket, three.js, canvas api</li><li>주요성과<ul><li>언어 선택기능을 구현해 해외유저도 사용이 가능하도록 개선<ul><li>문제 : 사용자 중 해외국적의 유저도 있음을 확인</li><li>해결 : 단어를 배열로 관리하여 다중언어기능 구현</li><li>성과 : 다양한 국적의 사용자들이 이용할 수 있게됨</li></ul></li><li>키보드 focusable기능을 통한 유저 접근성 개선<ul><li>문제 : 게임 종료 후 , 마우스를 클릭하는것이 불편하다는 피드백을 받음</li><li>해결 : tabInex옵션을 통해 키보드 포커스 기능 추가</li><li>성과 : 사용자가 키보드만으로도 모든조작을 할 수 있게 됨</li></ul></li></ul></li></ul>

온라인 탁구 게임사이트 (비욘드퐁)

<ul><li>역할 : 프론트엔드 개발팀원</li><li>수상 : 대상</li><li>사용기술 : React, Styled Component, Context API</li><li>주요성과<ul><li>모든 버튼에 Hover 테스트<ul><li>문제 : 기존 사이트에선 호버기능이 없는 버튼들이 존재</li><li>해결 : UX개선을 위해, 모든 버튼,요소들에 호버테스트를 하고 기능을 추가함</li><li>성과 : 사용자가 어디를 가리키고있는지, 확실히 알 수 있게됨</li></ul></li><li>420장의 차량 이미지 프리로딩과 WebP 포맷 적용으로 페이지 로딩 시간 66% 단축 (3초 -&gt; 1초)<ul><li>문제 : 360도 회전 이미지를 가져오는 과정에서 렌더링까지 3초 소요</li><li>해결 : 이미지 프리로딩 기능을 추가해 이미지를 미리 가져오도록함</li><li>성과 : 페이지로딩시간을 3초에서 1초로 단축시켜 사용자 이탈율을 낮춤</li></ul></li><li>Context API를 활용한 차량 옵션 상태 관리로 복잡한 상태 로직을 효율적으로 구현<ul><li>문제 : 기존 코드의 경우 다양한 상태들이 상위 컴포넌트에 나뉘어져 있었음</li><li>해결 : Context API를 통해 전역으로 상태들을 관리</li><li>성과 : 복잡한 로직을 개선</li></ul></li></ul></li></ul>