미리보기
기본 정보
지속적인 학습과 긍정적인 사고를 지향합니다. 커뮤니케이션을 통해 요구 사항을 명확히 정의하고, 프로젝트 전반에 걸쳐 완성도 높은 제품을 만드는 데 주력합니다. 이를 위해 퇴근 후에도 개발 관련 서적과 알고리즘 스터디를 지속적으로 진행하고 있습니다.
기술 스택
경력
(주)이룸기술
사원 • 개발팀
Angular2 프레임워크를 활용해서 대구 상수관망 디지털 트윈과 재난 안전 프로젝트의 FE를 개발했습니다.
API 약 100개 가량 연동
시각화 데이터를 Apache Echarts 라이브러리 통해서 약 30개 그래프로 시각화
Three.js + Google Maps API 연동 작업을 통해 구글 스트리트 뷰에서 3D 입체 관료 표시
GIS 데이터를 활용해서 지도에 마커(계측기), 폴리곤(구역), 폴리라인(관로) 표시
i18n 다국어 지원 기능 추가
ReactJS 프로젝트를 => Angular2로 점진적 마이그레이션
두 서비스 모두 시작 단계에서 합류해 기획/디자인 레벨까지 참여하여 폭넓게 기여
(1년 5개월 | 정규직)
주식회사미다웍스(MidaworksCo. Ltd.)
사원 • 개발팀
SI 업무와, 자체 솔루션(랜딩페이지 제작 툴 및 DB 관리 솔루션)의 개발 및 유지보수를 담당하였습니다.
회사 메인 페이지 제작
프론트엔드 개발 담당 (HTML, CSS, Jquery)
렌트카 사이트 제작
관리자 페이지 기능 추가 (PHP)
펜션 예약 사이트 제작
프론트엔드 개발 담당 (HTML, CSS, JavaScript, jQuery)
고객사의 DB 조회 속도를 10분에서 11초로 대폭 개선(서브쿼리=>조인쿼리)
백업 및 삭제 요청 관련 컴플레인 80% 감소
리스트 UX 개선
기존 페이지네이션을 무한 스크롤 방식으로 변경
(6개월 | 계약직)
프로젝트
개인
SK 가스맵 플랫폼
GasMap 플랫폼은 위치정보와 이동식 가스 감지기를 활용하여 가스 유출을 실시간으로 모니터링하고 GIS 기반 히트맵을 통해 시각화하는 시스템입니다.
Angular + IndexedDB(Dexie.js) 를 활용해서 개발했습니다.
프론트엔드 개발자로서 GIS 기반 가스 감지 모니터링 시스템을 구축하는 역할을 담당했습니다.
1) Google Maps API를 활용한 지도 시스템 구축
구글 지도를 연동하여 가스 감지기 데이터의 위치 정보 시각화
지도상에서 감지기 클릭 시 세부 정보 팝업 표시
2) 실시간 가스 유출 히트맵 개발
구글 지도 기반의 실시간 히트맵을 구현하여 가스 유출 범위를 시각적으로 표현
1초마다 가스 감지 데이터를 업데이트하여 변화 감지 가능
날씨 API 연동하여 풍향 및 풍속 반영
3) 데이터 필터링 및 검색 기능 개발
특정 가스 종류(H₂S, HC 등) 및 지역 필터링 기능을 추가하여 사용자 편의성 강화
감지기별 상태(정상, 경고) 필터링 기능 구현
4) 실시간 경보 및 이벤트 로그 기능 추가
일정 농도 이상 감지 시 경고 알림 및 시각적 변화 적용 (붉은색 강조)
감지 이력 로그 저장 및 조회 기능 구현
(주)이룸기술
대구 상수관망 디지털 트윈
상수도 계측기와 설비를 실시간으로 모니터링하고, 데이터 시각화를 통해 누수, 수질 이상 등 문제를 신속히 파악하여 대응할 수 있는 종합 관리 솔루션
기존 React 소스 코드를 Angular 코드 베이스로 점진적으로 이관
디자인 및 퍼블리싱을 담당하여, 사용자 인터페이스(UI)와 사용자 경험(UX)을 최적화
구글 스트리트 뷰와 Three.js 연동하여 입체 관로 구현
계측기 수집 데이터를 그래프로 시각화
약 20종의 다양한 수질 데이터 세트를 분석 및 시각화.
구현한 그래프 종류: 선 그래프, 막대 그래프, 멀티 축 선형 그래프, 파이 그래프, 캔들 스틱 그래프
성과: 시각화 결과물은 고객 요구에 맞추어 커스터마이징하여 보고서 및 발표 자료에 활용, 데이터 인사이트 도출에 기여.
지도 라이브러리 성능 비교 분석 및 구글 지도 API 연동
관련하여 작성한 블로그 포스트: https://velog.io/@jujini31/왜-구글지도로-갈아탔나-네이버지도와-구글지도-성능-비교
지도에 계측기, 관로, 구역 데이터를 마커, 폴리라인, 폴리곤으로 시각화
구글 스트리트 뷰와 Three.js 연동하여 입체(3D) 관로 및 빌보드 표시
프로젝트에 다국어 지원(i18n) 추가
기존에 사용하던 moment.js를 day.js로 변경하여 프로젝트 번들 사이즈 최적화
지도에 다량의 마커로 인해 발생하는 버벅임 문제를 해결하기 위해 마커 클러스터링 기술을 적용
API 통신 대기시간에 로딩 스피너를 추가하여 사용자 경험을 개선하였고, 이에 대해 QA 팀으로부터 긍정적인 피드백을 받았습니다.
관련하여 작성한 블로그 포스트: https://velog.io/@jujini31/사용자-경험을-생각한-지도-개발-NAVER-지도-API-V3-마커폴리라인
(주)이룸기술
재난안전
수질 관련 데이터를 실시간 모니터링하고, 그래프로 시각화하여 제공하는 서비스 재난안전 서비스
수질 데이터 그래프로 시각화
구현한 그래프: 멀티 축 선형 그래프(관련하여 작성한 codepen link: https://codepen.io/ilewwgco-the-selector/pen/WNqNjRE)
스와이퍼 웹 컴포넌트 형태로 Angular 에 적용 및 커스터마이징
Angular + 순수 Cordova를 사용한 앱 개발
자기소개
저는 가독성이 좋고 지속 가능한 코드를 작성, 그리고 문제 해결을 잘 하는 개발자가 되고 싶습니다.
사용자가 선호하는 제품을 함께 만들고자 지원했습니다. 요구사항을 전달받으면 최대한 구체화하고 여러 시각으로 문제를 분석하며, 문제점이 있으면 이를 해결하려고 노력합니다. 개인과 회사의 성장을 위해 꾸준히 공부하며, 최신 트렌드와 기본 개발 실력을 키우기 위해 노력합니다. 이러한 노력이 제품 발전에 큰 기여를 할 수 있다고 믿습니다.
[노력과 성장]
출퇴근길에 꾸준히 독서를 통해 개발 관련 지식을 습득하고 있습니다(월 1권 이상). 현재는 'You Don't Know JS Yet'라는 책을 읽고 있으며, 문제 해결 과정을 블로그에 기록하여 추후에 참고할 수 있도록 하고 있습니다(참고 블로그: https://velog.io/@jujini31/posts). 지시를 받을 때는 구체적인 질문을 통해 요구사항을 명확히 하려 노력하고, 빠르게 작성한 코드도 추후 리팩토링과 성능 개선을 통해 유지보수와 지속 가능성을 높이려고 합니다.
예를 들어, 지도 API 어댑터 패턴 코드를 추가하여 Google Maps API의 주요 객체들을 개별 클래스로 확장하였습니다. 어댑터 패턴을 사용해 네이버 지도나 카카오 지도로 변경되었을 때 확장할 API만 수정하여 전체 프로젝트에 쉽게 반영할 수 있도록 유지보수성을 향상시켰습니다.
[문제 해결 접근 방식]
복잡한 문제를 해결할 때는 우선 문제를 명확히 이해하는 것을 1순위로 하고, 이를 세분화하여 하위 문제들을 만듭니다. 하위 문제들에 대한 해결 방법을 수립한 후, 최종적으로 전체 문제를 해결합니다. 이후 문제 해결 여부를 다양한 방식으로 테스트하고 검증합니다.
한 프로젝트에서 구글 스트리트 뷰와 Three.js를 통합하여 특정 좌표계에 위치한 요소를 가시화하는 작업 중, 카메라 설정 동기화 문제를 해결하기 위해 OpenGL의 기초 개념을 이해하고, 카메라 시야(FOV), 카메라 높이, StreetView 줌 설정 등 3가지 문제로 세분화하여 해결했습니다. 이로 인해 요소가 정확하게 표시될 수 있었습니다.
관련하여 작성한 블로그 포스트:
[실패 경험과 교훈]
일정에 쫓겨 급하게 작업을 하던 중, A 방식으로 진행하기로 한 작업을 임의로 B 방식으로 변경한 적이 있었습니다. 이로 인해 작업 내용 설명에 차질이 생겼고, 이러한 행동이 팀워크를 망칠 수 있다는 점을 깨달았습니다. 이후 작업할 때는 반드시 작업 내용을 공유하여 팀원들과의 소통을 강화하고, 팀워크를 유지하는 데 주력하고 있습니다.
[협업 과정에서의 문제 해결]
사내 프로젝트 진행 중, 여러 명의 프론트엔드 개발자가 작업하면서 코드 스타일과 구조가 일관되지 않아 유지보수성이 떨어지는 문제가 발생했습니다. 이를 해결하기 위해 팀 내 코드 스타일 가이드를 제안하고, Prettier를 도입하여 모든 팀원이 동일한 코드 스타일을 유지하도록 했습니다. 코드 리뷰 과정에서도 가이드에 맞지 않는 부분을 쉽게 발견하고 수정할 수 있었습니다.
탭 간격 설정 (
tabWidth): 팀의 코드에서 들여쓰기를 일정하게 유지하기 위해 Prettier에서 탭 간격을 2로 설정하였습니다.Prettier에서
tabWidth를 2로 설정하였습니다.
세미콜론 사용 (
semi): 코드에서 세미콜론 사용 여부를 통일하기 위해 Prettier 설정에서 이를 사용하도록 강제하였습니다.Prettier에서
semi옵션을true로 설정하여 모든 구문 끝에 세미콜론을 일관되게 사용하도록 했습니다.
따옴표 스타일 (
singleQuote): 코드 내 문자열에서 단일 따옴표 사용을 통일했습니다.Prettier에서
singleQuote를true로 설정하여 문자열에 단일 따옴표를 사용하도록 통일했습니다.
이처럼, 저는 지속적인 성장과 발전을 추구하며, 팀과 함께 협력하여 더 나은 결과를 만들어가고자 합니다. 변화에 유연하게 대응하며 새로운 도전에 겁내지 않고 항상 최선을 다해 노력하겠습니다.
포트폴리오
교육
영진전문대학교
대학교(전문학사) | 컴퓨터정보계열
2019.03. ~ 2024.02.
졸업
조일로봇고등학교
고등학교 | 로봇콘텐츠
2017.03. ~ 2019.02.
졸업
대외활동
국제기능올림픽대회 한국위원회
제 52회 전국기능경기대회 웹디자인 및 개발 장려상
제 52회 전국기능경기대회 웹디자인 및 개발 부문에서 90명 중 11위로 입상하였습니다.
대회 내용: 주어진 주제에 맞는 사이트 제작
개인 작업 분야: 웹 디자인, 퍼블리싱, 프론트엔드, 백엔드 모두 개발
평가 방식: 결과물 시연 후 객관적 및 주관적 항목을 채점하여 순위 결정
2017
대구광역시 기능경기위원회
대구광역시 지방 기능경기대회 웹 디자인 및 개발 동메달
대구광역시 지방 기능경기대회 웹 디자인 및 개발 부문에서 30명 중 3위로 입상하였습니다.
대회 내용: 주어진 주제에 맞는 사이트 제작
개인 작업 분야: 웹 디자인, 퍼블리싱, 프론트엔드, 백엔드 모두 개발
평가 방식: 결과물 시연 후 객관적 및 주관적 항목을 채점하여 순위 결정
2017
조일로봇고등학교
조일로봇고등학교 웹 개발 동아리
조일로봇고등학교 웹 개발 동아리 활동
내부 개발 대회 개최: 여러 고등학교를 방문하여 내부적으로 개발 대회를 개최하고 참여하였습니다.
멘토링 활동: 후배들에게 개발 과제를 주고 멘토링을 진행하였습니다. 졸업 후에도 1~2년간 멘토링 프로그램을 지속하였습니다.
대회 준비 및 자격증 취득: 지방 및 전국 기능경기대회를 준비하였으며, 정보처리기능사와 웹디자인기능사를 취득하였습니다.
기술 습득: HTML, CSS, JavaScript, JQuery, PHP를 배우고 활용하였습니다.
장애인 기능경기대회 멘토링: 3년간 장애인 기능경기대회 선수들을 멘토링하는 활동을 진행하였습니다.
2017
자격증
정보처리산업기사
최종합격 | 한국산업인력공단
2023.06.
SQL개발자(SQLD자격)
최종합격 | 한국데이터베이스진흥센터
2023.07.
정보처리기능사
최종합격 | 한국산업인력공단
2017.02.
웹디자인기능사
최종합격 | 한국산업인력공단
2017.05.
전자출판기능사
최종합격 | 한국산업인력공단
2017.06.