미리보기

각 서비스의 운영 상태를 실시간으로 모니터링하고, 필요한 제어를 수행할 수 있는 내부망 모니터링 시스템 (Mintscan Manager) 의 개발에 초기 기획 단계부터 설계, 구현에 이르기까지 전 과정에 걸쳐 핵심적으로 참여했습니다.

또한, Cosmos 생태계의 주요 블록체인 익스플로러인 MINTSCAN의 컴포넌트들을 리뉴얼하고 확장했으며, 사용자 요구에 맞춘 신규 페이지를 설계 및 구현하였습니다.

개발 아티클 공유 문화 조성, 코드 리뷰 의무화, 배포 알림 등의 팀 온보딩 가이드 문서화 등의 활동으로 동료와 함께 성장하는 환경, 병목 없는 협업 환경을 만들기 위해 노력하였습니다.

(주) 메모리플랜트 에서 진행한 사회서비스 프로젝트 "우만 2동 이야기"에 참여하여, 우만2동의 시니어분들을 대상으로 인터뷰를 진행하고 그들의 이야기를 책으로 발간하는 작업에 기여했습니다.

Description

기업별 코딩테스트 정보를 제공하는 개발자 취업 준비 플랫폼의 백오피스 개발 ( Website ), ( Github )

Experience

• onMount와 onDestroy 라이프사이클을 사용해 컴포넌트 마운트 및 파괴 시 메모리 낭비를 최소화

• API 요청 및 사용자 액션 시마다 로딩 인터랙션을 구현하여 사용자 경험을 개선

• Restful API를 사용해 설계하고, 보안을 강화하기 위해 리프레시 토큰을 적용하여 인증 시스템의 안정성을 확보

• Svelte store와 웹 스토리지를 결합하여 커스텀 전역 상태 관리 시스템을 구현

• 재사용 가능한 버튼, 컨테이너, 모달 등의 컴포넌트를 구현하여 디자인의 통일성을 유지

• 몇솔 플랫폼의 초기 기획부터 전 과정에 걸쳐 참여하고, Slack을 통해 팀 업무 보고 및 노션을 활용해 스프린트를 공유하며 협업을 진행

• 코딩 테스트에 대한 정확한 정보를 제공하기 위해 여러 기업에 직접 연락해 협업을 추진, 특정 기업으로부터 공식적인 코딩 테스트 정보를 받아냈습니다. 이를 통해 플랫폼에서 신뢰할 수 있는 정보를 제공하며, 사용자들에게 보다 정확한 코딩 테스트 준비 환경을 제공하는 데 기여

TechStack

Svelte Typescript Scss Vite

Description

팀과 함께 매일 루틴을 달성하며 목표를 향해 나아가는 서비스 ( Website ), ( Github )

Experience

• GitHub Actions를 활용해 자동 배포 파이프라인을 구축하고, Mustache 템플릿과 Pandoc 컨테이너로 빌드 및 푸시 작업을 자동화

• React로 Next.js와 유사한 직관적인 페이지 라우팅 구조를 설정하여 프로젝트 구조의 효율성과 가독성을 향상

• Tailwind CSS를 사용해 웹 및 모바일에서의 반응형 디자인을 구현

• 페이지 전환 및 데이터 API 요청 시 Pending 애니메이션을 추가하여 사용자 인터랙션을 자연스럽게 개선

TechStack

React Typescript TailwindCSS Zustand Vite

Description

다양한 블록체인 네트워크의 데이터를 탐색하고, 트랜잭션 및 주소 등의 정보를 시각화할 수 있는 Cosmos 생태계 전용 블록체인 익스플로러 ( Website )

Experience

• Block, Proposal, Relayer 페이지 개편 작업

• Airdrop 페이지를 기획/구상하여 유저 유입 트래픽 16% 상승 효과 달성

• 기존 레거시 코드 삭제 및 디자인 일관성 유지

• SCSS를 사용하여 사용자 인터페이스에 마이크로 인터랙션 애니메이션을 구현

TechStack

Svelte Typescript Scss Chart.js D3.js

Description

각 서비스의 운영 상태를 실시간으로 모니터링하고, 필요한 제어를 수행할 수 있는 내부망 모니터링 시스템 (Mintscan Manager)

Experience

• 기존 Firebase 에서 제어 및 Slack, pm2 실시간 로그 확인 기능을 내부망으로 전환하여 모니터링 시스템 설계 및 개발.

• 컴포넌트와 서비스 간의 효율적인 데이터 흐름을 위한 구조 설계.

• Chart.js를 활용한 Line 차트와 D3.js를 활용한 Day별 히트맵을 통해, 사용자가 원하는 단위별로 데이터를 직관적으로 확인할 수 있는 대시보드를 구현. 구글 애널리틱스와 유사한 사용자 경험을 제공.

• 대량의 로그 데이터를 효율적으로 처리하기 위해 가상 스크롤(Virtual Scrolling)을 구현하여 성능을 최적화.

• 싱글턴 패턴을 사용하여 클래스를 구현, 도메인 기반의 데이터 선택 및 필터링을 효율적으로 관리. Svelte의 스토어를 활용하여 실시간으로 데이터 상태를 관리하고, 선택한 도메인과 필터 조건에 따라 데이터를 업데이트.

• Restful API 및 WebSocket을 사용하여 구현.

• 보안성과 성능이 향상된 내부망 모니터링 시스템을 구축하여 안정적인 서비스 운영과 효율적인 로그 관리가 가능해졌으며, Firebase나 Slack 메시지를 따로 확인할 필요 없이 하나의 제품에서 모든 작업을 처리할 수 있게 되었습니다. 시스템 로그를 분석하는 Node Operator 직원들의 업무가 훨씬 수월해졌고, 비개발자들도 쉽게 시스템을 사용할 수 있게 되었습니다.

TechStack

Svelte Typescript Scss Socket.io Chart.js D3.js

프로젝트 개요

저는 (주) 메모리플랜트 에서 진행한 사회서비스 프로젝트 "우만 2동 이야기"에 참여했습니다. 이 프로젝트는 우만2동에 거주하는 시니어분들을 대상으로 인터뷰를 진행하고, 그들의 이야기를 책으로 발간하며, 데이터 분석을 통해 지역의 개선점을 도출하는 데 그 목적이 있었습니다.

역할 및 기여

프로젝트 초반에는 대학생, 기업, 공무원이 함께 협업하는 과정에서 소통의 어려움을 겪었습니다. 이 문제를 해결하기 위해, 저는 대학생을 연락의 중간책으로 설정하여 원활한 소통을 도모했습니다. 이를 통해 프로젝트 진행 속도가 크게 향상되었고, 원활한 협업이 가능해졌습니다.

성과

프로젝트는 성공적으로 마무리되었으며, 여러 뉴스 언론에 소개되었습니다. 또한, 발간된 책은 수원시 도서관에 등록되어 지역사회에 공유되었습니다.

배운 점

이 경험을 통해 저는 문제 해결 능력과 소통 능력을 한층 강화할 수 있었으며, 협업의 중요성을 깊이 깨닫게 되었습니다.

연합 IT 개발 동아리 구름톤 유니브 에 참여하여 1주 1회 프론트엔드 그룹 스터디에 참여하고 있습니다.

• 카카오 x 구름톤 유니브 3기 연합해커톤 대상(1위) 수상. 2024.09.29

연세대학교 블록체인 학회 BAY의 13기 dApp 개발팀으로 활동하며, 블록체인 관련 컨퍼런스 및 다양한 Web3.0 세미나에 참여하였습니다.