Next 웹 프론트엔드 세미나, 프론트엔드개발, 그럴 수 있지.

스피커 : 쿠팡 최선진 풀스택 웹 개발자

  • 프론트엔드? 크게 나누면
    • UI Component
    • Ajax UI
    • Markup
    • UI interaction
    • UX prototype
  • 쿠팡도 이런 거 거의 한 사람이 다합니다…
  • 하늘 같은 User님, 기획자 Product Owner, UX Designer, Back-end Developer 이들이 생각하는 프론트엔드 개발자의 역할은 다르다. 그래서 요구 사항이 다르다..
  • 이슈들? Validate JSON Data, Cross Domain, Image sprite, Web Accessilility(웹 접근성), CSS methodology(css 방법론은 전역에서 버튼 같은 클래스를 선언하면 헬이 될 수 있다. 네이밍 어떻게 할 거야?), Bug & Sustaining Task, Search Engine Opimisation(SEO, 재밌지만 코드라기 보다는 url이나 meta tag 등을 잘하는 거), Cross Browsing, Resolution(retina를 대응하면서 발생했던 문제인데 이미지 스프라이트, 크로스브라우징과 겹쳐서 힘들다.. IE 8의 헬), Page Load, etc….
  • NEXT에서 공부하던 거랑 괴리감을 느낀 것이, NEXT에서 최신 기술로 클린한 노력을 하는 것과 비교해서 실전은 더러웠다. 역시 크로스 브라우징이 문제.
  • 도구들? google analytics, LESS, karma, JS library, SASS, HandleBar helper, SEO-Guide, JSON beautifuler, chrome Extension(만들기 쉬워서 종종 만들어서 쓰기도 한다.), Qunit, Browser Stack -> 유료 도구들 살 때 디자인 비용으로 사게 되더라..
  • 그러나?
    • filter 기능을 만들고 적용하기 버튼을 만들었더니, 유저 테스트를 했더니 AND 연산이 아니라 OR 연산이라고 생각하는 User 님 등 제대로 이해 못하는 사용이 있었다. 아마존을 참고하는 등 여러 과정을 통해 적용하기 버튼을 없애는 등 작업을 하고 등등 작업 중.
    • 이런 걸 하다보면, 뭐가 더 옳은 지 모르게 된다. 어차피 기능 자체는 우리들(NEXT)에서 못하는 사람은 없는데 뭘 만들어야 되는 건지 알기 어려웠다.
    • User Test, AB Test가 악용되는 케이스가 있기는 하지만 이것이 그나마 객관적으로 무엇이 더 좋은지 평가하는데 도움이 되었다.
    • 모바일에 플랫 디자인을 적용해서 유려하게 만들었는데 오히려 역효과… 유저에 대한 타겟팅을 분명히 하자.
  • 어디로 향할 것인가?
    • 자신만의 오답노트 - 깃헙&지킬 등 블로그 같은게 좋더라.
    • 부딪혀보기 - 백그라운드 사이즈가 IE에서 안먹은 적이 있다. 레티나 이미지 적용하다 쿠팡 로고가 엄청 크게 나온 적이… react나 앵귤러 같은 건 회사에서 쓰기 어려운 면이 있기는 하다. 뭐가 더 좋은 지 회사 내에서도 말이 많고. 그래도 쓸 수 있다. 도전해보는게 의미가 있다. 링크드인에 둘 다 적을 수 있게 되는 거 좋다! 영어로 메일이 오더라.
    • 속도가 전부가 아니다 - 되게만 하는 건 쉽지만 코드를 뒤집고, 요구사항이 바뀌고, 이걸 급급하게 따라가기만 하면 나중에 내가 뭘 하고 있는 지 모르게된다. 그럼에도 빨리하라는 요구가 들어오지만..
    • 라이브러리化 - 코드를 요구사항이 생겨서 만들 때 나만의 라이브러리를 만들어서 유연하게 쓸 수 있도록 하는 것이 요구사항을 대하는데 유용했다. 미묘한 사이즈 조절이나 이벤트 시간 등… 조절 가능하도록.

질문

  • 쿠팡에서 쓰는 AB로 쓰는 건? GA뿐? -> 그거 말고 여러가지… (잘 못알아들음)
  • 테스트는 혼자 하는지, 팀이 하는지 -> 쿠팡은 QA가 따로 없어서 팀마다 카르마, Qunit 등 쓰기는 하지만 알다시피 프론트는 테스트가 쉽지 않다. 각자 어떻게든.