마광휘

Software Engineer

웹 프론트엔드에 관심이 많은 소프트웨어 엔지니어

우아한형제들 커머스웹프론트개발팀 팀장

커머스 웹 프론트 전반 아키텍쳐 설계 및 서비스 개발

팀, 아울러 실 단위의 운영/개발하는 팀원을 위한 다양한 툴 개발

경력

우아한형제들

2019.09 ~ Software Engineer / Manager웹 프론트엔드

테크리드 및 매니징 업무 진행

B마트/배민스토어/배민쇼핑라이브 커머스 웹 프론트 전반 설계/구축 및 운영

SUS, 서비스 피쳐 개발 업무 싱크업 및 정리

매니저

2020.12 ~

커머스 웹 전반 고도화 및 사용성 강화를 위한 웹 프론트 과제 바텀업

팀원 일정 관리 및 조율

유관부서 커뮤니케이션 및 일정 조율, 담당자 선정

  • 주도적인 디자인팀 커뮤니케이션을 통한 웹 컴포넌트 고도화, 서비스 역제안

  • 여러 TF 진행, 웹 프론트 구성원 일정 관리 및 조율

테크 리더

2019.09 ~

여러 서비스를 공통적으로 관리할 수 있는 아키텍처 수립 및 개발

TF등 일정 내 효율적으로 협업할 수 있는 아키텍처 구축

장애 컨트롤 및 고도화에 열려있는 프로덕트 구축

  • 웹 프론트 아키텍쳐 설계

  • 전사 단위 기술 제안, 객체지향/타입스크립트/등 기본기 역량 강화

  • 회고 문화를 통한 이슈 트래킹 및 정보 공유, 코드 리뷰 등 개발 문화 조성

  • 다양한 인원에 대한 (1명부터 10명이상까지) 개발 인원 배정 및 프로덕트 개발 완료 경험

프로덕트 설계

2019.09 ~

구축한 아키텍처 범위 내 프로덕트 설계

  • 공통 컴포넌트, 비즈니스, 데이터를 쉽게 관리하기 위한 계층 설계

  • 서비스와 어드민을 대응할 수 있는 디자인 시스템 레이어 설계

  • 비즈니스 로직을 쉽게 테스트하고 격리할 수 있는 클래스 기반 모델 레이어 설계

  • Loadable Component와 Node.js를 사용하여 SSR 환경 구축

  • Vue -> React 전환 경험, 전환하는 이유 등 시장의 형태에 따른 프로덕트 구축 가능

  • CRA -> SSR (Loadable Component -> Next.js) 점진적 고도화 진행, 기술적으로 왜 필요한지 이해

  • 프레임워크에 상관없이 쉽게 사용할 수 있는 TypeScript 기반 로그 시스템 제작, 비즈니스 로직에서의 로그의 분리와 코드 응집도 개선

  • 비즈니스, 인원에 따른 적합한 기술 선정 및 설계

서비스 운영

2019.09 ~

B마트/배민스토어/배민쇼핑라이브 모바일 프론트 서비스 운영

전사 통합 셀러오피스, 어드민 프론트 서비스 운영

  • SSR 기반 웹 어플리케이션 운영

  • Sentry 적용을 통한 장애 감지

  • 구글 애널리틱스를 통한 이벤트 페이지 지표 측정

  • 기존 마케터가 마크업을 하던 방식에서 매달 수십개 이상의 이벤트 발행하는 자동화 툴 개발/운영

  • 개발에 필요한 유틸리티를 쉽게 제작해주는 툴 개발/운영

  • 기존 산재하던 레거시 소스 통합, 성능 최적화

비즈니스 개발

2019.09 ~

주문, 결제, 커머스 전반 비즈니스 플로우에 대한 이해

물류 시스템에 대한 웹 프론트 이해

퀵 커머스 서비스에 대한 웹 프론트 이해

배달/배송 비즈니스에 대한 이해

  • 장바구니, 주문서, 결제 등 결제 플로우 페이지 개발

  • 상품 상세, 정보제공고시 등 상품 페이지 개발

  • 이메일 고지 / 영수증 화면 개발

  • 센터에서 활용되는 PDA 웹앱 개발

  • POS기 기반의 웹 어플리케이션을 통한 영수증 출력 프로그램 개발

인프라

2019.09 ~

웹 서비스를 지탱하는 인프라 설정/사용

