프론트엔드 개발자

손준호

끊임없이 고민하고 개발할 수 있는 환경을 좋아합니다. 사용자 관점에서 보다 친화적인 UI/UX를 적용해보고자 디자인 공부도 병행하고 있습니다. 또 FE에 적용해 보고 싶은 것이 있다면 꾸준히 동료들과 공유하는 습관을 가지고 있습니다. 단순히 기능을 완성하는 것이 아니라 지속적으로 고민하여 사용자 경험을 극대화 시킬 수 있는 개발자로 성장하고 있습니다.

성실함

책임감

협업 지향

비전 지향

고객 중심

<ul><li>초록우산 어린이재단 캠페인 홍보 활동</li><li>오프라인 교육 행사 지원</li><li>봉사 활동</li></ul>

그린라이터

홍보대사

정보처리

리눅스마스터

웹디자인

컴퓨터그래픽스운용

Github

블로그

포트폴리오

고객사의 기존 법무시스템을 재구성하여 개발 진행<h4>계약 검토 페이지 제작</h4><ul><li>표준계약서 Word 문서를 업로드하여 웹상에서 계약서를 작성할 수 있게 개발<ul><li>미리보기를 통해 변경된 항목들을 직관적으로 확인 가능</li></ul></li><li>계약서 변동 트래킹을 위해 변경 이력 추가</li><li>계약 프로세스 진행 도중 <code>전자서명 연동</code> 개발</li><li>계약 프로세스 및 UI는 고객사의 요구사항에 맞게 개발</li><li>해외 법인 대응을 위해 <code>4개국 다국어</code> 언어 대응을 제공</li><li>계약검토 진행시 로펌 및 변호사에게 이벤트 메일을 발송하는 메일 서비스 구현</li><li>한번의 계약서 작성으로 다수 업체와 계약을 진행할 수 있는 대량계약 구현</li></ul><h4>사용자 캘린더 개발</h4><ul><li>계약검토, 법률자문, 송무, 법무 프로젝트, 지식재산권 일정 연동</li><li>개인 일정 추가 기능 개발</li><li>일정을 표시하는 UI 커스텀 가능하도록 개발</li><li>라이브러리: <code>FullCalendar</code></li></ul><h4>외부로펌 코멘트 모달 개발</h4><ul><li>계약 진행중 외부 변호사와 소통할 수 있는 코멘트 개발</li><li>양식 및 첨부파일 템플릿화 진행하여 메일 발송 개발</li><li>외부 로펌에서 회신 온 메일 내용 코멘트 자동 등록 및 메일 미리보기 개발</li><li>타임라인, 표, 채팅 방식 <code>3가지</code>형태의 보기 타입 개발</li><li>1분마다 <code>자동 임시저장</code> 적용</li></ul><h4>외부로펌 코멘트 모듈화 작업</h4><ul><li>계약검토, 법률자문, 송무, 법무 프로젝트에 적용</li><li>코멘트 작성시에 사용된 컴포넌트를 커스텀하여 다양한 페이지에 활용 가능하도록 함<ul><li>개별 모듈 개발(메일 발송, 안내 문구, 버튼, 자동 완성, 자동 임시저장)</li></ul></li><li>결합도는 낮고 응집도를 높여 재사용성이 높도록 구현</li></ul><h4>계약 검토 개선 및 유지 보수</h4><ul><li>계약 검토, 체결 계약 조회 쿼리 튜닝<ul><li>10초에서 <code>3초 이내</code>로 단축</li></ul></li><li>서명 방식 및 서명자 UI, 저장 로직 개선</li><li>API 캐싱 최적화를 위해 React-query를 도입</li><li>대량의 문서 생성 로직 비동기처리하여 사용자 경험 개선<ul><li>사용자가 종료될때까지 무한정 대기해야하는 문제 제거</li></ul></li></ul><h4>기능 요구사항 분석 및 설계</h4><ul><li>계약 검토 프로세스 분석하여 모호한 부분 명확하게하여 문서화 진행 및 개발 가이드 진행<ul><li>추가 데이터 및 프로세스가 필요한 부분 고객사에 역제안</li></ul></li></ul><ul><li>WBS 기반 개발 일정 관리 진행</li><li>각 기능별 단위테스트 진행 및 이슈 대응 총괄</li></ul>기술 스택: <code>React</code> <code>TypeScript</code> <code>React-query</code> <code>Express.js</code> <code>Zustand</code> <code>SCSS</code> <code>MySQL</code> <code>Docker</code>

