About me

"누구나 차별받지 않고 모두가 쉽게 접근할 수 있는 웹을 만드는 Front-End Developer" 라는 직업적 목적을 가지고 웹 표준, 웹 접근성, 사용자를 위한 UI/UX, SEO에 큰 관심을 두고 좀 더 나은 웹을 만들어 가기 위해 고민하고자 하는 웹 프론트 개발자입니다.
무엇보다 웹 접근성 향상 업무에 가장 큰 관심사를 가지고 있고 이를 위한 업무를 진행할 때 큰 만족감을 느낍니다.

논리적이고 구조적이며 의미론적인 코드를 사랑하고 효율적이고 이해하기 쉬운 코드를 만들기 위해 노력하고자 하며 Front-End의 전반은 내 업무 영역이다라는 생각으로, 수동적 입장으로 일하기 보다 좀 더 나은 접근성, 좀 더 나은 UI/UX를 제공할 수 있도록 기획·디자인에 역으로 제안과 설득, 토론을 아끼지 않는 적극적인 입장으로 일하기를 즐겨합니다.

Personal Details

Education

Techincal Skills

HTML, CSS(SCSS), Web Standard, A11Y, SEO

• 웹 표준을 준수하고 의미론에 따라 유의미한 마크업을 위해 노력합니다.
• WAI-ARIA를 통한 웹 접근성 향상, NVDA · Sense Reader · Voice Over(iOS)를 통한 스크린리더 사용 경험이 있습니다.
• 검색엔진최적화 경험이 있으며 JSON-LD, microdata를 통한 구조화데이터 경험이 있습니다.
• SCSS, PostCSS등 CSS Pre-processor/Post-processor를 사용할 수 있고, BEM 방법론을 선호합니다.
• 반응형/적응형 웹에 대한 경험이 있고, IE 5.5부터의 경험으로 다양한 브라우저를 지원할 수 있습니다.

JavaScript(ES 6+), Vue, Nuxt.js

• Vue 프레임워크를 익숙하게 사용할 수 있으며, Vue + Nuxt로 Universal Redering을 지원하여 zero-base로부터 사이트 개발, 배포까지 진행한 경험이 있습니다.
• Atomic Design 방법론을 선호합니다.
• UI 라이브러리(Carousel, AutoSuggest Combobox 등)를 작성해 본 경험이 있습니다.

Git, Gulp

• Git CLI로 버전 관리하는 것에 익숙합니다.
• GitHub, GitLab를 통한 협업 경험이 있습니다.
• 코드 리뷰 경험이 있습니다.
• Gulp를 통한 환경 구축에 익숙하며, 업무를 위한 Gulp template을 제작하여 공유한 경험이 있습니다.

ETC

• Figma, zeplin으로 디자이너와 커뮤니케이션 한 경험이 있습니다.
• Storybook으로 컴포넌트에 대한 문서화를 진행해본 경험이 있습니다.

Work Experience

Career Description

㈜강남엄마

Vue + Nuxt 기반의 강남엄마 학부모/학원장/어드민 플랫폼에 대한 Front-End 개발·유지보수

주요 프로젝트

• 강남엄마 학부모 사이트 리뉴얼 (20.06.01 ~ 20.08.03)

  • Nuxt 기반으로 학부모 사이트 리뉴얼 진행
  • CSS Grid Layout, Flex Layout 적용, 반응형 웹 구현
  • Figma와 Swagger를 통해 디자이너, 백엔드 개발자와 협업 진행
  • Sotrybook을 이용하여 컴포넌트 문서화

㈜투어팁스

Vue 기반 Front-End 개발 , Trello를 이용하여 업무 관리, GitLab CI로 지속적 통합 유지

주요 프로젝트

• 모하지 사이트 유지보수

  • Vue 기반 사이트 4개 플랫폼 — 사용자, 판매자, 관리자, 제휴 플랫폼에 대한 기능·버그 개선, 미 개발건 및 신규 기능 개발, 매 달 진행되는 프로모션 페이지 제작 등 수행

  • 아웃소싱 업체로부터 완전히 인수인계가 이루어지지 않아 Vue Component, Store, Router 등의 구조를 산출물로부터 역으로 분석하여 수정하는 형태로 업무 진행