팀 내 데브옵스 구축

  • AWS Elastic Beanstalk + Code deploy를 사용한 Blue-green 무중단 배포

  • S3 - Cloud Front를 이용한 정적 리소스 비용 절감 및 CDN 사용

  • 웹 정적 사이트 배포 및 SSR 인프라 개발

  • 데브옵스 구축을 통한 코드리뷰 자동화 및 자동 리포트 등 개발

와인포인트

2018.02 ~ 2019.08Software Engineer개발팀

와인포인트는 '와인을 넘어, 주류 시장 중간 과정에 들어가는 마진을 최소화하여 정직한 가격으로 소비자들에게 공급한다'는 포부를 갖고 탄생한 서비스입니다.

현재 주류는 전통주를 제외하고 대면해서 신분증을 제시하지 않으면 구매가 불가능합니다. 그래서 와인포인트는 앱 내에서 주문하면 받고 싶은 위치의 가장 가까운 이마트24 편의점에서 대면하여 결제하고 픽업할 수 있습니다.

와인포인트 웹 프론트엔드 개발

2019.03 ~ 2019.08

와인포인트 웹 버전 프론트엔드를 개발하였습니다. (비오픈)

  • 와인포인트 와인 상세페이지 웹 컨버팅

  • 와인포인트 앱 비밀번호 변경 페이지 개발

와인포인트 데이터 어드민 개발

2018.02 ~ 2019.08

와인을 등록할 수 있는 어드민 페이지를 개발하였습니다.

  • 대쉬보드 데이터 시각화 작업

  • JWT를 이용한 인증

  • 와인 등록 기능 개발

와인포인트 주문 어드민 개발

2018.03 ~ 2019.08

오프라인 매장 및 물류창고에서 사용하는 어드민을 개발하였습니다.

  • 재고 관리 기능 개발

  • 와인 재고 증감 기능 개발

  • 주문 이행 기능 개발

  • 영수증 발행 기능 개발

  • 바코드 인식 기능 추가

  • 배달현황 기능 추가

와인포인트 랜딩 페이지 개발

2018.07 ~ 2018.07

와인포인트 초창기 랜딩 페이지를 개발하였습니다.

  • 디자인 작업

  • 마크업 작업

Republic Dot.

2017.07 ~ 2017.12Software Engineer개발팀

Republic Dot은 세상의 모든 리뷰 '리뷰왕 김리뷰'를 운영하던 김리뷰가 리뷰 커뮤니티를 목표로 만든 스타트업 입니다.

유저는 자신의 리뷰로 아이템을 살 수 있고 Republic Dot에서는 B2B 시장에서 아이템을 홍보해주고 수익을 창출할 수 있는 리뷰 순환 구조를 만들고자 탄생한 커뮤니티 서비스입니다.

Review Republic

2017.07 ~ 2017.12

Review Republic은 최대 동시 접속자수가 4000명까지 있었던 리뷰 커뮤니티 서비스입니다.

  • React 기반 커뮤니티 사이트 유지보수 및 개발

(주)HOMI

2014.02 ~ 2017.06Game Client Programmer개발팀

Unity 3D, Cocos2d-x를 이용해 크로스 플랫폼 모바일 게임 개발을 진행했습니다.

2년 10개월간 병역 특례를 받아 병역의 의무를 수행하였습니다.

태권 VR

2016.11 ~ 2017.06

Vive VR과 Perception Neuron을 사용한 바디 스캔, VR 환경에서 장비를 입고 태권도 자세를 취할 수 있도록 개발

Unity3D 환경에서 VR 얼라이어싱 현상 개선

  • Vive VR + Unity3D를 이용한 3D 게임 개발

Pandaria Dash

2015.11 ~ 2016.12

러닝 장르 게임으로써 장애물을 피하고 코인을 모으는 게임

  • Vive VR + Unity3D를 이용한 3D 게임 개발

  • 폰의 사양에 따라서 텍스쳐 크기를 작게 컨버트해서 메모리 최적화

  • Terrain이 퍼포먼스 최적화를 위한 Model fbx파일을 Unity로 옮겨와서 bake 진행

Tile Road

2016.02 ~ 2016.07

꼬리와 머리를 클리어 존에 배치시키는 퍼즐게임

iOS, AOS 동시 런칭

  • 맵툴, 인게임 요소를 제작

  • AdColony, Vungle, Google Play Games, Unity Ads, Google Ads, EveryDay 등의 수많은 dependency 포함하여 충돌나는 문제 해결

