채용공고 올리기

김영환님을 응원해보세요!

이직/구직 중이에요
성실함
책임감
유연함
커뮤니케이션
긍정적

미리보기

기본 정보

이름
김영환
직업
프론트엔드 개발자
이메일
rladudughks@gmail.com
간단 소개

스타트업 프론트엔드 개발과 SI 프로젝트 풀스택 개발 등 다양한 프로젝트를 진행해왔습니다. 외국인들을 대상으로 한국어 교육 플랫폼 앱들을 풀스택 개발부터 출시까지 진행해보았으며, 근래에 들어서는 프론트엔드 리드 개발자로서 팀원, 디자이너와 협업하여 디자인 시스템을 구축하여 재개발/재건축 조합에서 사용하는 플랫폼을 개발하였습니다. 디자인 시스템 도입, 아토믹 디자인 패턴 적용 등 여러 이슈들을 해결하기 위한 방법을 고민하고 적용하여 좋은 서비스를 만들기 위해 노력하고 있습니다.

기술 스택

기술 스택

JavaScript, TypeScript, React, Java, HTML/CSS, Spring, Spring Boot, Node.js, Next.js, Git, AWS, React Native, vercel, storybook, VSCode

경력

회사명

이제이엠컴퍼니

직급 | 부서 | 근무 유형

프론트엔드 리드 개발자 | 개발팀

근무 기간

2023.03. ~ 2025.01. (1년 11개월)

담당 업무

재개발/재건축 조합의 운영관리 플랫폼 서비스를 제공하는 스타트업입니다.

프론트엔드 팀의 팀원으로 처음 합류하여 조합 커뮤니티 ‘우리가’의 고도화와 레거시 코드를 재정비하였습니다.

프론트엔드 팀의 리드 개발자가 되어 디자인 시스템을 개발하였으며, 디자인 시스템을 바탕으로 조합 총회의 선거 관리 시스템, 조합 운영 관리 시스템, 고객 관리 시스템의 프론트엔드 개발을 진행하였습니다.

회사명

쿠바

직급 | 부서 | 근무 유형

대리 | 개발팀

근무 기간

2022.02. ~ 2023.01. (1년)

담당 업무

ETRI 등 기관 용역 사업을 주로 수행하는 기업입니다.

AI 머신러닝 기반의 연구 프로토타입 앱 개발 사업을 주로 담당하여, 학습된 모델을 안드로이드 기반에서 동작되도록 변환, 최적화하여 기능을 구현하여 납품을 성공적으로 진행하였습니다.

회사명

이르테크

직급 | 부서 | 근무 유형

대리 | 개발팀

근무 기간

2018.04. ~ 2021.07. (3년 4개월)

담당 업무

AI 기술을 기반으로 외국인들을 대상으로 한국어 교육 앱을 서비스하는 기업입니다.

국립국어원의 자연어 처리 데이터를 구축하는 소프트웨어 개발 사업을 시작으로 몇 가지 SI 사업을 처음 진행하였습니다. 그 후에는 솔루션 개발팀에 합류하여 외국인을 대상으로하는 한국어 교육 플랫폼 앱 개발을 진행하였습니다.

회사명

케이엘정보통신

직급 | 부서 | 근무 유형

근무 기간

2017.12. ~ 2018.04. (5개월)

담당 업무

대전교육정보원에 상주하여 운영/유지보수를 담당하였습니다.

프로젝트

프로젝트명

고객 관리 시스템 개발

소속/기관명

이제이엠컴퍼니

프로젝트 기간

2024.11. ~ 2025.01.

프로젝트 내용
Description

고객인 재개발/재건축 조합을 지원하고 관리하기 위한 회사 내부 시스템 개발 프로젝트입니다.

Experience
  • 기존 레거시 시스템 분석, UI/UX 개선하여 디자이너와 협업하여 재설계

  • Thymeleaf에서 React 기반으로 기술 스택 전환

  • 문자열 리소스 관리를 위한 react-i18next 기반의 문자열 공통 관리 모듈을 개발

  • 초기 로딩 최적화를 위해 코드 스플릿팅 최적화를 통해 초기 렌더링 속도 30% 이상 개선

Tech Stack

React Vite TypeScript MUI Storybook zustand React Query react-i18next

프로젝트명

조합 운영 관리 시스템 개발

소속/기관명

이제이엠컴퍼니

프로젝트 기간

2024.07. ~ 2024.11.

프로젝트 내용
Description

재개발/재건축 조합의 업무를 지원하기 위한 플랫폼 개발 프로젝트입니다.

