미리보기

• 데이터 폼, 레이아웃 템플릿을 동적으로 생성하고 관리하여 웹 사이트를 손 쉽게 구축할 수 있는 SaaS 형태의 CMS 프로젝트를 기획, 개발, 운영관리 하고있습니다.
• 미디어 플랫폼 WebApp 프로젝트의 프론트엔드 개발 및 유지 보수 업무를 담당했으며, 실시간 채팅 및 중복 로그인 처리, 라이브 스트리밍 연동 등을 개발하였습니다.
• 사용자 경험(UX) 개선을 위해 고민하고 연구하고있으며, UX 개선을 위해 REST API의 에러 코드 규격화와 API 호출 에러 모니터링을 통해 에러를 신속하게 발견하고 수정하여 사용자가 에러를 마주칠 환경을 줄임으로써, 사용자 경험을 향상시키도록 R&D 하였습니다.
• SI 업무 경험을 통해 반응형 디자인과 웹 표준, 웹 접근성을 고려하며 개발 하고있습니다.
• 보다 나은 협업 환경을 위해 개발 컨벤션의 규약화, 코드 리뷰 의무화, 프로젝트 버전 관리 및 온보딩 작성, 이슈 추적 프로세스 환경을 구축하였습니다.

[소개]
데이터 폼, 레이아웃을 동적으로 생성하고 관리하여 코딩 없이 웹사이트를 생성하는 SaaS 형태의 CMS 프로젝트입니다.


[기술 스택]
typescript, nextjs, react, redux, styled-components


[업무 내역]

• 미디어 솔루션 프로젝트의 전체적인 기획 및 WBS 관리, FE 개발 담당
• Sentry 모듈 개발로 실시간 에러 추적 모니터링 시스템 구축
• 코드 컨벤션, Github Branch 전략 프로세스 구축 및 도입
• Next.js 초기 환경 셋팅 및 전체적인 기능 개발 담당
• 생성형 데이터와 레이아웃을 연결하는 데이터 링크 모듈 구현
• 키움페이 결제 시스템 연동 및 결제 스크립트 모듈화
• API 호출의 부하를 줄이고 연속된 이벤트 호출을 방지하기 위해 쓰로틀링과 디바운스 기능을 개발
• MUI 사용하여 어드민 페이지를 구축함으로써 개발 일정 및 예산 절감
• 사용자 경험(UX)을 향상 시키기 위해 라이트/다크모드 개발

[소개]
iHQ에서 서비스하는 숏폼 OTT 플랫폼의 프론트엔드 개발을 담당하였습니다.
앱 개발자와 협력하여 JavaScript Bridge를 활용해 네이티브와 통신하는 웹앱을 제작하였습니다.


[기술 스택]
javascript, nextjs, react, redux, styled-components, emotion, mqtt


[업무 내역]

• 프론트엔드 초기 셋팅 및 전반적인 화면 개발 담당
• Wecandeo 플랫폼과 m3u8 비디오 포맷을 이용한 라이브 스트리밍 플레이어 구현
• mqtt와 Sendbird api를 이용한 로그인 중복 체크 및 라이브 채팅 기능 구현
• 자바스크립트 브릿지를 이용한 WebView에서의 APP Api 연동 개발
• User-Agent를 이용한 디바이스 별 기능 최적화
• Vidmix API를 통해 스트리밍 및 비디오 광고 시스템을 연동하여 비즈니스 모델 구축
• Axios 인터셉터와 JWT 토큰을 사용하여 API 인증 가드 기능을 구현함으로써 페이지 접근 보호 모듈 개발
• Redux 초기 셋팅 및 스토어 디자인
• API 응답을 경량화하고 인피니티 스크롤 및 Skeleton-UI를 적용하여 페이지 로딩 및 렌더링 속도를 평균 5초 -> 1초대로 80% 개선
• SSR 방식을 적용하고 Meta tag, Google Search Console, Naver Search Advisor를 통해 검색 엔진 크롤링과 노출을 극대화하여 SEO를 최적화
• Google, Apple, Naver, Kakao 소셜 로그인 연동