TabBrick

2015.03 ~ 2016.02

장애물을 피하면서 가장 위로 올라가는 점수를 내는 게임

  • 맵툴, 인게임 요소를 제작

4D Gunslinger

2014.06 ~ 2015.03

승마 헬스 기계를 탑승하여 말의 속도와, 총을 들고 진행하는 4D 게임

  • 아두이노를 통해 승마 기계와의 시리얼 포트 통신을 해서 신호를 조작

  • 레이싱 맵 제작할 수 있는 에디터 개발

4D BIGWAR

2014.02 ~ 2015.03

4D 체감형 머신을 탑승하고 그 위에서 조작을 통해서 발칸을 발사하여 게임을 진행

  • 3D 광원 효과 및 지형 모델 최적화

  • Unity3D 에디터 작업

기술

HTML/CSS

  • Semantic Markup을 중요하게 여기며, HTML를 작성할 때 의미를 부여합니다.

    HTML이 길어질 수록 Semantic Markup이 중요해집니다. 그러므로, 초기에 작성할 때 부터 고려를 많이하는 편입니다.

  • CSS를 짤 때 최대한 간단하고, 개발자 친화적으로 짤 수 있게 노력합니다.

    복잡한 문법을 style에서 담으려고 하지 않습니다. style은 이해하기 쉬울수록 최고라고 생각하기 때문입니다. CSS를 개발할 때 tag들을 각 요소별로 구분하여 쉽게 알아볼 수 있도록 코딩합니다.

  • SASS(SCSS)와 같은 CSS Preprocessor를 사용할 수 있습니다.

    CSS Module과 SCSS 조합을 선호합니다.

    Emotion 및 Styled Component를 활용한 프로젝트를 설계 할 수 있고, 구현이 가능합니다.

  • 여러 브라우저를 지원할 수 있습니다.

    Chrome, Safari, Firefox등 여러 브라우저들을 지원하는 앱을 만들 수 있습니다.

  • favicon, Open Graph protocol, SEO 등의 적용 경험이 있습니다.

    네이버, 구글등 Robot.txt를 통해 검색되도록 지원해본 경험이 있습니다.

TypeScript

  • TypeScript를 이용한 React 코딩에 익숙합니다.

    다양한 프로젝트 경험으로 코드 리딩 및 작성이 가능합니다.

  • 문법을 잘 활용하며, 적절한 타입을 사용합니다.

    객체지향 프로그래밍에 익숙하기 때문에 상속 등을 통한 클래스 타입에도 강점을 지닙니다.

  • Generic에 익숙합니다.

    Generic과 더불어 다양한 문법들 ex) Overloading, Tuple 등을 이용한 코딩을 할 수 있습니다.

JavaScript

  • ES2015 이후의 JavaScript 문법에 익숙합니다.

    JavaScript ES2015 이상의 문법을 수월하게 작성하거나 읽을 수 있습니다.

  • Vanilla JavaScript를 통해 DOM을 다루는데 익숙합니다.

  • Reduce, Map과 같은 고차함수를 적극적으로 사용합니다.

  • 비동기 작업을 하는데 익숙합니다. (promise, async await)

SPA Framework

  • 크거나 작은 규모의 웹 프로그램을 설계할 수 있습니다.

    모바일 웹앱, PC, 어드민 등 다양한 프로젝트를 리딩하고 개발한 경험이 있습니다.

  • React hooks를 사용하여 적절하게 데이터를 분배합니다.

    Custom hooks을 줄곧 잘 쓰며, Context API를 사용하여 맥락에 맞는 컴포넌트 상태 격리를 통한 구현이 가능합니다.

    이러한 시스템을 이용하여 디자인 시스템을 구현한 경험이 있습니다.

  • 효율적인 데이터 구조를 작성하여 유지보수 용이하게 Folder Structure를 구성합니다.

  • Redux, Vuex와 같은 상태 관리 패턴에 대해서 사용해봤으며, 복잡한 코딩을 피합니다. 상태 관리 패턴이 소스가 길어질 수록 레거시가 많이 쌓이기 때문입니다.

  • Container 와 Presentational의 차이점을 인지하고 구조를 서버에서 데이터 받는 부분과 데이터를 뿌려주는 부분을 명확하게 작성합니다

  • Atomic Design으로 컴포넌트 분할을 하거나 프로젝트에 맞게 구조를 작성합니다.

  • React, Vue 컴포넌트 라이프 사이클을 이해하여 적절하게 활용합니다.