Experience
  • 기존 레거시 시스템 분석, UI/UX 개선하여 디자이너와 협업하여 재설계

  • Thymeleaf에서 React 기반으로 기술 스택 전환

  • 공통 모듈 리펙토링으로 기술 부채 해소

  • 디자인 시스템 신규 컴포넌트 추가 개발

  • React Query 적용을 통하여 API 데이터 캐싱 및 성능 최적화

  • 조합원 명부 관리, 인증 등 기능 개발

Tech Stack

React Vite TypeScript MUI Storybook zustand React Query

프로젝트명

프론트엔드 인프라 이전

소속/기관명

이제이엠컴퍼니

프로젝트 기간

2023.12. ~ 2024.01.

프로젝트 내용
Description

서비스의 원활한 제공과 인프라 확장을 대비하여 인프라 이전 작업을 진행하였습니다.

Experience
  • NCloud에서 Vercel로 프론트엔드 인프라 이전 작업

  • AWS Route 53을 통해 도메인 연결 및 DNS 설정

  • Sentry, Datadog을 통한 프론트엔드 상태 모니터링 시스템 구성하여 장애 대응

  • Jira, Github Actions를 연계하여 CI/CD 구성하여 배포 효율성 개선

Tech Stack

Vercel AWS Sentry Datadog Github Jira

프로젝트명

디자인 시스템 개발

소속/기관명

이제이엠컴퍼니

프로젝트 기간

2023.12. ~ 2024.03.

프로젝트 내용
Description

원활한 협업과 일관성 있는 UI를 위해 디자인 시스템을 구축하는 프로젝트입니다.

MUI Joy 라이브러리의 디자인 철학을 기반으로 회사 고유한 디자인 시스템을 개발하였습니다.

Experience
  • 커뮤니케이션 간소화 및 오류 최소화, 일관성 있는 UI를 목적으로 설정

  • 개발 기간을 최소화하기 위해 MUI Joy 라이브러리를 기반으로 커스터마이징 구축

  • 스토리북을 통하여 컴포넌트 별 활용 가이드 문서 작업

  • 스토리북을 Chromatic 배포하여 버전 별 변경점 공유 및 시각적 테스트 자동화

Tech Stack

React TypeScript Vite Storybook Chromatic MUI Joy

프로젝트명

조합 총회 선거 관리 시스템 개발

소속/기관명

이제이엠컴퍼니

프로젝트 기간

2023.07. ~ 2023.11.

프로젝트 내용
Description

재개발/재건축 조합의 의사 결정 절차인 총회의 선거를 관리하기 위한 시스템 개발 프로젝트입니다.

Experience
  • 모노레포 프로젝트 구성, 공통 기능 및 컴포넌트 모듈화

  • 의존성 캐싱 적용을 통해  CI 시간 50% 이상 단축

  • 선거 명부 관리, 인증, 와콤 시그니처 패드 전자 서명 등 전반적인 기능 개발

Tech Stack

React TypeScript Vite MUI Storybook zustand

프로젝트명

조합 커뮤니티 사이트 개발/유지보수

소속/기관명

이제이엠컴퍼니

프로젝트 기간

2023.03. ~ 2023.12.

프로젝트 내용
Description

재개발/재건축 조합의 커뮤니티 사이트 '우리가' 개발 프로젝트입니다.

Experience
  • 조합의 커뮤니티 메인 페이지 검색 엔진(네이버, 구글) 최적화

  • 조합 커뮤니티 OG(오픈그래프) 적용

  • 조합 커뮤니티 ADMIN 신규 기능 개발

  • 회사/서비스 소개 페이지 개발

  • 소셜(kakao) 로그인 프론트엔드 부분 개발

  • 기술 부채 점진적 개선

Tech Stack

React TypeScript Vite Sass SSR Vike

프로젝트명

스마트단말용 객체기반 다시점 변환을 위한 서비스 SW 개발

소속/기관명

쿠바

프로젝트 기간

2022.07. ~ 2022.11.

프로젝트 내용
Description

사물의 이미지를 선택하여 해당 사물의 다른 방향의 형태를 추론하여 생성하는 프로토타입 앱 개발 프로젝트입니다.

Experience
  • 이미지 선택 기능 개발

  • 다시점 추론 모델을 안드로이드용으로 경량화 변환하여 이식

  • 추론 이미지 생성하여 표시

Tech Stack

Android kotlin pytorch python Anaconda

프로젝트명

