지니월드/경험

[20161217] WSConf. 2016

zineeworld 2016. 12. 17. 11:01
반응형


2016.12.17. 토 AM 10~ PM 6

@마이크로소프트코리아

http://wsconf.org/



- 발표자료가 공유되면 추가할 계획입니다 -




1. CSS Selector in HTML - 정찬명

Lv.1

  • 아이디, 클랙스 선택자
    • 아래 목록에서 유효하지 않은 선택자는?


https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id

ASCII 문자 및 숫자를 제외한 문자 사용, '_', '-','.'는 HTML4에서 허용되지 않았기 때문에 호환성 문제가 발생할 수 있습니다. HTML5에서 이 제한이 해제되었지만 ID는 호환성을 위해 문자로 시작해야 합니다.


See the Pen [CSS Basic] id/class naming rule by zinee (@zineeworld) on CodePen.


정답 : 3, 5, 6, 7번

3번 = '숫자'로 시작할 수 없음

5번 = '하이픈'으로만 구성할 수 없음

6번 = '하이픈+하이픈'으로 시작할 수 없음

ㄴ 윈도우 크롬 (o) 파이어폭스 (o) / IE11 (x)

ㄴ 맥 크롬(o) / 사파리-버전 10.0.2(11602.3.12.0.1) (x)

(클릭하면 커집니다)


7번 = '하이픈+숫자'로 시작할 수 없음


  • 가상 선택자
    • (가상 클래스 선택자 > 가상 요소 선택자) 우선순위가 다름
    • 가상 클래스는 이미 있는 돔 요소를 선택, 가상 요소는 돔에 없는 요소를 선택
    • link visited focus,hover active 링크 비지티드가 밑에 오지 않도록 주의
    • :first-line 글씨크기가 커지면 첫 줄은 언제든지 바뀔 수 있음 그래서 가상 요소
    • : (ie 8 지원) / :: (ie 9 부터 지원)
  • 선택자 붙여쓰기는 선택자를 조건문으로 사용할 수 있다는 것이다




Lv.2

  • 전체 선택자
    • 브라우저 성능이 좋아져서 전체 선택자가 느려진다는 것은 옛 말이 됨
    • 전체 초기화 보다는 필요한 범위 내에서 쓰는 것이 좋음
  • CSS에서 아키텍쳐는 괄호 밖에 있고, 성능은 괄호 안에 있다.
    • https://benfrain.com/css-performance-revisited-selectors-bloat-expensive-styles/
  • :lang 속성에서는 유요한 언어 코드(BCP 47)값을 사용해야 한다
  • :before, :after (IE7 X)
  • clear: both 는 display: block 일 때만 사용 할 수 있다




Lv.3

  • 일반 형제 선택자 (E ~ F)
    • h2 ~ p : h2 아래에 있는 모든 p 선택
  • 속성 선택자
    • img[src$=“.png”] : .png로 끝나는 이미지 선택
  • 타겟 가상 클래스 선택자 (E:target)
  • 부정 클래스 선택자 (E:not(s))
  • 구조 가상 클래스 선택자
    • E:root -> HTML
    • E:only-child
    • E:nth-of-type (E 요소만 순서 계산에 영향을 미침)
    • E:nth-child (E가 아닌 요소까지 순서 계산에 영향을 미침)
  • flex : http://goo.gl/V64vSl
  • 구체성 검사 : http://specificity.keegan.st
  • nth-child-tester : https://css-tricks.com/examples/nth-child-tester/
  • CSS4 selector : http://css4-selectors.com/




2. 유지보수 하기 쉬운 CSS 전략 - 안형우

권장사항이 우리 목을 조르고 있다 (Our CSS best practice are killing us.)

상속과 inherit를 잘 사용해야 한다

클래스 명은 내용을 설명해야 하는가? (CSS의 시맨틱 != 내용의 시맨틱) by 니콜라스 갤러거

내용 시맨틱(검색엔진, 사람이 참조) -> HTML, Microdata / 개발 시맨틱 (개발자가 참조) -> css 클래스명


OOCSS (Object Oriented CSS) by 니콜 설리반, 2009

* 골격과 겉모양을 분리(Separate Structure and Skin)

* 컨테이너와 내용물을 분리(Separate Container and Content)


페이스북도 900여개의 선택자를 20개로 줄였다고 함


OOCSS의 도구

1. 특정도(명시도) 평준화

2. 태그 선택자 사용 자제

3. 재사용성을 확보하는 이름

4. 기본 객체를 갖추자

5. 타이포그라피 전략을 세우자


클래스와 태그 선택자를 결합하지 말자

div.box (x) / .box (o)


넓은 범위에 자손 태그를 선택자를 사용하지 말자

.title span(x)


재사용성을 확보하는 이름

.blue-title (x) / .text-primary(o)

