WSConf 2017 Seoul Vol.2 참관후기

한국 웹 접근성 그룹에서 주체한 Front-end 컨퍼런스를 다녀왔습니다.

들어가기전에

  1. WSConf란?
  2. 무엇을 배웠나?
  3. 느낀점
  4. 한줄평

1. WSConf란?

기술 개발에 중점적이던 기존의 컨퍼런스 방식에서 HTML, CSS, Web Accessibility, SEO등 Front-End 개발 전반을 다루며 좀더 쉽고 유용한 Front 친화적인 컨퍼런스입니다.

한국 웹 접근성 그룹이 주최가 되어 진행된 이번 WSConf는 김정윤님과 장성민님의 주도하에 진행되었으며, 판교에 있는 SK 플래닛 SUPEX홀에서 강의를 들을수 있었습니다.


2. 무엇을 배웠나?

간단하게 요약하자면

  1. AMP(Accelerated Mobile Pagees Project) 이용하여, 웹사이트를 느리게 만드는 요소들을 제거하여 빠르게 만드는 방법
    https://www.ampproject.org/learn/overview/
  2. PWA(Progressive Web Apps)로 웹브라우저가 네이티브 앱처럼 동작되는 방법
    https://developers.google.com/web/fundamentals/getting-started/codelabs/your-first-pwapp/?hl=ko
  3. HTML 5.1 명세에 있는 Outline이 동작되는 방법
  4. SVG WebIcon Font를 이용하는 방법
  5. WebFont 적용시 이점과 브라우저별 대응하는 방법
  6. Flex를 유용하게 사용하는 방법
  7. Web Animation이 DOM에 영향을 최소한으로 하며 구동하는 방법

3. 느낀점

AMP는 웹사이트를 아주 강력하고 빠르게 만들수 있다는 장점은 있지만 지켜야할 명세가 많아 아직까지 프로젝트에 도입하기에는 위험할 수 있겠다는 느낌을 받았습니다. 또한 AMP가 아직은 HTML 표준이 아닌 아직은 구글에서 지양하는 방법이기 때문에 새로운 프로젝트에서 실험적으로 도입해보고 나중에 보편화 되었을때 사용하면 좋을것 같다는 느낌을 받았습니다.

https://www.ampproject.org

PWA는 굉장히 흥미로운 주제였습니다. 모바일 웹에 특화되게 작성한 사이트를 모바일에서 다운로드 받아 Background에서 js를 유지하며 오프라인 앱처럼 사용할 수 있다는것에 엄청난 매력을 느꼈습니다. 아직 Safari에서는 준비중이며 Chrome에서는 가능하다고 하니 테스트해보면서 익혀두면 추후 많은 도움이 될것같습니다.
https://developers.google.com/web/fundamentals/getting-started/codelabs/your-first-pwapp/?hl=ko

https://addyosmani.com/blog/getting-started-with-progressive-web-apps/

HTML 5.1은 먼이야기일줄 알았는데 점차 도입이 머지 않았다는 생각이 듭니다. 내용이 쉽지않아 아직은 받아드리기 힘들지만 5.1의 DOM 알고리즘에 대해서 생각해 볼수 있는 시간이 였습니다. 쉬운 내용은 아니여서 아직은 100% 소화하기에는 무리였습니다.

SVG Icon Font은 정말 대단한 녀석입니다. 각각의 언어로 표현하지 않아도 그림으로 정보를 전달할수 있다는건 정말 많은 이점을 가져올수 있다고 생각합니다. 더욱이 SVG로 작성하기 때문에 아무리 확대해도 벡터값으로 표현할수 있다는것은 분명히 매력적인 부분입니다. 대부분의 프로젝트에서 Image Icon을 사용하는데 이것은 DOM Load속도를 느리게 하고 각 플랫폼별 Icon 사이즈를 다르게 가져가야하는 만큼 동적으로 변화할수 있는 Icon형태는 반드시 필요하다고 생각합니다. 물론 Icon이 장점만 가진것을 아니지만 일부 단점을 상세시킬 만큼의 장점이 충분하다고 생각합니다. 하지만 제가 직접 SVG를 작성하는것은 아직은 무리이므로 프로젝트에 도입하기위해서는 다른분의 도움없이는 아직은 무리라고 생각합니다. (Free SVG Icon을 공유 받을수 있는 Site는 존재는 합니다.)
https://www.w3schools.com/html/html5_svg.asp

WebFont를 로컬에서 작용하는 font와 서버에서 받아서 사용하는 WebFont의 차이점과 WebFont를 통해 얻을수 있는 이점을 잘 설명해 주셨다고 생각합니다. 다국어를 지원할 부분이 아직은 없지만 다국어를 지원하게 된다면 많은 도움이 될것같습니다. 특히 렌더링시 웹폰트 다운로드 받을때 텍스트가 중간에 변형되는 현상을 막는 방법은 유용하게 들었습니다. (FOUT/FOIT/FOFT)

Flex는 정말 강력한 CSS라고 느낄수 있었습니다. 특히 남은 영역을 계산해서 item들에게 분배한다는 프리스페이스 영역을 들었을땐 충격적이였습니다. IE 10이전 버전에서는 Flex지원이 미비하지만 IE의 점유율이 줄어들고 Chrome점유율이 늘어나는 만큼 앞으로 주로 쓰이는 강력한 속성이 될것이라고 기대됩니다. 물론 IE9이전버전에서도 Flex를 지원하지만 추가 작업이 필요합니다.

http://webdir.tistory.com/349

Web Animation에 대해서 다시 생각해볼수 있는 시간이였습니다. 애니메이션을 어떻게 만드냐에 따라 렌더링 속도에 많은 영향을 줄수 있겠다라는것을 알게되었습니다. Dom에 최소한의 영향을 줄수 있게 만들어야겠습니다.


4. 한줄평

판교까지 가는데 힘들었지만 그래도 많은 유용한 내용을 들을수 있었습니다. 이번 컨퍼런스에서 알게된 내용을 조금더 활용해보고 해당 내용을 정리하는 시간이 있으면 좋을것 같습니다.