• eDM 및 하나투어 이벤트 페이지 제작

  • 매 주 발송되는 eDM 및 매 달 하나투어 이벤트 페이지 제작으로 웹 퍼블리싱 업무 병행
    생산성 향상을 위해 Gulp를 이용하여 각 템플릿을 구축하여 사내 공유

  • eDM의 경우 페이지 제작 개발 환경부터 AWS S3로의 이미지 업로딩, AWS SES와의 연동을 통한 테스트 이메일 발송 자동화

• 업무 프로세스 정립

  • 팀 내 커뮤니케이션을 돕기 위해 Git 커밋 메세지 작성 규칙, 브랜치/병합 전략 수립·문서화
    GitLab issue template 및 Trello card template을 등록하는 등의 일을 주도하여 진행

콘텐츠연합플랫폼㈜

PC/mobile 웹 퍼블리싱, Ajax를 통한 data binding, UI 개발 등을 전담하여 웹 표준, 웹 접근성 향상의 업무 진행.

Youtrack을 이용하여 티켓 주도 개발 프로세스로 개발, Swagger를 이용하여 API 개발자와 클라이언트 개발자 간 규격 공유, GitHub와 Jenkins를 이용하여 지속적 통합 유지

주요 프로젝트

• pooq 2.0 Front-End 개발 / 유지보수

  • cito.js(virtual DOM library)를 이용하여 MPA 개발

  • 프리랜스 웹 퍼블리셔의 코드 품질 관리를 위해 HTML/CSS 코딩 컨벤션 수립 및 github를 통한 코드리뷰 진행

  • 웹 접근성 향상을 위해 지속적으로 학습 진행, WAI-ARIA를 적극 도입하여 컴포넌트별 접근성 향상 도모.
    autosuggest combobox, carousel slide, modal dialog 등의 컴포넌트 및 문서구조(landmark)에 WAI-ARIA를 적용하여 접근성 향상 기여 (웹 플랫폼에 한하여서는 접근성 관련 진정 건수 10% 미만 유지)

  • 기획/디자인 단계의 산출물을 토대로 웹 접근성 제공 여부를 확인하여 각 담당자에게 웹 접근성 관련 이슈 제기 및 대안 제안, 운영 중 사이트에 대해 지속적으로 웹 접근성 현황을 검사하여 유관 부서에 웹 접근성 이슈 및 가이드 라인 전달 등을 통해 접근성 품질을 유지

KT innoedu

사내 플랫폼 및 고객사별 사이버교육 사이트 웹 퍼블리싱 및 UI 개발

• 웹 표준 리뉴얼 개인 프로젝트 진행 (Markup, JavaScript 개선)

  기존 운영 사이트에 대해 웹 표준이 준수되지 않은 마크업, JavaScript등에 대한 지속적인 개선 프로젝트 진행
  기존에 server-side 개발자가 진행하던 client-side UI 개발 등의 JavaScript 작업을 모두 웹 퍼블리셔 업무로 가져와 코드 품질 및 생산성 향상에 기여

• 웹 접근성 준수 제안

  2013년 4월 11일 장애인차별금지법 적용 범위의 모든 법인으로의 확대에 따라, 웹 접근성 준수에 대한 필요성 및 기본/향후 프로젝트에 대한 웹 접근성 향상 제안서 작성 및 보고
  이후 모든 프로젝트에 대해 웹 접근성 준수를 기본 요구사항으로 진행할 수 있도록 기반을 다짐

• 웹 퍼블리싱 사내 교육

  Flash 콘텐츠를 HTML 5 기반의 콘텐츠로의 전환 계획에 따라 관련 부서 직원들을 대상으로 웹 퍼블리싱에 대한 사내 교육 진행

Work Style & Strengths