현대모비스 법무시스템 구축

고객사 법무팀에 법무시스템을 신규 도입<h4>공문 발행 페이지 개발</h4><ul><li>사용자가 원하는 공문의 양식으로 만들어질 수 있게 개발<ul><li>각 회사별 별도의 템플릿, CI 이미지, 인감 유동적으로 대응할 수 있게 제공</li></ul></li><li>고객사 그룹웨어 결재시스템 연동</li><li>각 회사별 공문을 관리할 수 있도록 제작</li><li>사용자 편의성 개선<ul><li>공문 문서 재생성 기능 제공</li></ul></li></ul><h4>지식재산권 페이지 개발</h4><ul><li>상표ㆍ특허ㆍ비용에 따른 별도 UI 구성</li><li>Card 컴포넌트 적용</li><li>기능 가이드 문서화 진행</li></ul><h4>공통 모듈 개발</h4><ul><li>고객사별 AWS S3 보안정책에 따른 파일 불러오는 방식 유연하게 대응 가능하도록 개발</li><li>Card 컴포넌트 신규 개발하여 재사용성이 높은 컴포넌트로 구현</li></ul>기술 스택: <code>React</code> <code>TypeScript</code> <code>Express.js</code> <code>Zustand</code> <code>SCSS</code> <code>MySQL</code> <code>Docker</code>

무신사 법무시스템 구축

기존 UI를 사용자 친화적으로 개선하고 기존 레거시 코드들을 유지보수가 용이하게 리뉴얼 작업 진행<h4>검토의견 개발</h4><ul><li>검토의견을 <code>3가지</code> 형태의 보기로 제공<ul><li>채팅, 타임라인, 표 방식</li></ul></li><li><code>자동 임시저장</code> 기능 도입</li><li><code>기본 템플릿</code> 적용 옵션 추가 및 <code>에디터</code> 도입</li><li>계약검토, 법률자문, 송무, 법무 프로젝트에 적용</li><li>디자이너와 협업하여 UI 재구성</li></ul><h4>공통 모듈 개발</h4><ul><li>결합도는 낮추고 응집도가 높게 재사용성이 높은 컴포넌트 개발<ul><li>버튼, 파일 업로드, 체크박스, Select Box, 문서 뷰어, 자동 완성</li></ul></li><li>각 기능별 UI 입력 양식 모듈화 진행</li><li>공통 모달 개발:<ul><li>Alert, Confirm, Modal <code>3가지 형태</code>의 모달 개발</li><li>SweetAlert2를 참고하여 커스텀 진행하여 유연하게 사용 가능하도록 개발 진행</li></ul></li></ul><h4>유지보수</h4><ul><li>원활한 협업을 위해 TypeScript 도입</li><li>레거시 코드 청산 및 기존 비즈니스 로직 유지보수 진행</li><li>Lazy와 Suspense 적용으로 코드 스플리팅하여 청크 에러 개선<ul><li>운영배포시 변경된 청크를 새로 받아오도록 대응</li></ul></li><li>개발자의 생산성을 위해 Redux에서 Zustand로 변경<ul><li>많은 러닝커브를 요구하는 문제가 발생하였음</li></ul></li></ul>기술 스택: <code>React</code> <code>TypeScript</code> <code>Express.js</code> <code>Zustand</code> <code>SCSS</code> <code>MySQL</code> <code>React-query</code> <code>Axios</code> <code>Redux</code> <code>Docker</code>

Law.ai 개편

