한재권
이력서포트폴리오
한글
Website
https://indegser.com

웹디자이너로 일할 당시 디자인의 한계가 기술의 한계에 의해 결정되는 것을 경험하곤 했습니다. “구현하기 어려운 디자인"이라는 평가를 수용하기 위해선 “웹 기술"에 대한 지식이 있어야 했고, 포토샵이나 스케치에선 되지만 브라우저에서는 안 되는 것들을 알아야 했습니다. 어떻게 하면 디자인을 그대로 화면에 옮길 수 있을까 하는 기술적 고민들이 쌓이다 프론트엔드 개발자가 된거라고 볼 수 있죠.

그래서 저는 프론트엔드 기술만큼이나 웹 디자인에 관심이 많습니다. 멋진 화면을 보면 그것을 지탱하는 기술을 찾아보고, 반대로 새로운 기술을 발견하게 되면 이를 적용해 어떤 디자인을 상상이 아닌 현실로 만들 수 있을 지 고민합니다. 이런 성향을 지닌 예술가/엔지니어의 이야기를 하나 소개해볼까 합니다. 레오나르도 다 빈치입니다.

레오나르도 다 빈치는 그의 모든 미적/과학적 지식을 집대성하여 모나리자를 그렸습니다. 처음으로 ‘스푸마토’라는 기법을 사용했는데 쉽게 설명하면 색과 색의 경계를 뿌옇게 만드는 겁니다. 눈 앞에 있는 사물을 볼 때 주변 풍경이 흐리게 보이는 원리를 그림에 녹여내면서 모나리자만의 신비스러운 미소를 완성할 수 있었습니다. (모나리자의 미소를 찾겠다고 입을 보고 있으면 입만 보입니다. 눈에 초점을 맞추는 순간 미소가 보입니다)

미적으로도 훌륭할 뿐 아니라 과학(기술)적으로도 접근이 뛰어난 모나리자는 제가 만들고 싶은 서비스의 표본같은 작품입니다. 보다 유려하면서도 기술적으로 수준 높은 웹 서비스를 만들기 위해 웹 디자이너에서 프론트엔드 개발자가 되었습니다.

Naver Labs
2020년 1월 ~
프론트엔드
네이버 신사옥에서 서비스될 로봇들을 위한 웹서비스를 만들고 있습니다. React와 WebGL을 사용해 로봇 모니터링 대시보드, 지도 에디터를 개발했습니다. 클라우드 환경으로 지속적 배포가 가능하도록 DroneCI와 k8s를 활용해 Navercel이라는 시스템을 만들었습니다. Vercel처럼 Git 브랜치와 연동된 웹사이트가 클라우드에 떠있습니다. 타입을 적극 활용하고, 테스트 코드를 짜는 것이 중요하다는 것을 알게 되었고 페어 프로그래밍과 코드 리뷰를 활용해 코드를 함께 보고 개선 하는 시간을 가지고자 노력하고 있습니다.
EOSDAQ
2018년 6월 ~ 2019년 9월
프론트엔드, UI 디자인
탈중앙화 블록체인 거래소의 UI 디자인과 프론트엔드 개발을 맡았습니다. Redux-saga를 사용해 WebSocket으로 들어오는 실시간 주가를 처리했으며, 백엔드 개발자분과 함께 AWS에 CodePipeline과 ECR/ECS를 사용해 배포 시스템을 구축했습니다. 이때부터 배포에 관심을 가지게 되었고, Gatsby, Next.js, Netlify와 Zeit(Vercel) 같은 프레임워크/서비스들을 사이드 프로젝트에 사용했습니다. 프로젝트 후반에는 기존 지갑들에 대한 대안으로, 브라우저의 키체인 기술을 사용한 지갑, Keycat을 사이드 프로젝트로 만들어 오픈소스로 공개했습니다.
AlleysWonderLab
2016년 9월 ~ 2017년 12월
프론트엔드
지도와 동영상을 연결하는 웹 서비스를 만들었습니다. Node.js로 소셜 로그인과 SSR을 처리하는 웹 서버를 작성했고, React.js, Mapbox.js로 클라이언트를 만들었습니다. 벡터-타일 지도와 고화질 영상을 화면에 동시에 담아야 했기 때문에, 종종 노트북 팬에서 굉음이 나곤 했습니다. 덕분에 개발자 도구를 사용해 성능/메모리를 측정하고 개선하는 경험을 할 수 있었습니다.
Indegs
2015년 8월 ~ 2016년 5월
프론트엔드, UI 디자인
디자이너를 위한 Git이 필요하다고 생각해 창업했습니다. Photoshop 파일을 수정할 때마다 자동으로 커밋을 생성하고 썸네일을 생성해 사용자가 “시각적”으로 커밋을 확인할 수 있도록 만들었습니다. Electron을 기반으로 만든 덕분에 웹 프론트엔드 기술을 사용했습니다.
Aurumplanet
2013년 6월 ~ 2015년 1월
UI 디자인
Sketch에서 깔끔하게 보이는 그림자 효과가 브라우저에서는 깨지는 걸 보며, 개발자 도구로 box-shadow를 수정하다 CSS에 입문했습니다.
프론트엔드
  • React, Next.js
  • Typescript
  • Jest, Zustand, Emotion
2D/3D 그래픽
  • WebGL, Three.js
  • SVG, D3.js
  • React Three Fiber, React Spring
CI/CD
  • Vercel, Netlify
  • K8s, Docker
  • Github Action, AWS CodePipeline
기타
  • Figma