Server

  • Express.js를 활용하여 RESTful API를 작성할 수 있습니다.

  • 라우팅 규칙을 적절하게 사용하여 경로를 작성합니다.

  • PostgreSQL 9, 10 버전을 사용할 수 있으며 쿼리 작성이 가능합니다.

    transaction 처리, window function 등을 사용하여 PostgreSQL만의 표현을 사용할 수 있습니다.

  • JWT 인증을 사용하여 브라우저 쿠키에 저장하고 세션 처리를 할 수 있습니다.

DevOps

  • 자동화 프로세스를 만들어서 팀 내 생산성을 높힙니다.

    코드리뷰 자동화 프로세스

  • AWS EC2, ECS, S3 등의 인프라 요소를 사용해본 경험이 있습니다.

  • Jenkins, Docker를 사용하여 개발 환경을 구축할 수 있습니다.

  • Travis CI, AWS Code Deploy, DinD, docker compose, AWS S3 사용하여 무중단배포를 구축할 수 있습니다.

  • Nginx 설정을 다룰 수 있으며, PM2, Nginx를 통해 로그 분석이 가능합니다.

  • Crontab, Slack bot 등의 경험이 있습니다.

그 외

  • Git을 능숙하게 다룰 수 있습니다.

    git flow, github flow, gitlab flow를 회사에서 적용해본 경험이 있습니다.

취미

블로깅

  • 개발을 좋아해서 틈틈히 공부를 하고 글을 작성하여 블로그에 투고합니다.

  • 6년간 꾸준히 글을 써오면서 성실한 면이 부각되었다고 생각합니다.

  • 위의 제목을 누르면 제 블로그를 가실 수 있어요!

  • https://vallista.tistory.com/ 에서 과거의 글을 보실 수 있어요!

운동

  • 운동을 통해 스트레스를 해소하고 건강을 챙깁니다.

  • 끊임없는 야근의 원동력이 되는 중요한 덕목입니다.

맛집탐방

  • 카카오맵에 400개 이상의 맛집이 잠들어있는 일명 '마슐랭'

  • 맛있는 음식점을 세계 여행다니면서 기록하고 있습니다.

웹 만들기

  • 만들고 싶은 웹을 만듭니다. 좋아하는 연예인의 팬 페이지, 블로그 템플릿 같은 디자인적 요소가 많은 걸 좋아해요.

활동

강연

  • 2021.6.1 [우아한인터뷰] 프론트엔드 개발자 '마광휘님'

  • 2018.07 한국게임과학고등학교, “게임 개발자에서 서비스 개발자로” 주제로 강연

  • 2018.04 한세사이버보안고등학교, “게임 개발자에서 서비스 개발자로” 주제로 강연

  • 2015.08 장성중학교, “게임 프로그래머 직업에 대해” 주제로 강연

수상

  • 2020 우아한형제들 우수사원

  • 2016.08 제 15회 KWC, 지도교사상 (우송대학교 총장상) - 우송대학교

  • 2013.11 Smarteen App Challenge, 우수상 (대표이사상) - 캡스톤 파트너즈

  • 2013.10 비즈쿨 창업 경진대회, 은상 - 창업진흥원

  • 2013.08 제 12회 KWC, 대상 (대전광역시 교육감상) - 우송대학교

  • 2013.08 제 11회 게임캠프 게임제작 부분, 대상 (전라북도지사상) - 전라북도

  • 2013.07 제 9회 주니어 창업 경진대회, 우수상 - 한밭대학교

  • 2013.05 제 15회 고교생 만화 애니메이션 공모전 게임 부문, 은상 (상명대학교 총장상) - 상명대학교

  • 2013.04 2013 기능경기대회 전라북도, 금상 (기능경기 위원장상) - 전라북도 기능경기 위원회

  • 2013.02 KBS 스카우트 인터파크편, 최종 우승 (1등) - KBS

  • 2012.11 금강 청소년 영상 예술제 게임 부문, 금상 (한국컨텐츠진흥원장상) - 한국컨텐츠진흥원

  • 2012.06 제 18회 서울정보과학경시대회 장려상 - 서울정보과학경시대회