아직 SK플래닛을 다니고 있습니다.
함께 이곳으로 합류했던 김정윤님은 카카오로 지난달 스카웃 되어 넘어갔구요.
덕분에 요즘은 흥미로운 일이 없네요.
(담배도 줄고…. 먹방도 줄고….. 다음 뉴스 대신 네이버 뉴스 보고…. 카카오톡 대신 라인 쓰고…)
같이 뭔가 재밌는 일을 만들 사람이 없으니 사실 만사가 귀찮은 상태입니다.

얼마전 회사에서 대대적인 조직개편이 있었습니다.
꽤 많은 팀들이 없어지면서 대팀제로 변화가 있었습니다.
운이 좋은건지 안좋은건지 사실 잘 모르겠지만, 우리 팀은 그대로 유지가 되었습니다.
대신, 이름이 바뀌었습니다.
UI개발팀에서 Front-end개발팀으로…
전 줄여서 FE개발팀으로 하자고 했지만 모르는 사람들도 있으니 풀네임을 쓰자고 그러시네요.
Front-end는 알아들을 수 있나 모르겠지만…

업무범위가 넓어졌습니다.
덕분에 정윤님이 없는 자리가 더 커보이게 되었습니다.
아시겠지만 저는 디자인을 하다가 이 분야로 자연스럽게 넘어갔고, 깊은 개발 영역까지는 아직 공부할게 많은 상태입니다.
하루하루 학습하며 또 팀을 지켜내며 스트레스가 점점 많아지고 있지만 그동안 믿고 합류해준 친구들을 어떻게든 지켜줘야한다는 생각에 버티고 있습니다.

회사 일 말고도 좋은 일은 별로 없습니다.
요즘들어 부쩍 신경질적이고 폐쇄적으로 변한 모습에 스스로 이유를 묻고 있습니다.
이유들을 꽤 찾았고 해결방법도 찾았지만 실행은 망설여지는 것들이 대부분입니다.

생각해보면 20대 중후반에도 이런 시기가 있었던 것 같습니다.
그때 헤쳐나왔듯 이번에도 어떻게든 헤쳐나오겠죠………….

최근 1달 정도 비트코인 열풍에 살짝 편승해 있었습니다.
엄청 큰 돈을 벌 기대는 없었기 때문에 적은 돈을 넣었더니 조금밖에 못벌었습니다.
요며칠 챠트 상태를 봐서는 아마 본전하고 그만둘 것 같기는 합니다.
결국 기술이 아니라 도박으로 접근하는 대부분의 사람들을 보면서 기술이 아무리 좋아봐야 바라보는 시각을 바꾸지 않으면 의미 없다는 걸 배웠습니다.
블록체인이니 4차 산업혁명이니 그러지만 게시판에 가보면 그냥 온라인 도박장 같습니다.

조만간 다 현금화할거고 해외거래소에서 구매한 한 가지 코인만 그냥 둘 생각입니다.
제 인생이 HTML을 만나면서 크게 바뀐 것처럼 혹시나 해서 초기에 조금 사둔 코인이 있습니다.
HTML Coin…… ㅋㅋㅋㅋ

10,000배 되면 빼겠습니다. 존버!!!!!!!

쓰다보니 열라 우울한 근황이네요…

기술 얘기 말고도 사는 얘기로 올해는 글을 좀 써볼까 합니다.
어차피 블로그는 유행이 지났으니 일기장으로 써보는걸로….

다음 글은 짬날때마다 조금씩 써둔 접근성 관련 글을 마무리할 것 같네요.
아주 공격적이고 몇몇 사람들이 기분 나빠할…

The post 근황 appeared first on 장군블로그.

회사에서 개최한 테크플래닛(Tech Planet), 네이버에서 하는 DEVIEW, 그 외 올해 열렸던 수많은 컨퍼런스들을 가보면 난 이제 모르는 주제들이 너무 많았다.
담배 피러 나가서 천재 김정윤님에게 하소연하다가 ‘젠장. 그냥 다른 개발자들이 실무에서 HTML, CSS, 웹 접근성, SEO를 어떻게 활용하는지를 중심으로 세미나 하나 만들자’는 농담반 진담반 선언을 해버렸다.

그렇게 시작되었다.

WSConf. Seoul

WSConf. 로고

