미리보기

현재의 환경에서 필요한 인재가 되도록 노력을 하고 있습니다.

• 국가기관 이러닝 컨텐츠 개발 및 컨텐츠에 들어가는 인터렉티브 게임, 요소 개발.

• 기존 코드 템플릿을 객체지향적 및 ES6 표준으로 리팩토링함.

• 기존의 복잡한 자막 데이터 생성 과정을 간소화하는 유틸리티를 개발하여 작업 효율을 크게 향상시킴.

• [백오피스] 기존 php로 이루어진 코드관리용 게시판을 java+spring boot + thymeleaf로 마이그레이션.

• [백오피스] 사내 회의실 예약 시스템 구축 및 성능 개선.

• [백오피스] 사내 백오피스 프로젝트를 공통 적용가능한 통합인증모듈 개발.

이 외에도 사용자 입장에서 더 나은 UI/UX를 고려하며 불편할만한 점들을 종합하여 다방면에서 건의 및 개선하였습니다.

또한 같이 공부해볼만한 주제를 두고 팀원분들과 공유를 하며 함께 기술적인 성장을 하였습니다.

• 배경:

  • 기존 백오피스 시스템은 회의실 예약 시스템 외에 다양한 다른 백오피스 존재

  • 각 백오피스가 독립적인 로그인 시스템을 사용하여 불편함 발생

  • 팀장님으로부터 통합 인증 시스템 개발 요청 받음

• 고민과 해결 방안:

  • 초기 계획: SSO 방식으로 인증 체계 구축 시도

    • 문제: 타 프로젝트는 PHP, Node.js로 개발되어 SSO 도입 어려움

    • 팀원들과 논의 후 다른 방식 모색

  • 최종 방안: JWT 기반의 통합 인증 시스템 구축

    • 회의실 예약 시스템에서 사용 중인 JWT 기반 access token 확장

    • 사내 PC의 IP를 키값으로 사용하여 access token을 Redis에 저장

    • 타 프로젝트 root 도메인 접속 시, Redis에서 해당 IP를 확인하여 access token을 로컬 스토리지에 저장

    • IP가 없으면 로그인 페이지로 리다이렉트

• 사용 기술:

  • 서버: Java 8, Spring Boot, Redis

  • 인증 방식: JWT (JSON Web Token)

• 성과:

  • 통합 로그인 시스템 성공적으로 구축

  • 사내 모든 백오피스에서 일관된 로그인 경험 제공

  • 사용자 편의성 및 보안성 향상

이 통합 인증 시스템을 통해 회사의 백오피스 로그인 절차를 간소화하고, 사용자 편의성을 높이는 데 기여했습니다.

• 배경:

  • 기존 타 솔루션 도입 후 간헐적 오류 발생

  • A4용지로 수동 예약 관리 빈번

  • 팀장님과 논의 후 회의실 예약 시스템 자체 개발 결정

• 개발 환경 및 도구:

  • 운영체제: VMWARE에 설치된 Synology NAS

  • 사용 기술: Java 8, Spring Boot 2.7.10, JPA, Spring Security, MariaDB, Spring REST DOCS, JUnit5, Gradle

  • 프론트엔드: React, Typescript, React Hook Form

• 개발 과정:

  • 서버 개발: 비즈니스 로직 단위로 단위 테스트 작성, 3개월 내 완료

  • 프론트엔드 개발: 서버 개발과 동시 진행, React와 Typescript 사용

  • 동시성 문제 해결: 낙관적 락을 적용하여 성능 문제 최소화

  • 비밀번호 수정 관련 인증 메일 발송 성능 개선: 비동기 로직을 이용하여 기존 메일 발송 4.x초에서 4.xms로 성능개선

  • 전체 예약 조회 쿼리 최적화: 기존 예약 조회 관련 쿼리를 fet join을 통하여 하나의 쿼리로 변경 기존 조회 성능의 30% 개선

  • 실시간 데이터 갱신 문제 해결: SSE(Server-Sent Events) 방식 도입으로 실시간 예약 표기

• 성과:

  • 4개월 만에 예약 시스템 완성 및 배포

  • 동시 예약 문제 해결

  • 실시간 예약 표기 문제 해결

이 시스템을 통해 회사의 회의실 예약 관리를 효율적으로 개선하고, 사용자 편의성을 높이는 데 기여했습니다.

• 배경: 첫 직장에서 반복적이고 시간이 많이 소요되는 자막 작업 수행

  • 영상 대본의 스크립트를 받아 일일이 복사, 붙여넣기 작업 필요

