박상혁

숭실대학교 개발동아리 Yourssu의 온프렘 배포 시스템입니다. 기획 고도화, 전체 디자인 및 프론트엔드 개발을 담당했습니다. 토스증권 WTS를 벤치마킹하여 서비스 전체 디자인 및 에셋들을 제작했습니다.

• 재사용성과 콘텐츠 중심 마크업 작성을 고려한 각종 UI 컴포넌트들 개발
• 대화형 배포 심사 및 리소스 관리를 위한 어드민 페이지 구현
• 디자인 토큰의 중복 선언 문제: CSS 토큰을 SSoT로써, CSS/TailwindCSS/JS 간 토큰 동기화를 메타프로그래밍으로 자동화
• 사용처마다 상이한 에러 핸들링 로직: 예측 가능한 에러들을 단일 추상화 계층으로 통합해 에러 분류와 분류된 인터페이스를 통일함으로서, 일관된 핸들링 방식을 제공

부드럽고 커스터마이징 가능한 숫자 롤링 애니메이션 React 라이브러리입니다. 기존 라이브러리들의 제한적인 커스터마이징, 부족한 숫자 포맷 지원, 런타임 스타일 변경 대응 등의 불편함을 해소하고자 만들었습니다.

• 커스터마이징: 부호, 정렬 위치, 콤마 등 표시 방식 및 애니메이션 방향, 지속 시간, 스태거 등 각종 애니메이션 옵션을 통한 폭넓은 커스터마이징 지원
• 넓은 숫자 커버리지: 문자열 타입의 숫자 지원으로 고정소수점이 가능하며 내부적으로 과학적 표기법을 숫자로 변환하는 로직을 통해 과학적 표기법도 지원
• 런타임 스타일 변경 대응: 부모 폰트 스타일을 상속받고, ResizeObserver로 폰트 크기 변경에 따라 자동으로 스타일을 변경
• 환경 지원: esm/cjs 동시 지원 및 라이브러리 d.ts 파일로 타입스크립트 지원
• 모노레포 방식과 workspace 프로토콜로 라이브러리 변경 사항을 로컬에서 바로 확인 가능하도록 구현

남은 시간을 직관적이고 시각적으로 나타내는 타임 타이머 제품을 구현한 인터랙티브 프로젝트입니다. 단순히 인터랙션을 구현하는 것을 넘어, 자연스러운 범주 내에서 의도적인 트랜지션을 통한 사용자 시선 처리 및 행동 유도를 목표로 했습니다.

• 타이머에 집중 유도: 타이머 외의 모든 UI 요소를 제거하고, 타이머 자체에만 집중할 수 있도록 디자인
• 시선 처리 및 행동 유도: 컴포넌트간 fade-in 딜레이를 다르게 주어 무의식적으로 시선이 따라가도록 유도하고, 경계를 인지시켜 다른 기능임을 인식시킴
• 인터랙션 없이 타이머 종료 알람 재생이 불가능한 문제: 타이머 시작 클릭 시 무음 오디오 재생 직후 알람 오디오로 교체해 재사용하면서 브라우저 정책 우회
• 색상, 시간 등 타이머 커스터마이징 옵션 제공
• 기간별 사용 기록, 잔디 그래프 및 행동 분석 등 통계 뷰 구현

넥슨 메이플랜드 게임 내 일부 이용자들의 시세 조작으로 인해 정상적인 거래가 어려운 문제를 인식하고, 이를 해소하기 위해 다중 거래소 데이터를 자동 수집, 정제하는 시스템을 직접 설계했습니다. 혼자서 2주 만에 MVP를 완성하여 커뮤니티에서 화제를 얻었고, 월 PV 120만 이상 및 광고 수익화를 달성했습니다.

• 일별, 시간별 아이템 시세 통계 및 차트 시각화 뷰 제공
• 거래 동향 정보를 제공하는 가격순 및 거래량 트렌딩 뷰 구현
• 디스코드 API 미지원으로 인한 채널 거래소 아이템 거래글 수집 문제: Network 탭 분석으로 디스코드 내부 API를 역설계하여 세션 유지 및 게시글 데이터 수집
• 비선형적 아이템 게시글 분류 문제: 구매 유형, 아이템, 가격 등 키워드 간 상대적 거리 차이를 이용해 문맥 상의 거래 유형을 분류하는 문자열 거리 기반 알고리즘 구현
• 아이템 약어 및 갯수, 금액, 확률 관련 용어 혼재: 자주 사용되는 패턴들을 추출, 카테고라이징 후 분류하는 로직 구현
• 의도적 시세 조작 문제: Modified Z-Score 기반 이상치 탐지 알고리즘 적용, 이전 시세와의 괴리도 및 거래량 급등락을 고려해 자동 필터링으로 정확도 향상

메타볼 효과를 웹에 구현한 인터랙티브 프로젝트입니다. 퍼포먼스 향상을 위해 WebGL 라이브러리인 PIXI.js를 사용하여 구현했습니다.

• 메타볼 구현을 위한 커스텀 필터 구현: Gaussian Blur와 Alpha-Threshold 필터가 필요했으나 PIXI.js에 Threshold 필터가 없어 GLSL로 직접 구현
• 프레임 단위로 스프링 효과가 적용된 오브젝트 위치를 계산해야하는 문제: 점화식으로 직접 스프링 효과 로직을 구현해서 위치를 렌더링하도록 구현
• 여러가지 메타볼을 만들어낼 수 있도록 파라미터를 조정하는 인스펙터 UI 제공

Google Material Design 소개 영상의 모션 그래픽에서 영감을 받아 만든 바닐라 JS 프로젝트입니다.

• bezier-easing 라이브러리 기반의 애니메이션 타임라인 라이브러리 구현
• 연속적 애니메이션 구성의 편의를 위해 애니메이션 파라미터 캐싱 스토리지 구현

숭실대학교 개발 동아리 유어슈에서 프론트엔드 파트 리드진으로 참여하고 있습니다. 밖으로는 숭실대학교 학생들이 사용하는 여러 서비스들을 만들고, 안에서는 자유로운 개발 문화를 만들고 지식을 공유하여 선순환을 만들기 위해 노력하고 있습니다.

• 코드리뷰 및 커뮤니케이션 아티클

• 스피커: 24.05.04 웹사이트로 끝까지 벌어보자