• Role-Driven

  • 상위 결정권자의 업무 지시에 따라서만 업무를 진행하기 보다, 문제점이 발견되면 해당 문제에 대한 이슈를 공유하고 이를 해결하기 위한 별도 프로젝트 진행을 요청하거나 개인 프로젝트로 가져와 틈틈히 진행하고, 전문 분야에 대한 높은 품질의 결과물을 만들기 위해 기획·디자인·동료 개발자들과 각 산출물에 대한 리뷰와 논의를 아끼지 않습니다.

    투어팁스에서의 업무 프로세스 정립을 위한 각종 룰의 수립·문서화나 Gulp 개발 환경 템플릿 제작 모두 지시된 업무가 아닌 팀의 업무 생산성을 높이고자 개인 프로젝트로 진행하여 데일리 스크럼을 통해 공유하고 구성원들의 피드백을 받아 지속적으로 개선을 꾀하였고, Webpack 빌드 시간이 너무 오래 걸리는 불편함이 지속되어 이를 해결 하고자 역시 개인 프로젝트의 일환으로 Webpack 4, Babel 7으로의 마이그레이션, 접근성 향상을 위한 개인 프로제트 등을 진행하였습니다.

    pooq의 경우 기획자의 의도로 동영상 플레이어의 자동 재생 기능이 요구되었으나 YouTube 역시 동일한 기능이 웹 접근성의 이유로 WebAim으로부터 지속적인 개선 요구를 받고 있음 등을 근거로 들어 해당 기능을 사용자의 선택에 의해 설정할 수 있도록 하는 UI를 제안하여 좀 더 좋은 사용성을 가진 결과물을 만들 수 있었습니다.

  • 스스로 세운 일정에 대해서는 가능한 기한 내 처리할 수 있도록 하며, 부득이할 경우 사유와 함께 일정 조정을 요청하여 전체적인 업무에 대한 일정 리스크를 최소화 하고자 합니다.

• 업무 관련 지식에 대한 지속적인 학습

  • Front-End 기술 변화의 속도를 빠르게 좇아가지는 못하지만 기술 변화를 계속해서 놓치지 않기 위해 메일링 리스트 구독하고 매일 읽는 것을 놓치지 않고 있습니다.
    현재는 FrontEnd Focus, Smashing Magazine, UX Design Weekly, CSS-Tricks, CSS Weekly, A11y Weekly, SE Land를 구독하며 매일 한 개 주제에 대한 뉴스레터를 보고 있고 이에 대한 습관이 잘 정착되면 구독 수를 더 늘려갈 계획을 가져가고 있습니다.

  • 업무 분야에 대한 기본 지식을 탄탄히 하고 향상시키기 위해 학습 계획을 세우고 세미나, 동영상 강의, 전문 도서 등을 통해 지속적으로 학습을 진행하고 있으며, 현재는 ES 6+에 대한 전문성을 더 깊게 가져가기 위한 학습을 진행하고 있습니다.

  • 학습한 것들을 학습으로 끝나는 것이 아니라 작은 부분이라도 가능한 실무에 적용시키고 지속적으로 코드를 개선해 가기 위한 노력을 아끼지 않습니다.

• 웹 접근성에 대한 연구 경험에 따른 다양한 웹 접근성 이슈 분석 및 해결

  • 2016부터 한국정보화진흥원 디지털격차해소팀에서 장애인의 정보 접근성 걸림돌 제거를 위한 기술 연구반을 통해 웹 접근성에 관한 기술, 이슈 연구를 진행해 오고 있고 그 결과로 연구반에 참여하고 있는 분들과 함께 WAI-ARIA 사례집, 기술 이슈 분석 보고서 등을 배포하고 현재 WAI-ARIA 작성 방법 공식 문서 번역 및 유튜브를 통해 동영상 강의를 진행하고 있습니다.

More Details about Me

What I am like as developer

해결은 스스로, 정보는 공유