.bottom-items(x) / .cards(o)


객체의 범위는 어떻게 정해야 할까?

토론을 통해 재사용성이 가능한 범위 안에서 정해야 한다

관련성 있는 것끼리 추상화해라


목적은 생산성

예외가 필요하다면 예외를 허용하라

오용하지 말자 (mt10, mt20, f10, ffnanum 등)


CSS 방법론


원칙에 기반해 사람과 토론한다




3. Azure x 웹개발자 - 김영재

스택오버플로우 한국 3위 개발자 김영재님(at 바풀:바로풀기 CTO)

마크업 개발자라고 하더라도 서버 쪽에 관심을 가져야 할 필요가 있다

자바스크립트에서 확장된 Node.js 와 REST API를 통해 서비스를 혼자서 다 만들 수 있다




4. What is SEO? - 전승엽

55억 - 하루 구글 검색양

63000 - 초당 검색 수

60조 - 구글이 찾아낸 웹문서

200 - 구글 Ranking factors 

500 - 구글 알고리즘 업데이트 횟수


검색엔진 최적화 === 사용자 최적화

러시아 검색엔진 Yandex


검색엔진이 하는일 - 크롤링, 인덱싱, 랭킹


Featured Snippets


HOT POINT

TDK(Title, Description, Keywords)

1000페이지를 가지고 있다면 1000가지 TDK 셋팅이 되어있어야 한다.


Heading Tag

IMG(filename, alt)

BreadCrumb(Site structure & ) - 가장 손쉽게 페이지 구조를 파악할 수 있음

Social & Data structure (OG, Twitter, Schema)

Site(Sitemap, Robots, Canonical, Redirect, Href lang & Mobile)


2017

Keywords, Rank Brain(AI), Voice Search, Bing & AMP

Rank Brain

http://searchengineland.com/faq-all-about-the-new-google-rankbrain-algorithm-234440

http://www.bloter.net/archives/242151

“매일매일 입력되는 검색 질의어 가운데 15%는 이전에 한 번도 본 적이 없든 것들”

Voice Search : 시리의 검색엔진 - Bing




5. 이미지가 마크업의 반이다 - 이환

1. 스트라이트의 기본 재료 - 이미지 jpg,png,gif

2. 저장 방법 - 메타데이터 지우기

3. 상황에 맞는 파일 형식

 - jpg는 손실압축방식이라 용량이 많이 줄어 든다

 - 단순한 색상 이미지는 png-8

 - 반투명 이미지는 png-24

4. 품질과 로딩속도 

5. 스프라이트

 - 모바일 이미지는 짝수로 만드는 게 좋음

 - 반올림하면 뿌얘지고, 반내림하면 모바일에서 여백처럼 보임

6. 제작과 코드 선언

7. 유형별 분석


스프라이트 자동화

https://github.com/twolfson/gulp.spritesmith

https://github.com/Ensighten/grunt-spritesmith

https://windtale.net/blog/css-image-sprite-automation-with-grunt-spritesmith/




6. W3C WAI-ARIA 실전 공략 - 지성봉

시맨틱은 접근성의 시작

탭, 검색(드롭다운 결과)는 스크린리더가 제대로 읽을 수 없다

자바스크립트로 동적으로 처리하는 것은 접근성 지침만으로는 해결이 안 됨

just attribute [role=""] [aria-haspopup="true"]


1. 네이티브 html 요소/속성 사용

2. 네이티브 시맨틱을 변경 금지

3. 키보드 사용 가능 click tap drag drop 

- 스크린 리더 이용자 중에는 엔터만큼 스페이지 사용하는 분도 많음

4. 비주얼 포커서블 요소에 hidden은 지양


role/property/state


keyboard interation

- checkbox (스페이스바)

- combobox (방향키, 알트+방향키, ESC, 엔터키, pageup/down)


정보접근성 향상을 위한 W3C 국제표준 WAI-ARIA 사례집

[온라인 공개배포] http://www.wah.or.kr/board/boardView.asp?page=1&brd_sn=5&brd_idx=1019




7. Google AMP(Accelerated Mobile Page) - 김태훈

마크업만으로도 AMP를 쓸 수 있음


AMP와 관련된 숫자들

6억 -> 페이지

70만개 -> 도메인

8700+ -> 개발자


AMP.JS

AMP 페이지와 리소스 라이프 사이클 및 렌더링 타임 제어

AMP 커스텀 엘리먼트 구현 코드

웹 페이지의 퍼포먼스 향상을 위한 Best Practice의 구현체

AMP는 외부 JS를 허용하지 않음

사용자 자바스크립트를 사용하려면 샌드박스 아이프레임에서 사용 가능


AMP Style

외부 스타일(request 수 줄이기 위해), 엘리먼트 인라인 허용 안함

문서에 삽입하는 형태의 인타인 스타일만 사용 가능