고객사에 신규 법무 시스템을 도입함<ul><li>사내 공문서를 보관 및 발행할 수 있는 공문 기능 개발<ul><li>공문 내용 Word/PDF 변환, 메일 발송, 품의, 공문 작성, 법인 관리 UI 화면 등의 기능 구현</li><li>인감 등록 연동</li></ul></li><li>계약 검토 기능 개발<ul><li>고객 요구사항에 따른 프로세스 커스텀화 진행</li><li>전자서명 및 인감 관리 대장 연동 진행<ul><li>DocuSign, ModuSign, 인감 관리 대장</li></ul></li></ul></li><li>다국어 대응 및 국가에 따른 UI 대응 작업 수행</li><li>WBS 기반 개발 일정 관리 진행</li><li>각 기능별 단위테스트 진행 및 이슈 대응 총괄</li></ul>기술 스택: <code>React</code> <code>JavaScript</code> <code>Express.js</code> <code>SCSS</code> <code>MySQL</code> <code>Axios</code> <code>Redux</code> <code>Docker</code>

야놀자 법무 시스템 구축

고객사에 법무 솔루션을 신규 구축 진행<ul><li>상표ㆍ특허ㆍ비용을 관리할 수 있는 지식재산권 개발 및 유지보수<ul><li>프로세스 커스텀 진행</li><li>기능 가이드 문서화 진행</li></ul></li><li>회사별 휴일을 관리 할 수 있는 휴일 관리 UI 개발 (기념일, 이벤트 등)<ul><li>연간 공휴일 자동으로 추가되는 기능 개발</li><li>사용자 캘린더에 연동하여 시안성 강화</li></ul></li><li>각 기능별 가이드를 제공하는 메뉴얼 관리 개발</li></ul>기술 스택: <code>React</code> <code>JavaScript</code> <code>Express.js</code> <code>SCSS</code> <code>MySQL</code> <code>Axios</code> <code>Redux</code> <code>Docker</code>

스마일게이트 법무 시스템 구축

React와 Express 학습을 위해 사이드 프로젝트 진행: 전국 음식점/관광지 정보 제공 및 리뷰 서비스<ul><li>Adobe XD를 이용하여 <code>웹 디자인</code> 진행</li><li><code>카카오 로그인</code> 연동</li><li>전국 음식점/관광지 통합검색 기능 개발<ul><li>한국관광공사 <code>Tour API</code> 연동 진행<ul><li>음식점/관광지 상세정보 보기 제공</li></ul></li></ul></li><li>전국 음식점/관광지 리뷰 및 평가 기능 개발<ul><li>리뷰 해시태그 빈도수를 이용하여 WordCloud 적용</li></ul></li><li>Swagger를 이용한 API 문서화 진행</li></ul><ul><li>기술 스택: <code>React</code> <code>SCSS</code> <code>Express.js</code> <code>MySQL</code> <code>OAuth 2.0</code> <code>Tour API</code></li></ul>

FoodTour 서비스 개발

온라인 창업 교육 서비스에서 사용하는 비즈니스 로직을 개발<ul><li>본인이 수강중인 강의 대시보드 API 개발<ul><li>CRUD의 형태로 <code>ORM</code>을 사용</li></ul></li><li>강사와 수강생이 소통할 수 있는 게시판 API 개발</li><li><code>OAuth 2.0</code> 기반 카카오/구글 로그인 API 개발<ul><li>추가적인 소셜 로그인 도입 가능성을 대비하여 DB 테이블 설계 진행</li></ul></li><li>단위 테스트 코드를 작성하여 <code>테스트 자동화</code> 도입</li><li>Swagger를 이용하여 <code>API 문서화</code> 및 테스트 케이스 제공</li></ul>기술 스택: <code>React</code> <code>JavaScript</code> <code>Django Rest Framework</code> <code>PgSQL</code> <code>ORM</code> <code>TDD</code> <code>Docker</code> <code>Swagger</code>

1CUP 플랫폼 개발 및 고도화 작업