개발자에게 문제 해결은 숙명이라고 생각하고, 이 문제를 어떻게 해결해 가는가가 그 사람의 성장을 결정한다고 생각합니다. 단기적으로 누군가에게 혹은 집단 지성을 통해 손쉽게 해결을 받을 수도 있겠지만, 그것은 어디까지나 눈에 보이는 문제를 해결만 할 뿐 이후 동일한 문제에 봉착했을 때 다시 해결할 수 없는 상황, 즉 한 걸음도 성장하지 못하는 결과를 만들어 낼 수 밖에 없다고 생각합니다.

10여년 가까이 업무를 진행해 오면서 늘 해결해야만 하는 문제를 만났고, 때로는 이틀 삼일 밤을 잠을 설쳐가며 해결책을 찾기 위해 이런 저런 방법들을 시도해보기도 하고 해결 방법을 찾아 검색에 검색을 더해가며 지금의 공식 문서, Stack Overflow, Github issue, 블로그 아티클 등을 찾아보는 습관이 자리잡았습니다.

그리고 이렇게 해결 된 것을 나 혼자의 지식으로 가지고 있는 것이 아니라, 이를 다시 재생산하여 공유하고 동일한 어려움을 가진 이들로 해결 한 방법을 수용하거나 고민해 볼 수 있도록 하고 나아가 이를 통해 모두가 기술을 활용하는데 어려움을 덜어내는 것이 기술 발전의 핵심이자 가치라고 생각합니다.

함께 할 때 비로소 유의미한 성장이 있다

지난 10년 동안 업무를 진행하면서 사람들을 통해 배운 것은, 함께 지식과 경험을 공유하고 의견을 나누고 함께 고민할 때 비로소 유의미한 성장이 있다라는 것이었습니다.

투어팁스 개발팀에서 업무를 진행하며 데일리 스크럼, 코드 리뷰를 통해 많은 아이디어를 얻고 아이디어를 내어 도움을 주기도 하고 학습에 대한 자극을 받기도 하고 정보를 얻기도 하면서 개인적으로도 팀에게도 좋은 성장의 기회를 가졌었다고 생각합니다.

저 개인은 역량이 뛰어나지 않지만, 누군가보다 더 가지고 있을 수 있는 지식과 경험을 함께 나누고 나보다 뛰어난 누군가의 지식과 경험을 나누어 받으면서 더 많은 성장의 기회를 주고 얻을 수 있는 것이 함께의 가치라고 생각합니다.

서비스는 혼자 만드는 것이 아니다

아무리 개발자나 사내 개발팀의 역량이 뛰어나다고 하더라도 서비스는 개발자 혹은 개발팀 혼자 만들어 내는 것이 아니라, 여러 유관 부서들과 함께 만들어 가는 것이기 때문에 팀 내 협업 뿐만 아니라 유관 부서들과의 협업과 충분한 협의가 중요하다 생각합니다.

과거 콘텐츠연합플랫폼에서 개발자의 입장으로서는 휴먼 리소스의 절약 및 향후 프론트엔드 프레임워크의 도입 등을 위해 IE 하위 버전(IE 8 이하)에 대한 지원을 중단하고 IE 10 이상 지원의 방향을 준비하자는 제안을 했으나 사업부에서는 유료 사용자의 매출에 영향이 있으므로 불가하다는 입장을 밝혔었습니다.
그에 따라 브라우저 업데이트 안내, 제한 된 고도화 기능 제공 등을 통해 점진적으로 하위 브라우저 사용층을 줄여나가는 방향으로 협의를 진행했고 동시에 하위 브라우저의 유료 사용자 이용률을 주 단위로 수집하여 감소율을 측정하고 사업부에서 수긍할 만한 수치를 만족하는 시점을 예측할 수 있도록 하여 하위 브라우저 사용자를 성공적으로 줄이는데 이르렀습니다.

How I solved the problem

보통 이슈를 해결 할 때는 다음의 순서를 따라 진행하고 있습니다.

문제 인식 → 발생 문제에 대한 데이터 수집 → 원인 분석 → 해결

다만 원인 분석이나 해결이 어려운 경우를 만나게 되는 때가 있는데 이 경우에는 원인에 대한 가설을 세우고, 해당 가설에 대한 해결 방법 역시 떠오르지 않을 때에는 공식 문서 혹은 검색 등을 통하여 처리하고 있습니다.