최대 50KB만 허용 (네이버 모바일 메인 약 100kb)

http://www.usefulparadigm.com/2016/02/24/adding-the-google-amp-to-mobile-website/


AMP Components

AMP Extended Components

https://github.com/ampproject/amphtml/blob/master/extensions/README.md


AMP 벤치마킹 이슈

- 비디오 (꼭 https 여야 함)

- JS (Go to Top 이런거 못 함)

- 외부 CSS로딩, 인라인 허용 안함


How AMP Speeds Up Performance

비동기 스크립트만 허용

모든 리소스의 사이즈를 지정

확장 컴포넌트들을 렌더링 차단 없이 실행함

써드파티 자바스크립트를 크리티컬 패스에서 제거

CSS는 HTML 내부 스타일 시트만 허용하고 크기를 제한

웹 폰트를 효율적으로 다운로드

스타일 재계산을 최소화

GPU 가속 애니메이션만 실행(transform, opacity)

리소스 로딩 순서를 제어

페이지를 즉시 로드


Inside of AMP

Promise를 잘 씀

Reflow, Repaint 최적화 (Vsync)

https://github.com/wilsonpage/fastdom




8. 반응형웹디자인을 위한 넓고 얕은 지식 - 윤원진

RWD 3원칙

  1. flexible image 
  2. fluid grid
  3. media query


반응형을 자바스크립트에 맡기지 말고 html/css로 해라


캐러셀 슬라이드

css 가로 slider (네이티브)

-webkit-scroll-scrolling


프레임워크는 옵션일 뿐

CSS Zen Carden


레진 - 스케치70%/포토샵30%

태블릿의 경계는 모바일의 2배은 640 이상부터 한다

640/768/1280


Mobile First

em/rem 굳이 안써도 된다

선택자 우선순위에 신경써라


실전 팁

1. 비율

2. 모바일 개행, 피시는 유지 <i> 써서 display:block

3. 한글 개행 word-break: keep-all




9. Bem, Sass와 함께 한 11번가 UI 컴포넌트 제작기 - 남덕현

http://getbem.com/introduction/


1) 코드의 일관성을 유지

2) 실무적 이슈 및 특성을 반영

3) 실무에서 발생하는 협업 이슈들 고려

 - 동일한 스타일 중복 지정

 - 네이밍 방식 차이

 - 클래스 지정 위치

4) 네이밍은 서비스가 아닌 컴포넌트 형태/용도에 맞게

5) 컴포넌트별로 분리


BEM 적용 고려 사항

모듈화, 이해하기 쉽게, 명확하게, 충돌 최소화


BEM 사용 이유

1. 클래스 선언만 보고 요소의 종속 관계를 파악이 쉬워짐

2. 일관된 커뮤니케이션 용이

3. 스타일 지정의 우선순위


BEM 커스터마이징

요소의 구분을 위해 프리픽스 적용

l - layout

w - wrapper

c - component

s - swiper, slide




10. UI 개발 Tip&Tech Top10 - 김정윤

1. 스프라이트 자동화

스프라이트 폴더 밑에 네이밍 규칙을 가진 이미지를 넣는다

걸프로 빌드하면 자동으로 스프라이트와 css 생성

gulp.spritesmith

gulp-imagemin


2. 크롬 개발자 도구

 - network : 속도 조절해서 스크린샷 찍기

 - source : (디버깅), { } minify 풀기, source map

 - search : 페이지에 들어간 모든 것을 찾을 수 있음

 - animation : easing 값 조절


3. Sublime Text Plugin

 - Emmet

 - CDN.js

 - Autoprefixer

 - LiveReload + 브라우저 익스텐션

 - LiveReload with Sass

 - SublimeServer


4. Fiddler

파일 바꿔치기(윈도우용, 맥은 찰스), 프록시 역할

패킷이 리스트로 뜸, 중간에 가로챌 수 있음

모바일 디버거




후기: 지금까지 갔던 컨퍼런스 중 최고!!!

WSConf.는 10월 17일에 윤원진님 페이스북을 통해 알게 되었다. HTML, CSS, 웹 접근성, SEO를 다루는 컨퍼런스가 열린다고 했을 때 정말 기뻤다. FE 관련 정보나 세미나, 커뮤니티, 컨퍼런스는 많지만 마크업과 접근성을 다루는 곳은 많지 않고, 있다고 해도 약간 침체되어 있다고 느꼈다. 그래서 무작정 이 컨퍼런스를 응원했다. 제발 열어만 달라고! 홈페이지가 열리고 등록할 때 얼마나 두근두근했는지 모른다. 세션까지 너무나 알차서 더욱 기대가 컸다.