TR 온/오프라인 프라이버시 서비스 개발

소속/기관명

쿠바

프로젝트 기간

2022.03. ~ 2022.08.

프로젝트 내용
Description

영상의 사물 인식 AI 모델을 통해 해당 사물을 비식별화하여 스트리밍하는 보안 솔루션에 대한 프로토타입 앱을 개발하는 프로젝트입니다.

Experience
  • 아이디/패스워드 인증 과정을 통해 고유의 보안 키를 발급

  • 카메라로 촬영된 영상을 비동기적으로 인물 얼굴, 개인 정보 등을 인식

  • 인식한 영역을 발급된 시크릿 키로 비식별화

  • 비식별화된 영상을 스트리밍 전송

  • 서버에 저장된 고유의 보안 키로 비식별화된 영상을 복호화하는 WPF 앱 개발

Tech Stack

Spring boot JAVA MySQL MyBatis Android WPF C# OpenCV Tensorflow

프로젝트명

KOKOA 앱 개발

소속/기관명

이르테크

프로젝트 기간

2021.01. ~ 2021.07.

프로젝트 내용
Description

한국어 학습을 희망하는 외국인을 대상으로 B2C 서비스 플랫폼 앱을 개발하는 프로젝트입니다.

한국어 단어, 대화, 발음 연습 등을 콘텐츠로 제공합니다.

Experience
  • React-native 앱 및 REST API 풀스택 개발

  • JWT(Access, Refresh) 인증 개발

  • API Message 처리 구현(i18n 적용)

  • Firebase Cloud Messaging을 통한 앱 푸시 API 개발

  • GCP speech-to-text 및 회사 자체 솔루션을 통한 한국어 발음 평가 기능 개발

  • AWS EC2, EFS, 로드밸런서 구성/배포

  • react-i18next를 통한 앱 다국어 지원 설계

Tech Stack

Spring boot JAVA MySQL MyBatis React-native react-redux redux-saga AWS Firebase GCP Docker

프로젝트명

KOKOA for Speak & Talk 앱 개발

소속/기관명

이르테크

프로젝트 기간

2020.07. ~ 2020.09.

프로젝트 내용
Description

한국어 학습을 희망하는 외국인을 대상으로 서비스하는 앱입니다.

한국어 발음을 간단한 게임처럼 연습할 수 있는 콘텐츠를 제공합니다.

Experience
  • React-native 앱 및 REST API 풀스택 개발

  • JWT(Access, Refresh) 인증 개발

  • API Message 처리 구현(i18n 적용)

  • Firebase Cloud Messaging을 통한 앱 푸시 API 개발

  • GCP speech-to-text 및 회사 자체 솔루션을 통한 한국어 발음 평가 기능 개발

  • AWS EC2, EFS, 로드밸런서 구성/배포

  • react-i18next를 통한 앱 다국어 지원 설계

Tech Stack

Spring boot JAVA MySQL MyBatis React-native react-redux redux-saga AWS Firebase GCP Docker

프로젝트명

KOKOA 기관용 앱 개발

소속/기관명

이르테크

프로젝트 기간

2020.02. ~ 2020.06.

프로젝트 내용
Description

한국어학당 교육기관들을 대상으로 하는 B2B 서비스 플랫폼 앱을 개발하는 프로젝트입니다.

Experience
  • React-native 앱 및 REST API 풀스택 개발

  • JWT(Access, Refresh) 인증 개발

  • API Message 처리 구현(i18n 적용)

  • Firebase Cloud Messaging을 통한 앱 푸시 API 개발

  • GCP speech-to-text 및 회사 자체 솔루션을 통한 한국어 발음 평가 기능 개발

  • AWS EC2, EFS, 로드밸런서 구성/배포

  • react-i18next를 통한 앱 다국어 지원 설계

Tech Stack

Spring boot JAVA MySQL MyBatis React-native react-redux redux-saga AWS Firebase GCP Docker

프로젝트명

기분석 데이터 활용 형태소 분석 API 서버 개발

소속/기관명

이르테크

프로젝트 기간

2019.06. ~ 2019.09.

프로젝트 내용
Description

형태소 분석 로그 데이터를 통하여 형태소 분석을 진행하는 API 서버 개발 프로젝트입니다.

Experience
  • 분석 과정 설계/개발

  • 전 처리, 후 처리 설계/개발

  • 품질 테스트

Tech Stack

Spring boot JAVA MySQL Docker

프로젝트명

국어 말뭉치 구축 웹 플랫폼 개발

소속/기관명

이르테크

