미리보기

비가시성 워터마크 기술을 활용하여 맞춤형 솔루션과 서비스를 제공합니다. 프론트엔드 개발자로서 서비스뿐만 아니라 웹뷰와 백오피스 개발을 주도하고 있습니다.

앱에서 포토카드를 구입하고 키오스크에서 출력하는 서비스의 백오피스입니다.

Next.js를 활용하여 전체 백오피스를 설계하였고, Tanstack Query와 Zustand를 사용해 개발을 진행 중입니다.

대시보드 페이지의 여러 통계 정보에서 다르게 렌더링 된다는 느낌을 받았습니다. 5개의 API를 별도로 호출해야 했다고 판단했습니다. 효율적으로 처리하기 위해 Next.js의 API 라우트를 활용하 BFF(Backend for Frontend) 패턴을 적용하여 전체 로딩시간이 약 500ms 정도 소요되던 것을 단일 API 호출 및 전체 로딩 시간을 약 150ms로 단축하였습니다.

스냅태그AI(https://snaptag.ai/)

회사의 비가시성 워터마크 기술을 적용하고, 이를 체험할 수 있는 서비스를 개발했습니다.

기존에는 Netlify를 사용해 배포했으나, AWS Amplify로 전환했습니다. 전시회에서 Lab 페이지로 사용하던 중 페이지 로딩 시간이 로컬 기준보다 1 ~ 2초 이상 느려지는 문제가 발생했는데, 이는 물리적인 서버 위치 차이로 인해 발생한 것으로 판단했습니다. Netlify도 CDN을 사용하지만, AWS의 글로벌 인프라와 비교했을 때 성능 차이가 있었습니다. 실제로 AWS Amplify로 전환한 후, 페이지 로딩 시간이 평균 300ms로 개선되었고, QA팀에게도 긍정적인 피드백을 받았습니다.

KEEFO(아이돌의 사진, 영상 등을 활용한 전시회 모바일 티켓 판매 서비스)의 백오피스 페이지를 설계하고 개발했습니다. Next.js를 활용하여 관리자 페이지의 모든 설계 및 기능 개발(대시보드, 필터 등)을 수행했습니다. Tailwind CSS를 주도적으로 도입하여, Next.js에서 CSS-in-JS보다 활용하기 쉽고 빠르며 일관된 스타일링을 구현했습니다.

기존 백오피스에서는 state로 검색 및 필터를 관리하여 새로고침하거나 다른 작업을 잠시 하는 경우 필터가 적용되지 않은 값이 표시되는 불편함이 있었습니다. 이를 개선하기 위해 검색 및 필터 관리를 state에서 query로 전환했습니다. 이 변경은 실제 백오피스를 운영하는 팀에게 좋은 리뷰를 받았습니다.

http://shop.keefo.co.kr
아이돌의 사진, 영상 등으로 열리는 전시회의 모바일 티켓 판매 서비스입니다. Next.js를 활용하여 설계 및 개발을 진행했으며, Tanstack Query와 Zustand를 사용했습니다.

결제, 로그인, 다국어 처리 등 전반적인 프론트엔드 업무를 담당했습니다. 로그인은 OAuth 인증을 통해 Refresh Token과 Access Token을 사용하여 구현했으며, 다국어 처리는 next-i18next 라이브러리를 활용했습니다.

KEEFO 서비스에서 구매한 모바일 티켓을 확인하고 입장할 수 있는 앱입니다.

자진해서 React Native를 이용하여 크로스플랫폼 앱으로 개발 및 배포한 프로젝트입니다. 앱 기획부터 배포까지 모든 과정을 담당했습니다. 앱 배포를 위해 필요한 개발 외의 정책적인 부분과 앱 운영에 대한 고민을 할 수 있었고 회사에서 크로스플랫폼에

대한 긍정적인 반응을 보여줬습니다.

현재는 Native로 새롭게 개발되었습니다.

KLPGA 스탬프 행사용 앱의 모든 페이지를 웹뷰와 행사장에 설치한 이벤트 대시보드 페이지로 구현했습니다. 앱과의 통신을 통해 데이터를 분기 처리하여 사용자에게 필요한 정보를 제공했습니다.

행사 설문에 참여한 정보를 그래프로 시각화하는 반응형 대시보드 페이지를 개발하여 실시간으로 시각적 반응을 제공함으로써 참여자들의 많은 관심을 끌었으며, 주말과 야근을 통해 출시 일정을 맞추며 성공적으로 프로젝트를 완료한 프로젝트입니다. 현장에도 직접 참여하여 사용자들이 실시간으로 대시보드에 그려지는 모습을 즐기는 것을 확인할 수 있었습니다.

이미지에 우리 회사 기술인 비가시성 워터마크를 직접 적용하고 확인, 인쇄 등을 할 수 있는 데스크탑 앱입니다.

Electron을 이용해 Windows와 macOS용 데스크탑 앱을 개발했습니다. React를 사용해 UI를 개발했고, Redux로 상태 관리를, konva 라이브러리로 캔버스를 활용한 이미지 처리를 구현했습니다.

웹사이트나 SNS 등을 통해 데스크탑 앱 설치 파일을 공유할 때 설치가 불가능하거나, OS에서 강력한 경고 문구가 표시되어 설치 파일 전달이 쉽지 않았습니다. 배포 시 품질 보증서와 비슷한 코드 사인을 적용해야 한다는 것을 알게 되었고 해결하기 위해 코드 사인을 적용하여 고객사가 다운로드 바다 안전하게 설치할 수 있도록 했습니다. 이번 프로젝트를 통해 데스크탑 앱을 개발하고 운영하기 위한 정책과 방식에 대해 전반적으로 이해할 수 있는 시간이었습니다.

주니어 프론트엔드 개발자들로 구성된 모임에서 시니어 개발자들의 멘토링을 받으며, 10주 동안 React 작동 원리, CI/CD, Git Flow, 디자인 패턴, TDD, 성능 최적화 등 주니어 프론트엔드 개발자가 알아야 할 내용을 학습하고, 팀별로 하나의 프로젝트를 완성하는 프로그램을 진행했습니다.