최근 이 케이스로 겪은 것 중 하나가 웹팩 빌드 시간이 너무 길어져 업무를 진행하는데 CI build 프로세스가 시간 초과되어 실패하는 경우가 눈에 띄기 시작하여 웹팩 빌드 시간이 길어지는 문제를 해결할 수 있는가에 대한 문제를 인식하고,

웹팩 빌드 시간이 어느 경우에 시간 초과되는지를 확인하여 임시 조치로 8개 플랫폼이 동시에 CI build 프로세스가 진행되지 않도록 팀원들에 공유함과 동시에, 빌드 시간이 길어지는 이유에 대해서 원인을 분석을 시작했습니다.

하지만 빌드 시간이 길어진 시점의 이전과 이후에 개발 코드 상의 다른 점은 거의 존재하지 않았기 코드를 통해서는 분석 하기 어려웠고, 웹팩 빌드 시간이 길어지는 이유에 대해서 Vue 공식 문서, Webpack 공식 문서 및 github issue, Stack Overflow 등을 살펴보면서 원인과 해결책을 동시에 찾기 시작했습니다.

찾아가는 과정에서 Webpack 3에서 4로 마이그레이션을 통해 빌드 시간을 60~98%까지 개선할 수 있다는 아티클을 확인했고, 이를 토대로 원인 분석이 미진하다 하더라도 우선 적용을 통해 조금이라도 시간을 축소시켜 개발 시에 발생될 수 있는 문제를 해결하고자 마이그레이션에 착수 했고, 그 결과로 기존에 평소 40분 정도 걸리던 빌드 시간이 11분 정도, 1/4 수준으로 줄어든 것을 확인 할 수 있었습니다.

Extracurricular Activities

• WAI-ARIA Authoring Practice 1.2 번역 (2019.12 ~ )

• 정보접근성 오픈 아카데미 온라인 강의 (2019.01.15 ~ )

  • Accessibility Open Academy 유튜브 채널에서 접근성 강의 진행 중

    • WAI-ARIA 작성 방법 1.2 미리보기
    • 개발환경에 접근성 검사 도구 끼얹기
    • 링크?버튼?어떻게 다를까?
    • 탭 콘텐츠 접근성 향상 시키기!

• 장애인의 정보접근성 걸림돌 제거를 위한 기술 연구반 (2017 ~ )

  • "예제로 살펴보는 WAI-ARIA 사례집" 집필 참여
    • example code, jQuery Plugin 제작 - github
  • "2017 정보접근성 기술이슈 분석보고서" 집필 참여
  • 스크린리더 사용자를 고려한 착한 마크업
  • 더 접근 가능한 모달 대화상자 만들기

• Gulp for Beginners 강의형 스터디 (2019.03 ~ 2019.12)

• Git CLI for Beginners 강의형 스터디 (2018.06 ~ 2019.12)

• WSconf., html5 융합기술포럼, 네이버 하드코딩하는사람들 등 세미나 발표

  • ARIA 사용 이유와 주의해야 할 점 — IAT (정보 접근성 기술) 컨퍼런스 2020
  • 접근 가능한 레이어팝업 Feat. WAI-ARIA — 한국정보화진흥원 접근성오픈아카데미
  • WAI-ARIA Best Practices — W3C HTML5 Conference 2017
  • 웹 미디어 플레이어 접근성 — IAT(정보 접근성 기술) 컨퍼런스 2017
  • Document Outline in HTML 5.1 — WSConf. 2017
  • Web Accessibility 101 — 하드코딩하는사람들 2017 상반기 세미나
  • WAI-ARIA 이제는 실전이다 — WSConf. 2016
  • WAI-ARIA 실전 Note — 하드코딩하는사람들 2016 하반기 세미나
  • How to Read W3C HTML5 Specification — 하드코딩하는사람들 2016 상반기 세미나
  • 그 외 세미나 발표 자료

• W3C Accessibility Requirements for People with Low Vision FWD 번역 (2016.05)