주최자 말씀이 참 공감이 됐다. 세미나나 컨퍼런스 가도 모르는 내용이 태반이고(물론 주최자 분은 고수시지만), 왜 마크업과 웹 접근성을 다루는 건 없을까? 해서 직접 만들게 되었다고 하셨다. 안 닿던 가려운 부분을 누가 시원하게 긁어주는 기분이었다.  홍보도 크게 하지 않았는데 마감도 빨리 되고 호응이 좋았던 것 보면 많은 사람이 이와 같은 생각을 하고 있었던 게 아닐까? 누구나 생각만 하는 것을 실행력 있는 분들이 자리를 만들어 주셔서 정말 감사할 뿐이었다. 어색하지 않게 분위기도 잘 이끌어 주셔서 좋았다.


이 컨퍼런스의 특이점은 다른 개발 컨퍼런스에 비해 여성 참가자 비율이 월등히 많다는 것이었다. 디자이너분들도 꽤 오신 것 같았다. 연사분들이 조금씩 발표시간을 넘기긴 했지만 모두 값진 내용이었다. 초급자에게는 어떻게 느껴졌는지 모르겠지만 만 3년 차 입장에서 바라본 세션들은 모두 흥미로웠다. AMP에 대해 알고는 있었지만 보다 자세하게 알게 되어서 좋았고, OOCSS는 이미 내가 하는 부분이었는데 방법론으로 있었다는 사실을 알아 신기했다. 스프라이트 자동화 역시 매우 흥미로웠다. 스프라이트는 만드는 것도 일이고, 영역 픽셀값 따오는 것도 일이어서 정말 귀찮았는데 사람은 역시 배워야 한다! 이런 방법이 있었다니!


마크업은 웹의 근간을 세우는 정말 중요한 부분이다. CSS 역시 그러하다. 대충 디자인을 옮기는 작업이 아니다. 3년 동안 스타트업에서 일하면서 사수 없이 몸으로 부딪히고 구글신과 함께 해오면서, 한국 마크업 개발자들의 팁이나 노하우에 대해 알고 싶은 갈증이 컸는데 조금이나마 해소할 수 있었다. 후반부에 실전 팁들을 공유하는 부분이 있어서 좋았다.


SK플래닛에는 UI 컴포넌트만 담당하시는 분이 있다는 것도 신기했다. 디자인보다 개발의 입김이 더 세게 자리잡힌 것 같단 생각이 들었다. 기존 컴포넌트에서 벗어나는 예외케이스는 기획/디자인 단으로 다시 되돌린다는 이야기가 인상적이었다. 아무래도 대기업이다보니 체계화 시킬 수 밖에 없을 것 같다.


스타트업에서는 디자인의 제약을 크게 주지 않아 100% 엄격한 컴포넌트화 하기는 어렵겠지만, 디자이너와 상의하여 MMT만의 UI 컴포넌트를 만들어가는 것도 좋은 방법이 될 거라고 생각한다. 재사용성이라는 것이 개발자에게는 매우 편리하나, 디자인적 측면에서는 통일성과 단조로움이라는 양면을 가졌기 때문에 강요할 수는 없다고 생각한다.


레진코믹스에서 오신 윤원진님은 내가 완전 초보일 때 트위터로 질문을 드린 적이 있는데 매우 친절하게 대답해주셔서 정말 감사했던 기억이 났다. 실제로 뵈니 혼자서 더 반가워했던 기억이 난다. 맨 앞에 앉아서 열심히 끄덕이며 들었는데 기억하시려나 모르겠다. (우왓 윤원진님께서 페북 댓글 달아주셨다! 감사합니다!!)


만원으로 따뜻한 도시락(본 도시락, 무려 3종 중 택일)과 다과까지 준비해주셔서 정말 혜자스러운 컨퍼런스였다. 일회성에 그치지 말고 JSConf.이나 Deview처럼 명맥이 잘 이어졌으면 좋겠다. 후원 업체가 늘어나고 좀 더 규모가 커진다면, 시간당 2개의 세션으로 나눠서 초급/중고급의 내용을 나누어 진행하는 것도 좋을 것 같다. 장소와 연사 섭외 등의 문제가 있겠지만 Deview처럼 동시에 다양한 세션들을 들을 수 있다면 참 좋을 것 같다. 또한, 연사분들을 다 모셔놓고 현업에 대한 라이트닝 토크 시간도 함께 있었으면 좋겠다고 생각했다.


1회라고 하기엔 여러모로 완성도가 굉장히 높았던 컨퍼런스라고 생각된다. 준비하느라 얼마나 많은 고생을 하셨을까 싶었다. 더불어 마이크로소프트코리아 11층에서 바라보는 광화문 광장의 촛불들도 잊을 수 없었다. 같은 내용으로 1월쯤에 앵콜 컨퍼런스를 연다고 하니 이번 기회를 놓치셨던 분들을 꼭 가보시길 추천한다! :)






반응형
저작자표시 비영리 변경금지