오프라인에서 에어소프트 서바이벌 게임을 진행하는데 중계를 해주는 서비스<ul><li>포토샵, XD를 이용하여 앱 디자인 및 프로토타입 제작:<ul><li>디자인시 Flat Icon 사용</li><li>디자인 벤치마킹을 위해 핀터레스트 활용</li></ul></li><li>서버 및 DevOps 환경 구축:<ul><li>NHN Toast Cloud를 이용하여 Docker, NGINX를 이용하여 서버 구축</li><li>GitHub Actions를 이용하여 CI/CD 구축 및 테스트 자동화 적용</li></ul></li><li>각종 화면 개발:<ul><li>소셜/일반 로그인 UI</li><li>스플래시 UI</li><li>방 리스트/입장/만들기/인게임 UI<ul><li>웹소켓을 이용하여 실시간 모니터링 가능</li></ul></li></ul></li><li>API 개발 및 문서화 진행</li></ul>기술 스택: <code>SwiftUI</code> <code>Redis</code> <code>Socket</code> <code>Django Rest Framework</code> <code>OAuth2.0</code> <code>NHN Toast Cloud</code> <code>CI/CD</code> <code>TDD</code> <code>Swagger</code> <code>NAVER MAP</code>

AirHelper 에어소프트 서바이벌

내일로 여행을 떠나는 사람에게 여행 플래너 및 정보 공유 서비스<ul><li>포토샵을 이용하여 각 페이지별 웹디자인 진행<ul><li>벤치마킹을 위해 핀터레스트와 굿디자인웹 참고</li></ul></li><li>각 페이지 개발<ul><li>공통 CSS 모듈화</li><li>카카오 로그인 API 연동</li><li>로그인/회원가입/마이페이지 개발</li><li>여행바구니 페이지 개발</li><li>카카오 맵을 연동하여 마커를 통한 플래너 작성<ul><li>한국관광공사, 기차정보 API 연동</li></ul></li><li>통합검색, 상세정보 페이지 개발<ul><li>한국관광공사 API 연동</li></ul></li></ul></li><li>모바일/PC 대응을 위한 반응형 적용</li></ul>기술 스택: <code>HTML/CSS</code> <code>JavaScript</code> <code>Tour API</code> <code>한국교통공사 API</code> <code>MySQL</code> <code>TOMCAT</code> <code>MVC</code> <code>KAKAO LOGIN</code> <code>KAKAO MAP</code> <code>JSP</code> <code>JAVA</code>

내일로 투어

B2B 법무시스템 개발 및 고도화<ul><li>계약검토/법률자문/송무/법무 프로젝트에 사용되는 <code>공통 모듈 5가지</code> 개발 및 공통화<ul><li>버튼, 파일 업로드, 라디오 버튼, 체크박스, PDF문서 뷰어</li></ul></li><li>Word 문서를 업로드하여 웹에서 계약서를 작성할 수 있는 표준 계약서 기능 개발<ul><li>법무팀 검토 없이 빠른 계약 진행이 가능하게 됨</li></ul></li><li>사용자 캘린더 UI 개발<ul><li>법무 업무 및 사용자 개인 일정 커스텀화 적용</li></ul></li><li>Suspense와 Lazy 적용<ul><li>신규 배포시 서비스 오동작 및 오류화면 표출되던 것을 개선함</li></ul></li><li>TypeScript 적용<ul><li>협업시 변수의 용도 이해 및 중복 생성으로 인해 적용함으로써 생산성 향상</li></ul></li><li>상표ㆍ특허ㆍ비용을 관리할 수 있는 지식재산권 기능 개발</li><li>공문서를 보관 및 발행하기 위한 공문 기능 개발</li><li>고객과 법무팀 간 검토 이력을 남길 수 있는 검토의견 기능 개발</li><li>계약검토 내 전자서명 로직 코드 리팩토링</li><li>디자인 개선을 통한 사용자 경험 개선 작업 수행</li><li>검토의견 기능의 불편한 점을 분석하여 UI 개선 작업 수행</li><li>DB 구조 변경 및 쿼리 튜닝</li></ul>

B2C 창업을 위한 온라인 교육 플랫폼(한컵) 개발 및 고도화<ul><li>Swagger를 이용한 API 기능 문서화 진행</li><li>TDD를 적용하여 단위 테스트 코드 작성 및 테스트 자동화 진행</li><li>수강생이 수강한 강의를 확인할 수 있는 대시보드 API 개발</li><li>OAuth2.0 기반 소셜 로그인 API 개발 및 DB 테이블 구축<ul><li>카카오, 구글</li></ul></li><li>강사와 수강생이 소통할 수 있는 게시판 CRUD API 개발</li><li>코드 중복 제거 및 리팩토링 작업 진행</li></ul>