WSConf.

Seoul 2017

WSConf.는 2016년 처음으로 개최된 HTML, CSS, Web Accessibility, SEO 등을 다루는 컨퍼런스입니다.

웹을 이해하고, 웹을 만들고, 웹의 미래를 고민하고 있는 여러분들을 초대합니다.

HTML
HTML is the Web’s core language for creating content for everyone to use anywhere.
HTML은 모든 사람들이 어디서나 이용할 수 있는 콘텐츠를 만들기 위한 웹의 핵심 언어다.
CSS
CSS is the language for describing the presentation of Web pages, including colors, layout, and fonts.
CSS는 웹 페이지의 색, 레이아웃, 폰트 등 표현을 기술하기 위한 언어다.
Accessibility
Web Accessibility means that people with disabilities can use the Web.
웹 접근성이란, 장애를 가진 사람들이 웹을 사용할 수 있도록 하는 것을 의미한다.
SEO
SEO is the process of making a website more visible on search results pages.
검색엔진최적화는 검색결과페이지에서 웹사이트가 상위에 노출될 수 있게 하는 작업이다.

When

2017.03.11.토요일

10:00~18:00

Speakers

  • 정찬명
    정찬명
    SK 플래닛

    CSS Selectors in HTML

    CSS 레벨 1 부터 레벨 3 까지 모든 선택자의 '형식, 의미, 예시'를 다룹니다.
    선택자 이름에는 어떠한 제한이 따르는가?
    선택자는 성능에 영향을 미치는가?
    선택자를 실무에서 어떤 방식으로 활용하는가?
    이런 질문에 대한 의견을 공유하려고 합니다.

    정찬명 SK 플래닛 | www.skplanet.com

    정찬명 페이스북 정찬명 트위터 정찬명 블로그

    모터사이클과 풋살을 좋아하지만 집에서 청소와 음식물 쓰레기를 담당하고 있는 가정적인 남자입니다. 일이 너무 즐겁지만 퇴진할 때 진심으로 행복합니다.

    주요 경력

    • - 행정학 전공
    • - 現 SK 플래닛
    • - 네이버
  • 안형우
    안형우
    노동자 연대

    OOCSS + Sass = The best way to CSS

    .book-list, .photo-list, #content .book-list, #sidebar .book-list ― 이렇게 CSS를 작성하라고 배웠습니다. 그러나 페이지 개수가 늘어날 때마다 새로운 CSS를 만들고, 조금만 모양이 바뀌어도 거의 같은 코드를 또 치고 있는 자신을 발견했을 것입니다.

    객체 지향 CSS(OOCSS)는 골격(structure)과 모양(skin)을 분리하고, 위치에 따른 스타일링을 배제한 객체들을 활용함으로써 재사용성을 늘리자고 말합니다. Sass는 그 자체로도 좋은 도구지만, OOCSS 개념을 코드에 더 잘 적용할 수 있도록 도와 줍니다.

    OOCSS 방법론, Sass를 이용한 활용 사례 등을 함께 나눠 보려고 합니다.

    안형우 노동자 연대 | wspaper.org

    안형우 페이스북 안형우 트위터 안형우 블로그

    대학에서 국어교육을 전공했습니다. 사회 운동 신문사에 기자로 들어갔는데, 웹사이트 관리자가 필요하다고 해서 웹 개발을 독학으로 시작... 결국 웹 개발자가 되고 말았습니다. 선배 없이 공부하다 보니 검색에 의존. 인터넷의 도움으로 다양한 최신 논의들을 습득할 수 있었고, 조직이 작다 보니 적용도 빠르게 할 수 있었습니다.

    주요 경력

    • - 現 노동자 연대 웹개발팀장
    • - Mytory Markdown 워드프레스 플러그인 개발자
  • 전승엽
    전승엽
    어센트코리아

    What is SEO

    최근 진행했던 글로벌 Search Engine Optimization(SEO) 사례를 바탕으로 단순히 검색엔진 최적화를 위한 요소들을 반영하는 것이 아닌 검색자의 질문에 답하는 컨텐츠를 제공하는 것을 통해 검색엔진 최적화를 진행한 사례를 나누고자 합니다.

    전승엽 어센트코리아 | www.ascentkorea.com

    전승엽 페이스북 전승엽 트위터 전승엽 블로그

    어센트코리아에서 9년째 근무중인 마케팅 컨설턴트.
    프론트엔드 퍼블리싱 경험을 바탕으로 인간과 기계에게 모두 매력적인 웹사이트를 만드는 SEO를 꿈꾸고 있습니다.

    주요 경력

    • - 現 어센트코리아 디지털마케팅 부장/팀장
    • - CSS Design Korea 운영진
    • - 한국 CSSNITE in Seoul 진행 프로듀서
  • 지성봉
    지성봉
    ㈜콘텐츠연합플랫폼

    W3C WAI-ARIA 실전 공략

    보통 익히 알고 있는 '한국형 웹 콘텐츠 접근성 지침(KWCAG)'만으로는 Ajax를 통한 DOM의 실시간 변경, 커스텀 된 컴포넌트들에 대한 접근성을 제공하기에는 어려운 부분들이 있습니다.

    그러한 RIA(Rich Internet Application)을 위해 좀 더 높은 접근성을 제공하기 위한 WAI-ARIA가 적용된 사례를 살펴보고, 어떻게 WAI-ARIA를 적용할 수 있을지를 간단한 적용 규칙과 사례를 통해 살펴보고자 합니다.

    지성봉 ㈜콘텐츠연합플랫폼 | www.pooq.co.kr

    지성봉 페이스북 지성봉 트위터 지성봉 블로그

    퍼블리싱 대신 해 줄 좋은 친구를 사귀지 못해 자괴감 들고 괴로운 아주 흔한 퍼블리셔
    (zam 없.....)

    주요 경력

    • - 現 ㈜콘텐츠연합플랫폼 퍼블리셔
    • - 한국정보화진흥원 "WAI-ARIA 사례집" 집필 참여
  • 김태훈
    김태훈
    네이버

    Google AMP(Accelerated Mobile Page)

    사용자는 모바일 웹을 사용하면서 모바일 앱과 같은 성능을 기대합니다. 빠른 페이지 로딩과 부드러운 스크롤, 사용자 액션에 즉시 반응하는 인터랙션, 멋진 그래픽 애니메이션 같은 것을 기대합니다. 다행히 모바일 기기의 브라우저 성능이 예전보다 많이 나아졌고, 이를 잘 활용한다면 더 쾌적하고 풍부한 사용자 경험을 제공할 수 있습니다.

    그럼에도 불구하고 아직도 많은 사이트가 최적화되지 않은 웹 페이지를 서비스합니다. 이런 서비스는 사용자에게 안 좋은 사용자 경험을 줄 뿐만 아니라 의도하지 않은 트래픽을 발생시키고, 로딩 시간을 낭비하며, 모바일 기기의 배터리를 소모합니다.

    AMP(Accelerated Mobile Page)는 웹 페이지를 더 빠르게 렌더링하는 방법입니다. AMP가 제안하는 규칙을 따르고 AMP 내장 컴포넌트와 확장 컴포넌트를 사용한다면 좋은 성능을 보이는 최적화된 웹 페이지를 쉽게 개발할 수 있습니다.
    이번 세션에서는 AMP의 구성 요소를 살펴보고 AMP가 웹 페이지의 성능을 높일 수 있는 원리를 알아보겠습니다.

    김태훈 네이버 | www.naver.com

    김태훈 페이스북

    NAVER 프런트엔드 개발자. 맥주의 깊은 맛을 알아가고 있으며 다양한 주제에 대해 격의 없이 토론하는 것을 좋아한다. 코딩이 지겨울 땐 남태평양으로 스쿠버 다이빙 여행을 떠난다. A dream you dream together is REALITY!

    주요 경력

    • - SADI HTML5 초빙교수
    • - NHN NEXT WebUI 겸임교수
    • - Project Management Professional(PMP)
    • - 페이스북 프론트엔드개발그룹 운영
  • 윤원진
    윤원진
    레진엔터테인먼트

    반응형웹디자인을 위한 넓고 얕은 지식

    다양한 사이즈를 대응하는 방법론으로 반응형웹디자인이 소개된지는 많은 시간이 지났지만, 여전히 많은 분들이 반응형에 대해 해소되지 않은 고민들을 가지고 계신 것 같습니다.

    오랜 기간 실무 반응형웹디자인을 해오면서 나름대로 정리해본 다양한 생각들을 이 발표를 통해 나눠 보려고 합니다.

    반응형웹디자인에 대해 관심은 있지만 프로젝트에 적용해볼 기회가 없으셨던 분들께 실제 작업에 적용하면 어떤 상황을 만나게 될지 말씀드리고, 반응형을 하면서 고민이 많으셨던 분들에게는 같은 고민에 대한 저의 선택을 말씀드리려고 합니다.

    윤원진 레진엔터테인먼트 | www.lezhin.com

    윤원진 페이스북 윤원진 트위터 윤원진 블로그

    부상 없는 건강한 삶을 영위하기 위해 운동을 전혀 하지 않는, 날로 몸이 불어가고 있는 대한민국의 평범한 흙수저 개발자입니다. 커뮤니티 홍차넷을 운영하고 있습니다.

    주요 경력

    • - 現 레진엔터테인먼트 Front-end 개발자
    • - 2011 10K Apart Winner (Best Technical)
    • - '웹디자이너를 위한 CSS3', '반응형 웹디자인', '웹디자이너를 위한 Sass' 번역
  • 남덕현
    남덕현
    SK 플래닛

    BEM, Sass와 함께 한 11번가 UI 컴포넌트 제작기

    작업 시간의 단축과 코드의 재사용을 고려한 UI 컴포넌트 작업을 진행하면서 적용한 방법론과 코드에 대해 이야기하고자 합니다.

    - BEM 방식과 네임스페이스를 적용한 네이밍 규칙
    - Sass를 이용한 CSS 작업 방식
    - 기획, 디자인과 함께 하는 UI 컴포넌트 구축 프로세스

    남덕현 SK 플래닛 | www.skplanet.com

    남덕현 페이스북

    11번가 모바일 웹의 UI HTML/CSS 작업을 담당하고 있다.

    주요 경력

    • - 現 SK Planet UI 개발팀
    • - SK 커뮤니케이션즈 UI 개발팀
    • - NHN 웹표준 개발팀
  • 김정윤
    김정윤
    SK 플래닛

    UI개발 Tip&Tech Top 10

    당장 UI개발 실무에서 써먹을 수 있는 실무 팁들을 소개합니다.

    Sublime Text에서 유용하게 사용할 수 있는 Plugin들과 Chrome 개발자 도구 중에 자주 사용하지 않지만 알아두면 유용한 기능들, 그리고 라이브 서비스의 CSS, JS 파일들을 로컬 파일로 바꿔치기 하는 디버깅 팁을 공유합니다.

    김정윤 SK 플래닛 | www.skplanet.com

    김정윤 페이스북 김정윤 트위터

    SK 플래닛에서 11번가 서비스 개발을 담당하고 있으며 주로 모바일 웹 서비스의 JavaScript 개발을 하고 있습니다.

    주요 경력

    • - 現 SK Planet UI 개발팀
    • - 잡코리아 UI 기술팀
    • - SK 커뮤니케이션즈 UI개발팀
    • - 한국 웹 접근성 그룹(KWAG) 운영진
  • 이환
    이환
    하이브랩(HIVELAB)

    이미지가 마크업의 반이다.

    이미지 슬라이드시 참고하면 좋은 실무 팁들을 소개합니다.
    웹에서 많이 사용하는 이미지 파일형식 및 이미지 최적화, 이미지 스프라이트 정의와 모바일이미지 스프라이트 제작 Tip 등 웹리소스용 이미지를 만들기 위해 최적화적인 방법을 소개합니다.

    이환 하이브랩(HIVELAB) | www.hivelab.co.kr

    이환 페이스북

    축구를 너무 좋아해서 개발을 하고 있습니다. html/css/javascript 의 가장 최적화적인 방법을 매일 1분간 고민하는 남자입니다. 현재, 삼성프로젝트 AEM 프로젝트개발을 하고 있습니다. AEM이 궁금하면 메일주세요~ 사람소개시켜드릴게요~

    주요 경력

    • - 現 하이브랩 SEP UI개발팀
    • - NHN Technology Service UI개발팀
    • - 모노라움 강사
  • 장성민
    장성민
    SK 플래닛

    준비중

    준비중

    장성민 SK 플래닛 | www.skplanet.com

    장성민 페이스북 장성민 트위터 장성민 블로그

    조국의 평화적 통일과 자주민주통일 국가를 꿈꾸고 있습니다.
    먹고 살기 위해 SK 플래닛에서 11번가 UI 개발을 총괄하고 있습니다.

    주요 경력

Sponsors

  • 한국 Microsoft

주관

  • 한국 웹 접근성 그룹
  • CSS Design Korea

주최

  • WSConf
  • HTML5 융합포럼

Tickets

WSConf.는 유료(20,000원)입니다.
아래 접수버튼을 통해 접수한 후, 계좌로 입금해주셔야 접수등록이 완료됩니다.(입금순)

Sold Out

접수시 안내
주차권은 제공되지 않습니다. 반드시 대중교통을 이용해 주시기 바랍니다.
휴식 시간에는 다과와 음료가 제공될 예정입니다.
세금계산서는 발행되지 않습니다.
환불은 3월 7일(화) 오전 10시 전까지만 가능합니다. 이후는 환불해드릴 수 없습니다.
(행사 진행 비용을 위함이니 이해해주시기 바랍니다. 전화하셔서 환불해달라고 하시면 많이 당혹스럽습니다 ㅜㅜ. 좋은 행사에 기부하신걸로 생각해주셨으면 합니다.)

Location

한국 Microsoft, 대강의장

서울 종로구 종로1길 50 더 케이트윈타워 A동 11층

Q&A

궁금한 점 있으시면 뭐든 질문해주세요.
최대한 빨리 답변을 드리겠습니다.