[소개]
블랙 클로버 모바일 게임의 프로모션 사이트 프론트 개발을 담당하였습니다.


[기술 스택]
typescript, nextjs, react, redux, styled-components


[업무 내역]

• 페이지의 전반적인 화면 개발 및 유지보수
• Google Analytics, Meta Business, TikTok Business 등 사이트 추적 통계 시스템 연동 및 관리
• 메타 태그 최적화, 소셜 미디어 콘솔 연동, 그리고 Lighthouse를 이용한 웹 표준 점수 최적화를 통해 검색 엔진 최적화
• 웹사이트 및 빌드 최적화를 위해 정적 파일을 Azure Cloud Storage로 마이그레이션
• react-i18next를 이용한 일본어, 영어 사이트 번역 기능 개발
• 크로스 브라우징 처리를 통해 웹 브라우저에서 일관된 사용자 경험을 제공

[소개]
영화 관련 콘텐츠와 기사를 제공하는 "맥스무비" 웹사이트의 유지보수를 담당하였습니다.


[기술 스택]
javascript, nextjs9, react, ejs, html


[업무 내역]

• 메인페이지 리뉴얼
• sns 공유 기능 연동
• 네이버 뉴스 스탠드 구현

[소개]
고정형 카메라를 통한 셀프 촬영 웹앱의 퍼블리싱 및 프론트엔드를 담당하였습니다.


[기술 스택]
javascript, react


[업무 내역]

• WebView를 활용한 화면 퍼블리싱
• Instagram Category Feed api 연동
• JavaScript Bridge를 이용한 카메라 기능 제어

[소개]
한국의 관광지를 소개해주는 웹사이트의 퍼블리싱을 담당하였습니다.


[기술 스택]
javascript, html, css, jquery


[업무 내역]

• 전반적인 퍼블리싱 작업
• Flex 와 Grid를 이용한 레이아웃 구성
• 웹 표준 및 접근성 최적화
• 크로스 브라우징 처리

[소개]
실패 박람회라는 커뮤니티 형 웹사이트의 퍼블리싱을 담당하였습니다.


[기술 스택]
javascript, html, css, ejs, jquery


[업무 내역]

• 미디어 쿼리 반응형 웹 개발
• 넘버 카운트 애니메이션 모듈 개발
• 실패박람회 게시글에 대한 데이터 CRUD API 연동

[소개]
HDC 영창 LMS 웹사이트의 퍼블리싱 업무를 일부 담당하였습니다.
강의 업로드 로직 퍼블리싱 및 기능과 비디오 플레이어를 주로 개발 하였습니다.


[기술 스택]
javascript, html, css, ejs, jquery


[업무 내역]

• 강의 업로드의 화면 퍼블리싱 및 업로드 api 연동
• 비디오 플레이어 UI 구성 및 퍼블리싱

[소개]
한국산업인력공단에서 진행하는 컨소시엄 웹사이트의 퍼블리싱을 담당하였습니다.
공기업에서 진행하는 프로젝트기 때문에 웹 접근성과 웹 표준을 엄격히 준수하였습니다.


[기술 스택]
javascript, html, css


[업무 내역]

• W3C 웹 표준 가이드라인 준수를 위한 HTML5 및 CSS3 사용
• ARIA 마크업 적용 및 키보드 네비게이션 최적화를 통한 웹 접근성 향상

[소개]
음성 데이터를 텍스트로 변환하며 자막으로 생성하는 kt-ai 웹사이트의 퍼블리싱을 담당하였습니다.


[기술 스택]
javascript, html, css, ejs, jquery


[업무 내역]

• 화면의 전반적인 퍼블리싱 및 반응형 작업
• ajax를 통한 음성 인식 api 연동 및 리스트 퍼블리싱

• 공개SW개발자 대회 환경 부문에서 바코드 스캔 시 포인트가 적립되는 환경 WebApp 프로젝트의 프론트엔드를 담당하였습니다.

• 잠실에서 열린 2023 프론트엔드 개발 컨퍼런스에 참여하였습니다.
• 해당 conf 에서 MSA(MicroService-Architecture)의 발표내용을 보고 개념과 앞으로의 가능성을 경험하였습니다.