WSConf.는 Web Standards Conference의 줄임말입니다.

웹 표준 중심의 컨퍼런스라는 것입니다.
그 중에서도 HTML, CSS, 웹 접근성(Web Accessibility)을 주 키워드로 삼으려고 합니다. 즉, 지금 우리가 가장 많이 하고 있는 업무를 공유해보자는 것이었습니다.

웹 제작의 기본인 HTML, CSS, 웹 접근성은 표준을 정확히 이해하고 올바르게 사용해야 합니다.
많은 개발자들이 현업에서 다양한 개발 노하우를 바탕으로 개발하고 있지만 교류하기는 어렵습니다. 다양한 개발툴들을 사용하지만 효율적인 사용법은 잘 모르는 것 같습니다. Gulp와 Grunt가 유행이라고 해서 공부를 해보지만 어떻게 활용해야하는지 막막할 때가 있습니다. react가 짱이라고 하는데 당장 모바일 웹 버그 해결하기도 어렵습니다.

그래서 UI개발자들의 가장 현실적인 내용들로 컨퍼런스를 만들기로 한 것입니다.
물론 당장은 아니지만 추후에는 Front-End 실무 기술들에 대해 조금씩 범위를 확장해나갈 것입니다.

WSConf. 공식 웹 사이트 (http://wsconf.org)

여러 과정을 거쳐서 공식 웹 사이트를 열고, 접수를 시작한지 4시간이 안되어 입금까지 완료가 되는 기염을 토했습니다.
홍보할 틈도 없이 접수자들 정리하다보니 150명 정원 모두 입금이 끝나버렸습니다.
예상대로였습니다. (정확히는 예상보다는 늦음. 1시간 안에 끝날거라고 예상했음 ㅋㅋㅋ)

분명 이 행사를 기획했을 때 우리의 마음과 참가 신청자들의 마음이 같았기 때문일 것입니다.
최근 몇 년 동안 개최된 어떤 컨퍼런스보다 100% 본인 업무들과 매칭되었을 것입니다.

그렇게 2016년 12월 17일 토요일, 한국 Microsoft에서 첫번째 WSConf.가 개최되었습니다.

한국 Microsoft 대강의장, 발표중인 정찬명님, 자리를 꽉 채워주신 참가자들

발표 주제와 발표자

발표 주제 선정과 발표자 선정 및 접촉은 김정윤님과 둘이 진행했습니다.
원래 의도대로 주제를 HTML, CSS, 웹 접근성, SEO(Search Engine Optimization)로 압축하고, 이들 주제를 세분화한 후 적합한 발표자들을 물색했습니다.

발표 주제

그렇게 선정된 주제와 발표자는 아래와 같습니다.

WSConf. 주제(Microsoft 관련 주제는 제외)

관련된 자세한 내용은 아래 발표 자료 또는 참가자 후기 등을 통해 확인하시길 바랍니다. 너무 길어질 것 같아서…

발표 자료

발표 자료는 모두 발표자들의 동의를 얻어 WSConf.의 공식 slideshare 계정에 공유할 예정입니다.

이번 2016년 12월 17일 발표자료도 현재 올라가 있지만, 곧 있을 앵콜때문에 비공개 처리하였고, 참가자들에게만 별도로 링크를 보내드렸습니다.
물론, 앵콜 이후에는 모두 공개할 예정입니다.

향후 계획

이름에서도 향후 계획을 충분히 예측할 수 있습니다.

WSConf. Seoul 입니다. 서울!
서울 외에도 부산, 광주, 춘천, 대전, 제주 등 지방 대도시에서도 개발자들과 만날 예정입니다.
그리고, 1년에 한 번 하는 컨퍼런스가 아닌 비정기적으로 작게도 크게도 개최하려고 합니다.

모든 WSconf.의 활동과 홍보는 아래 2개의 채널로만 공유를 할 예정이니 꼭 체크해두시길 바랍니다.

• WSConf. 공식 웹 사이트 : wsconf.org
• WSConf. 공식 facebook 페이지 : facebook.com/wsconf/

행사 소품

참가자 확인을 위해 제작하는 명찰을 이번에는 제작하지 않았습니다.
단가도 비싸고, 프린트해서 명찰에 넣는 것도 손이 많이 가기 때문에 다른 방법을 찾았습니다.

그래서, 결정한 것이 팔찌입니다. 하나가 아닌 두개의 팔찌.
세월호 유가족분들께 조금이나마 도움이 되고자 세월호 팔찌를 구매했고, 경품추첨 및 도시락 확인용으로 놀이공원 팔찌를 제작했습니다.

WSConf. 참가자를 위한 세월호 팔찌와 실크 팔찌

스텝들과 발표자들에게 제공된 후드티도 있었습니다.
나름 최고의 퀄리티로 제작하려는 의지가 있었지만, 자수 패치가 우리 로고의 모든 컬러를 커버할 수 없어서 좀 아쉬움이 남습니다.
그래도 아주 이쁘다!!!

총평

벌써 1주일이 지났습니다.
여러가지로 아쉬운 행사였습니다. 물론 만족스러운 행사였습니다. 아쉽지만 만족스러운 행사.
우린 그냥 개발자들이니까 완벽할 수는 없다고 스스로 위안삼으며 다음을 기약합시다~

행사 끝까지 묵묵히 뛰어다녀주신 staff 여러분들, 주말 하루를 모두 집중해주신 발표자분들 모두 고생많으셨어요~~
특히, 한국 웹 접근성 그룹의 김정윤님과 CDK(CSS Design Korea)의 방미희님… 최고 감사!!!

WSConf 스텝과 발표자들(중간에 많이 가셨네요 ㅜㅜ)

도와주신 분들

참가 접수 비용이 저렴해진 것은 많은 도움을 주신 기업, 기관, 개인분들 덕분입니다.

성민장군이 디자인한 플랜카드

장소와 다과, 선물 등을 어마어마하게 후원해 주신 한국 Microsoft의 이소영 부장님과 류혜원 과장님,
고퀄의 도시락을 제공할 수 있도록 큰 도움 주신 국내 최고의 웹 에이전시 Hivelab의 박상혁 실장님,
국내 웹 접근성을 주도하고 있는 한국정보화진흥원의 송재일 책임님과 팀장님,
몸은 웹을 떠나셨지만 마음은 웹에 그대로 남아있는 한국 웹 접근성의 삼촌(?) 동양산업의 현준호 이사님,
직접적으로 인사를 드리지 못했지만 많은 책을 후원해주신 한빛미디어와 위키북스…
모두 너무 고맙습니다!!!

[후원 문의]

후기 모음

후기들의 평가도 나쁘지 않네요. 더 많은 후기는 댓글로 신고바랍니다!

• [20161217] WSConf. 2016
• WSConf. 2016 후기
• WSConf Seoul 2016 후기
• (카페가입 필요) 하코사 – WSconf 후기
• [SEO] 검색엔진 최적화(SEO)를 위한 기본 룰
• WSConf. Seoul 2016

자랑질

이번 WSConf.에서 사용된 모든 디자인 산출물은 성민장군이 모두 디자인했습니다. 짝짝짝!!! 풉~
로고, 웹 사이트, 단체 후드티, 플랜카드, 팔찌, X배너 등등.
Adobe Illustrator를 실행하니 갑자기 마음이 편해졌습니다.
그냥 디자인 계속 할껄 그랬나 하는 생각이 들 정도로…
심각하게 고민 중….

The post WSConf. Seoul 2016 잡담 appeared first on 장군블로그.

접수하면서 받은 자료집은 정부행사에서 볼 수 없었던 표지 디자인과 종이 품질 등 고퀄리티였다. 무려 컬러인쇄!

최근 판교에서 사내교육으로 WAI-ARIA로 강의를 했던터라 공부 좀 더할겸 오전 세션에 집중했다.
밝힐 수는 없지만, 어둠의 경로로 ‘예제로 살펴보는 WAI-ARIA”를 미리 봤었는데 몇가지 우려사항이 있었기 때문에 질문도 준비하고 갔었다. (하지만, 시간이 촉박해서인지 질문 시간은 주어지지 않았다.)

시멘틱 요소들(semantic elements)을 사용하는 것이 우선임을 반복적으로 언급하고, 사례도 더 다듬었으면 하는 아쉬움이 남는다.

오늘 배포된 자료집은 많은 개발자들이 봤으면 좋겠다.
원래 스펙 자체가 어려운데 자료집은 충분히 이해할 수 있을 정도로 잘 정리했다고 볼 수 있다.(게다가 한글)
나도 이걸 보고 배운게 많다. PDF로 제공한다고 했으니 꼭 보시라.

더불어 관심 있는 개발자들은 WAI-ARIA 스펙을 보기 전에 WAI-ARIA 입문을 먼저 훑어보길 권장한다.

WAI-ARIA 사례

사례는 github에 모두 공개되어 있다. (https://github.com/niawa/ARIA)

집필진 모두에게 감사인사드립니다~

[추가 : 2016.12.14] WAI-ARIA 온라인판 pdf

얼마전 위 자료집이 pdf로 온라인에 공개되었다.
해당 링크 날아갈까봐 우선 내 ftp에 올려놨다.
(이렇게 하면 안되나??? 이상해서 연락주시면 내릴께요~~)

The post WAI-ARIA 단상 1 appeared first on 장군블로그.

대부분 잘 알고 있는 팁이겠지만, 기억저장할겸 간혹 포스팅 할 예정입니다.

[주의] 아래 내용은 회사마다 코딩 컨벤션이 다르기 때문에 저희 회사랑 룰이 같을 경우에만 해당되는 내용입니다.

Sublime Text의 CSS 속성 뒤의 공간

Sublime Text의 기본적인 처리방법은 아래와 같이 속성(property)을 자동완성에서 선택하면 콜론(:)뒤에 한 칸 여백이 생깁니다.

.class {
	float: left;
}

저희 회사는 이 여백을 사용하지 않고 있습니다.
어떤 분은 실서버에 반영할 때 자동으로 날리면 된다고 하시는 분들도 있지만, 저희는 아직 그런거 안합니다. ㅜㅜ

어쨌든 계속 신경쓰여서 혹시나 하고 검색해봤더니 여러 방법들이 있었습니다.

[Windows 7] Sublime Text의 css_completions.py 수정하기

PackageResourceViewer라는 플러그인을 설치하고 수정하는 방법도 있지만, 윈도우즈 탐색기를 통해서 접근하는게 더 쉽습니다.
단, 기본적으로 ‘폴더 옵션’에서 ‘숨김 파일, 폴더 및 드라이브 표시’가 설정되어 있어야 합니다.

윈도우즈 탐색기에서 아래와 같은 순서로 탐색을 해야 합니다.

1. 로컬 디스크(C드라이브)
2. 사용자
3. 사용자 계정 ID (난 jangkunblog임)
4. AppData
5. Roaming
6. Sublime Text 3
7. Packages
8. CSS

CSS 폴더에 css_completions.py라는 파일이 있고, 이를 에디터에서 열면 190번째 줄에 아래와 같이 작성되어 있습니다.

	l.append((p, p + ": "))

여기에서 콜론 뒤의 공간을 삭제합니다.

	l.append((p, p + ":"))

파일을 저장하고, Sublime Text를 재실행하면 이제 끝!

.class {
	float:left;
}

이제 잘 되네요~

즐 코딩~

The post Sublime Text에서 CSS 작업시 콜론 뒤에 자동으로 생기는 공간 없애기 appeared first on 장군블로그.

예전부터 암암리에(?) 워드프레스 모임과 관계를 유지하던 차에 운영자이신 천영민님의 연락을 받고 바로 발표를 수락하였지만, 회사 서비스 런칭 때문에 바빠서 결국 발표자료는 당일날에야 완성이 되었습니다.
게다가 감기가 심해져서 ‘타미플루’를 처방받기까지 하여 육체적으로나 정신적으로나 여간 부담이 되는 행사가 아닐 수 없었습니다.

(여담 : 082net의 천영민님은 제가 워드프레스로 블로그를 처음 만들 때 댓글로 계속 질문하면서 도움을 받았던 분입니다. 국내에서 워드프레스를 시작하게 되면 한번쯤은 천영민님의 블로그를 가게 되죠~ ^^)

워드프레스 미트업 서울 2015

행사는 금천구 현대아울렛 6층에 있는 G밸리 시민청이라는 곳에서 진행되었습니다.
200명의 신청자가 모두 온건지 행사장이 발디딜 틈없이 꽉 차 있었습니다.

솔직히 감기로 인해 정신이 오락가락해서 발표를 제대로 듣지는 못했습니다.
‘이장’이라는 닉네임을 쓰시는 양석원님의 발표와 곧 장가가는 SEO계의 떠오르는 샛별 전승엽님의 발표가 인상적이었습니다.
(발표 자료와 발표 영상을 꼭 보세요~)

(여담 : 이장님과 당일날 탁자를 두고 같이 앉아 있었는데, 인사를 못했습니다. 혹시 저를 기억 못하실까봐 겁나서…. 몇 년만에 뵙는거라 소심한 저는 인사를 못했지요… ㅜㅜ )

Make WordPress Accessible

나름 오랫동안 워드프레스를 사용해오고 있지만, 막연하게 워드프레스가 웹 접근성을 상당히 고려하고 있다고만 알고 있었습니다.
하지만, 상당한 공헌자들의 노력들이 있었기에 가능한 일이었습니다.
노력의 질과 양을 보면서 많은걸 깨닫게 되는 계기가 되었습니다.

우선 워드프레스는 코어 뿐만 아니라 테마, 플러그인 등 전반적으로 웹 접근성을 높히기 위한 노력을 하고 있었습니다.
워드프레스 자체적으로 다양한 분야에 공헌할 수 있는 기회가 주어지는데, 접근성 또한 포함되어 있습니다.

The Make WordPress Accessible team are volunteers who are working to ensure the continued improvement of accessibility within WordPress – both with the themes that power all WordPress websites, and within the admin screens used by site administrators.

https://make.wordpress.org/accessibility/

특히, Accessibility Testing의 경우 배울 점들이 많았습니다.
체크리스트를 기반으로 각종 코어, 테마, 플러그인 등을 테스트하고 이를 리포팅하고 있습니다.
모든 과정은 토론을 통해 더나은 결과물을 만들어내고 있었습니다.

한국 웹 접근성 그룹에서 비슷한 방식으로 국내 웹 사이트 평가를 진행하면 좋겠다고 생각했습니다.

위 URL에 가서 다양한 문서들과 활동 내역을 꼭 확인하길 권고드립니다.
좋은 자료도 많고, 직접 참여할 수 있는 기회도 있습니다.

아래는 발표를 준비하면서 둘러봤던 사이트들입니다.

• https://make.wordpress.org/accessibility/
• https://www.facebook.com/pages/WPAccessibility/412604585533085
• https://developer.wordpress.org/themes/functionality/accessibility/
• http://premium.wpmudev.org/blog/25-ways-to-make-your-wordpress-website-more-accessible/
• https://www.joedolson.com/web-site-accessibility-services/

워드프레스로 웹 접근성 칭찬받기

주로 워드프레스에 관심은 있지만 직접적으로 웹 접근성에 대해 잘 모르시는 분들이 많을 것이라고 예상했습니다.
발표자료도 그래서 쉽게 준비하였습니다.

웹 접근성의 정의, 장애인의 웹 이용 등과 지침을 설명하는 것으로 시작하였습니다.
이후 워드프레스 글 작성시 지켜야할 점, 워드프레스로 웹 개발시 신경써야할 부분 등을 예를 들어 설명하였습니다.
발표 시간이 짧다보니 많은 사례를 준비하지 못했지만, 많은 분들이 공감해주셔서 상당히 즐거운 발표였습니다.

이번 행사를 준비하고 진행한 운영진 분들 모두 고생 많으셨습니다~
좋은 자리 마련해주셔서 정말 고맙습니다~

발표 자료

발표 영상

남는건 사진

어색하지만 찍힌 사진

마무리하며

최근 발표 내용을 적어두어야겠다고 생각해서 ‘억지로’ 글 썼습니다.
후기라고 하기에는 행사의 내용을 담지 못했으니 참가기 정도가 되겠네요…

겸사겸사 기존 블로그 디자인을 버렸습니다.

기본적인 테마는 Themegraphy를 기반으로 했으며, 상당히 많이 커스터마이징했습니다.
글에 집중할 수 있게 글자 크기를 키우고 내용 외에는 아래로 배치하였습니다.
폰트도 나눔고딕에서 명조 기반의 제주 명조체(Jeju Myeongjo)를 사용하였습니다.

The post 워드프레스로 웹 접근성 칭찬받기 appeared first on 장군블로그.