박성렬
📫이메일: sungryeolp@gmail.com
🏡블로그 및 포트폴리오: https://sungryeol.com
👨💻Github: https://github.com/rabelais88
🙋Stackoverflow: https://stackoverflow.com/users/9292770/sungryeol
(2025-01-20 평판점수 3,995)
웹, 데이터 시각화 그리고 3D 기반으로 활동하는 7 년차 프론트엔드 개발자 입니다.
- 명확한 목표를 가진 개발
- 팀과 함께하는 개발
- 데이터를 기반으로한 생산성 있는 개발
을 하고자 합니다.
🏆 주요 경력
- 각종 프로젝트의 열람이 원활하지 않을 시, 포트폴리오의 작업물 페이지에서 영상과 스크린샷을 확인하실 수 있습니다.
- 저작물의 열람이 원활하지 않을 시에는, Internet Archive를 활용해 주세요.
빅픽처 인터랙티브
프론트엔드2018-07 - 2022-08
웹앱: LVUP.GG(versus-on)
2018-2022
온라인 e스포츠 경기운영 플랫폼입니다. 아마추어 게이머와 프로단체 양측이 모두 자유롭게 리그 규모 이상의 경기를 만들고 참가할 수 있습니다.
- D3.js를 활용한 대진표 시각화 및 알고리즘 개발
- 싱글 엘리미네이션 대진표
- 더블 엘리미네이션 대진표
- 라운드 로빈 대진표
- 스위스 라운드 대진표
- 전체화면 줌 및 드래그
- 스크린샷 저장 및 내보내기 기능
- 공유 URL
- 팀 생성과 참가, 팀 홍보
- Pusher 및 센드버드 을 활용한 실시간 알림과 채팅
- 대회 수상시 획득한 포인트(가상 재화)로 상품 구매 및 수령 가능
- 어드민 대시보드
- 서버 사이드 렌더링(SSR)과 검색 엔진 최적화(SEO)
- 구글 어널리틱스를 활용한 사이트 유입 분석
- Lottie.js를 활용한 애니메이션 기능
- Cypress.io를 활용한 E2E 테스트(BDD)
- Jest를 활용한 유닛 테스트
- Docker, Jenkins를 활용한 배포와 CI 자동화 및 배포 artifact 분석기능 구현
- VueI18n + Github Actions + 구글 스프레드시트를 활용한 다국어 지원 및 다국어 관리 시스템 구성
- Storybook을 활용한 속도감 있는 CDD, microfrontend 개발
- CDD와 BDD를 기반으로 한 융통성 있는 애자일 개발과 팀 협력
- Typescript, Vue, Vite, Webpack, Docker, D3.js, Jenkins, Git, Lottie, Jira, AWS, Cypress.io, Jest, Storybook, Webpack+React(Storybook)
웹앱: 게임코치 온라인
2020-2022
e스포츠 프로게이머가 직접 일반 게이머를 가르치고 수익을 얻을 수 있는 온라인 교육 플랫폼입니다. 일반 게이머는 원하는 강의스타일을 가진 프로게이머를 직접 찾고 추천받을 수 있습니다.
- 수강생 실시간 알람
- 강사 찾기
- 고도화된 지식 게시판: 게임 내의 특정 요소들을 지정하여 필터링 및 태그 기능
- 서버 사이드 렌더링(SSR)과 검색 엔진 최적화(SEO)
- 구글 어널리틱스를 활용한 사이트 유입 분석
- Pusher 및 센드버드 을 활용한 실시간 알림과 채팅
- Payple을 활용하여 고객 결재 및 강사 임금 정산 가능
- Lottie.js를 활용한 애니메이션 기능
- Jest를 활용한 유닛 테스트
- Docker, Jenkins를 활용한 배포와 CI 자동화 및 배포 artifact 분석기능 구현
- Storybook을 활용한 속도감 있는 CDD, microfrontend 개발
- CDD와 BDD를 기반으로 한 융통성 있는 애자일 개발과 팀 협력
- Typescript, Vue, Vite, Webpack, Docker, Jenkins, Git, Lottie, Jira, AWS, Jest, Storybook, Webpack+React(Storybook)
오픈 소스 기여
- 페이플 공식 노드 샘플 소스
- TinaCMS: Github Star 8.1k
그 외
프로젝트 진행간 각종 성과 보고
- 레벨업의 테크노트:분포도 시각화 개선하기
- 레벨업의 테크노트:닥지지 리더보드 데이터 시각화로 개선하기
- 레벨업의 테크노트:디자인이 프론트엔드와 figma로 대화하는 법
- 레벨업의 테크노트:Node.js 메모리 누수 탐지하기
- 레벨업의 테크노트:구글 시트로 현지화 문자열 업데이트 자동화하기
재직중 진행한 기술공유
- 레벨업의 테크노트:블로그 사이트 재구성하기 1 - 기획과 디자인
- 레벨업의 테크노트:블로그 사이트 재구성하기 2 - 개발하기
- 레벨업의 테크노트:웹 표준 지키기 - 포커스 표시기
- 레벨업의 테크노트:3D 웹앱 깊이 빠져보기 1
- 레벨업의 테크노트:3D 웹앱 깊이 빠져보기 2
팀의 스크럼 마스터 역할 진행
💼 프로젝트
외주 프로젝트
- 로렐 피부 진단 앱
- 레버리저스 마케팅 전략 도구
- 디지털로그 캘린더 사이트
- 스타팅 인재 채용 사이트
- CPESO 모바일 암호화폐 거래 앱
주목할만한 프로젝트
- WebGL 셰이더를 활용한 3D 타이포그래피
- 3D P2P 멀티플레이어 데모
- 한글 박물관 소장품 크기 3D로 비교하기
- Gamecoach Online 2021 한해 추억하기
- 팀 버크만 테스트 결과 3D 데이터 시각화
- WebGL을 활용한 대규모 데이터 렌더링 기술데모
D3.js를 활용한 데이터 시각화 프로젝트
- 공적 마스크 구입에 관련된 데이터 시각화
- 애니메이션으로 코로나와 유명한 국제적 전염병의 확산세 비교하기
- 국내 코로나19 초기 확산세 분석
- D3.js 줌 기능과 미니맵 기능 구현하기
- 한국 정치의 계보도 시각화
- 회기별 대한민국 국회의원 당선자 분포 시각화
- 회기별 대한민국 국회의원 당선자 분포 시각화 2
- 코로나 19 전국 확산 애니메이션
- covid-19 spread in South Korea
- 지도에서 원형 그래프로 모핑하기
- web worker를 이용한 fetch와 일반 fetch 비교
주목할만한 Codepen 코드조각
- How to properly use Lodash debounce in Vue.js - 조회수 7천 이상
- Visualizing tournament tree with Vue.js and D3.js - 조회수 2천 이상
- Vue.js page transition - 조회수 3백 이상
- Combining Vue.js and D3.js - 조회수 3백 이상
관련 저작
🎓 학력/기타
서운고등학교
2004.3 ~ 2007.2
인천대학교
2007.3 ~ 2015.8 영어영문학과 평균학점 4.0/4.5
병역
2009.7 ~ 2011.5 병장 만기 전역
🗂️ 자격증
- 정보처리기능사/2000.10.24/한국산업인력공단
- 정보기기운용기능사/2000.4.12/한국산업인력공단
- 컴퓨터그래픽스운용기능사/2001.10.30/한국산업인력공단
- JLPT N2/2018.1.21/일본국제교류기금
- HSK 4/2016.10.29/한반
- OPIC AL/2016.7.24/ACTFL
- TOEIC 965/2017.5.9/한국TOEIC 위원회
- DELF B1/2014.5.15/프랑스 교육부
🛠 주요 사용 도구
적응력 있는 개발을 목표로 합니다. 사용 가능한 도구에도 특별히 제약을 두지 않습니다.
그러나 필요하신 경우를 대비해, 조금 더 숙달되어 있는 도구들에 대해 알려드립니다.
자주 문의되는 것 위주로만 적어두었습니다. 적어놓지 않은 도구가 있을 수 있습니다.