프로젝트 기간

2019.01. ~ 2019.03.

프로젝트 내용
Description

한국 자연어 처리에 필요한 말뭉치를 구축하기 위한 자체 솔루션 개발 프로젝트입니다.

Experience
  • ElasticSearch 색인 로직 개발

  • ElasticSearch 기본 검색 설계/개발

Tech Stack

Spring boot JAVA MySQL React ElasticSearch

프로젝트명

한국학중앙연구원 말뭉치 구축 사업

소속/기관명

이르테크

프로젝트 기간

2018.08. ~ 2018.12.

프로젝트 내용
Description

한국학중앙연구원의 SI 사업으로 자연어 처리에 필요한 한국어 말뭉치를 논문 PDF의 텍스트를 추출해서 구축하는 툴과 망뭉치 데이터를 납품하는 프로젝트입니다.

Experience
  • 기존 데이터베이스 마이그레이션(Access > MSSQL)

  • 말뭉치 구축 도구 프로세스 설계

  • 구축 도구 설계/개발

  • ElasticSearch 색인 기능 개발

  • ElasticSearch 기본 검색 기능 개발

Tech Stack

C# WinForm MSSQL Access ElasticSearch

프로젝트명

국립국어원 국어 말뭉치 구축 지원 도구 개발/유지보수

소속/기관명

이르테크

프로젝트 기간

2018.04. ~ 2019.12.

프로젝트 내용
Description

국립국어원의 SI 사업으로 자연어 처리에 필요한 한국어 말뭉치를 구축하는 툴의 개발/유지보수를 진행하는 프로젝트입니다.

Experience
  • 한밭대 협업 기능(음석 묵음 탐지 및 음성 파일 분할) 연동 및 품질 테스트

  • 구축 도구 유지보수 및 추가 기능 개발

Tech Stack

C# WinForm MySQL

교육

소속/기관명

대전보건대학교

종류 | 전공

대학교(전문학사) | 바이오정보

재학 기간 | 재학 상태

2012.03. ~ 2017.02. | 졸업

소속/기관명

명석고등학교

종류 | 전공

고등학교

재학 기간 | 재학 상태

2009.03. ~ 2012.02. | 졸업

자기소개

자기소개

코드 품질을 개선하기 위해 아토믹 디자인 패턴 적용

프로젝트 규모가 점차 커짐에 따라 코드 품질은 지속해서 저하되었습니다. 커뮤니케이션의 오류로 쌓이면서 중복된 컴포넌트가 발생하여 재활용성이 감소하고, 코드 중복도 빈번해지는 상황이었습니다. 이를 개선하기 위해 더 확실한 컴포넌트 분류 기준이 필요하여 아토믹 디자인 패턴 도입을 결정하였습니다. 시작은 기초적인 규칙을 설정하고, 규칙을 토대로 작은 단위부터 분리하여 작성하였습니다. 적용이 진행됨에 따라 중복되는 컴포넌트가 없어지고, 컴포넌트의 단위에 따라 분류되어 탐색도 간편해졌습니다.

원활한 협업과 일관성 있는 UI를 위한 디자인 시스템 구축

여러 프로젝트를 동시 개발/유지보수를 진행하게 되면서 많은 커뮤니케이션이 자연스럽게 발생하게 되었습니다. 팀원들과 디자이너와의 지속적인 커뮤니케이션 속에서 발생하는 오류들로 UI의 일관성을 해치는 경우가 발생하기도 하였고, 그 부분들을 해결하기 위한 과정이 추가적으로 발생하였습니다. 자연스럽게 품질이 저하되고 개발 속도도 저하되는 악순환이 되었습니다. 이러한 이슈들을 해소할 방안으로 디자인 시스템을 도입하였습니다.

개발의 병목을 최소화하기 위한 개발 방식 도입

스타트업뿐만 아니라 어디에서든 개발은 항상 여유롭지 않습니다. 당연하게도 프론트엔드팀과 백엔드팀이 개발 병행은 필요한 일이었습니다. 원활하게 진행되기위해서 백엔드팀과 긴밀히 협력하여 API 스펙 문서 작성 라이브러리인 "Swagger"를 통하여 API 스펙을 사전 정의하고 스펙을 토대로 API가 개발되는 동안 프론트엔드팀은 Mock API를 작성할 수 있는 "MSW" 라이브러리를 기반으로 Mock API를 작성하여 개발이 백엔드 구현 상황에 종속되지 않도록 진행하여 개발 일정을 준수할 수 있었습니다.

댓글