• 해결 방안: 웹 툴을 개발하여 자막 작업 자동화

  • 개발 내용: 스크립트를 자동으로 자막 파일로 변환하는 웹 툴 제작

  • 사용 기술: JavaScript, HTML, CSS 등

• 성과:

  • 기존 작업 시간 20~30분에서 10분으로 단축

  • 업무 효율성 대폭 향상 및 반복 작업으로 인한 피로 감소

이 경험을 통해 반복적인 작업을 자동화하여 업무 효율성을 높이는 데 기여했습니다.

프로젝트 템플릿 ES6로 개선

• 배경: IE 브라우저 지원으로 인해 기존 프로젝트를 ES6로 구성

• 해결과정

  • IE 서비스 종료 이후, 팀장님의 제안으로 ES6로 개선 작업 진행

  • 단순히 ES6로의 개선뿐만 아니라 절차 지향 코드를 객체지향으로 모듈화

  • 결과: 6개월간의 작업 후 ES6로 전환

기존 템플릿 리팩토링

• 문제 인식:

  • 공통 템플릿의 최초 생성 시기 및 관리 문제 인식

  • 공통 코드가 여러 파일에 분포, 난잡한 구조

  • 과도한 이미지 사용으로 인해 페이지 로딩 속도 저하

• 리팩토링 계획 제안 및 승인:

  • 팀장님께 문제 상황 설명 및 리팩토링 계획 제안

  • 팀장님의 동의 후 리팩토링 작업 시작

• 리팩토링 작업:

  반복된 코드 제거

  • 반복된 코드를 하나의 파일에 모아 모듈화

  • 예: 쿠키 적용 및 가져오는 비즈니스 로직을 하나의 모듈로 통합

  2. 이미지 최소화

  • 디자인팀과 협의하여 이미지 용량 축소 및 webp 확장자로 변경

• 성과:

  • 리팩토링 후 렌더링 속도 약 50% 개선 (5.x초에서 2.x초로 감소)

• 문제 상황: Github와 같은 버전 관리 시스템을 도입하지 못함

  • 대표님의 지시에 따라 Git 도입 불가

  • 폴더별 버전 관리 방식 사용으로 인해 버전 관리의 비효율성 발생

• 해결 방안: 사내 코드 관리용 게시판 시스템 구축

  • 초기 제안: Git 도입 제안 (불수용)

  • 대안: Git과 유사한 사내 코드 관리용 게시판 개발

  • 사용 기술: Java 8, Spring Boot, Spring Security, JPA, MariaDB, Thymeleaf

• 개발 과정:

  • 버전별 카테고리 분류

  • 해당 버전의 소스코드를 전체 다운로드 또는 개별 다운로드 기능 구현

  • 3개월간의 개발 끝에 시스템 구축 완료

프로젝트 총괄 개발

• 각 국가기관별 1년 단위 프로젝트 총괄 개발 담당

• 매년 다양한 기관별 프로젝트 수행 경험 다수

• 여러 국가기관을 대상으로 이러닝 콘텐츠 개발 및 배포

문제 해결 사례

1. 진도율 통신 오류 해결

• 특정 국가기관의 LMS 간 진도율 통신 오류 발생

  • 문제 상황: 고객의 학습 완료 후에도 진도율이 100%로 표시되지 않음

  • 원인 분석: LMS 개발자와 회의를 통해 shaka player 라이브러리 문제로 확인

  • 원인: 영상의 끝 부분(99분 99초 999ms)을 인식하지 못함

  • 해결 방법: video ended 이벤트 대신 timeupdate 이벤트를 사용하여 문제 해결

  • 결과: 학습자들의 불편함 해소

2. 다양한 모바일 기기 대응

• 이러닝 콘텐츠의 PC 및 모바일 반응형 적용 프로젝트

• 문제 상황: 갤럭시 폴더를 접은 상태에서 학습 시 반응형이 깨져 학습 불가

• 문제 분석: @media 쿼리로 분기 처리의 비효율성 인지

• 해결 방법: 콘텐츠 크기와 반응형 기기 값의 계산을 통해 scale 값으로 처리 후 위치 조정 계산 값 도입

• 결과: 다양한 기기에서도 정상적인 학습 가능

인터렉티브 및 게임 요소 개발

• 다양한 기관에서 인터렉티브 및 게임 요소 개발 및 적용 경험

• 초기: PC에서만 적용 가능

• 개선: 사용자 제안을 반영하여 모바일 기기에서도 인터렉티브 및 게임 요소 경험 가능하도록 개발

이와 같은 다양한 프로젝트와 문제 해결 경험을 통해 능숙한 문제 해결 능력과 사용자 중심의 개발 역량을 키웠습니다.