두분 발표자님들의 동의를 구해 PDF 형태로 제공해 드릴 수 있게 되었습니다.

세션3.  개발자에게 넘겨주기 편한 TABLE & FORM 코딩하는 방법 (김남용, 70분)

Table_Form_Markup_20120407.pdf

세션4.  발표자님 사정으로 PDF 제공을 중단합니다. (이미 내려받으신 분들께서도 삭제를 요청드립니다.)

게시판 운영 중단과 함께 사실상 클리어보스 공식 사이트 내에서는 블로그 댓글을 제외하고는 커뮤니케이션을 위한 공간이 없어졌습니다. 그래서 비공식적으로 운영을 해 오던 미투데이 밴드와 페이스북 그룹 주소를 공개하고, 이를 통해 더 많은 분들과 소통하고자 합니다.

미투데이 사용자 분들은 http://me2day.net/band/clearboth_korea 를 통해 클리어보스의 미투밴드에 접근하실 수 있습니다.

또, 페이스북 사용자 분들은 http://www.facebook.com/groups/clearboth/ 를 통해 페이스북 그룹으로 접근할 수 있습니다.

위 두개 SNS 그룹 공간을 통해서 클리어보스 안밖의 소식과 웹 관련 정보, 팁 등을 나눌 수 있었으면 좋겠습니다. 스탭들만의 전용 공간이 아니니만큼 많은 분들이 참여해 주시고, 스스럼 없이 글도 올려주시고 의견도 나눠주시길 부탁드리겠습니다.

웹표준 오리엔테이션은 흔히 웹퍼블리셔, UI개발자라고 불리는 사람들 가운데 입문자와 1년차 이내의 주니어를 대상으로 하는 미니 세미나입니다. 현업에서의 고민과 업무 프로세스를 이해하고자 기획되었고, 이번에는 기술 세미나 두개를 추가로 준비해 보았습니다. 때문에 클리어보스 스탭 이외에 경력이 많으신 분이 신청하신 경우 주니어 신청자들을 위해 신청이 취소될 수도 있음을 알려드립니다.(물론 운영진이 모르는 분이라면… 참석하시게 되겠지요)

다섯번째를 맞는 이번 세미나에서는 웹표준과 웹퍼블리셔(UI개발자)에 대한 고민을 나누는 오리엔테이션 시간과 더불어 실무에 도움이 될만한 기술 세션 두가지를 추가해 보았습니다.

개요와 내용은 아래를 참고해 주시고, 많은 관심과 참여 부탁드립니다.

• 제목 : 다섯번째 웹표준 오리엔테이션
• 주최 : 클리어보스
• 일시 : 2012년 4월 7일 10:00 ~ 17:30
• 장소 : SK 커뮤니케이션즈 본관 13층 Supex홀
• 대상 : 45명+
  • 입문자, 1년차 이하의 주니어
  • 신청자가  50명 이하일 경우 전원 참석 가능
• 신청 : 2012. 3. 29 ~ 4.5 신청페이지
• 후원 : SK 커뮤니케이션즈, 웹액츄얼리코리아, 한국정보화진흥원
• 참석비 : 무료

내용

• 인사 (10:00 ~ 10:30) : 인사 및 클보 소개 (추지호)
• 섹션 1 (10:30 ~ 11:40) : 웹 퍼블리셔와 업무프로세스 #1 (황지훈, 70분)
• 점 심 (11:40 ~ 13:10) : 점심
• 섹션 2 (13:10 ~ 14:20) : 웹 퍼블리셔와 업무프로세스 #2 (황지훈, 70분)
• 섹션 3 (14:30 ~ 15:40) : 기술 세미나 #1 – 개발자에게 넘겨주기 편한 TABLE & FORM 코딩하는 방법 (김남용, 70분)
• 섹션 4 (15:50 ~ 17:00) : 기술 세미나 #2 – 실무 Responsive Design (하성필, 70분)
• 섹션 5 (17:10 ~ 17:30) : 마무리

발표 내용

세션1,2 웹 퍼블리셔와 업무프로세스 / 황지훈 웹 퍼블리셔로 시작하려는 분들과 이제 막 시작한 분들께서 웹 퍼블리셔로서 생각해야 할 것들과 실제 현업에서 업무를 어떻게 진행하고 협업하는 것이 좋을지에 대한 고민을 같이 해보는 시간입니다.

세션3 개발자에게 넘겨주기 편한 TABLE&FORM 코딩하는 방법 (웹표준과 웹접근성을 지키자!) / 김남용 실제 웹페이지 구현시 웹표준과 웹접근성을 지키면서 TABLE과 FROM에 들어가는 코드를 작성하고(개발자의 관점) CSS3를 사용하여 디자인을 입히고 간단한 효과를 넣은 UI를 만들어보는 데모를 보여드리고자 합니다.

세션4 실무 Responsive Design / 하성필 A 모바일 사이트와 B 내부 인트라넷(Backoffice) 구축에 느겼던 반응형 디자인(Responsive Design)에 대한 현실적인 문제점과 대응 방안에 대하여 발표하고자 합니다.

 

장소

• 서울시 서대문구 통일로 87(미근동) 임광빌딩 본관 13층 Supex홀
• 주차 지원은 되지 않습니다. 대중 교통을 이용해 주세요.

 

신청 방법

이벤트 페이지에서 메일 주소를 입력하신 후에 이름과 연락처를 추가로 기입하여 신청해 주시면 됩니다.

 

후원

SK 커뮤니케이션즈에서 장소를 제공해 주었습니다.

웹액츄얼리코리아와 한국정보화진흥원에서 선물을 제공해 주었습니다.

 

선물

웹액츄얼리코리아에서 ‘워드프레스 제대로파기’를 후원해 주셨습니다.

한국정보화진흥원에서 ‘웹접근성을 고려한 콘텐츠 제작 기법 2.0′을 후원해 주셨습니다.

• 점심은 따로 제공되지 않습니다.
• 실습은 없습니다. 특별히 노트북을 휴대하지 않으셔도 됩니다.
• 무선 인터넷은 제공되지 않습니다. 에그 또는 개인 스마트폰을 이용한 테더링을 이용하셔야 합니다.
• 대기 순위에 등록되신 분들도 참석 가능합니다.

지난해에는 계란판에 담겨진 다양한 웹브라우저를 디자인으로 사용했었는데요. 올해는 조금 더 간단하게 만들어 봤습니다.

올해는 아직도 낡은 브라우저를 사용하는가? 라는 슬로건을 담아보았습니다. 전면에 ‘Still old browser?’라는 메시지와 함께 소리치는 남자의 얼굴을 붙여봤습니다. (스티브 잡스의 얼굴을 붙이고 싶었지만… 참았습니다. ^^;)

등쪽은 목 아래에 클리어보스 로고를 새겼습니다.

전체적으로 검정색 한가지 색상을 사용했습니다. 대신 티셔츠 색상을 파스텔 느낌의 회색(오트밀)으로 선택해서 너무 심심하지 않도록 제작해 봤습니다.

실제 입어본 모습은 아래와 같습니다. 모델의 몸매가 아주 저질인지라… 감안하고 봐 주시면 되겠습니다.

작년에는 기념 티셔츠를 원하시는 경우 한두벌씩이라도 요청하시면 따로 주문해서 배송해 드렸었는데요. 요청하신 분이 몇분 계시지 않기도 했고, 개별적으로 배송해 드리는 과정도 불편하고 해서 올해는 개별 판매까지는 하지 않으려고 합니다.

하지만 이번 티셔츠를 원하시는 분들이 있다면 댓글을 남겨주시거나 clearboth.org (at) gmail.com 으로 문의해 주세요. 초기 주문 제작된 티셔츠가 남아 있는 상태라면 요청시 판매 가능합니다. 인기가 좋다면 2차로 추가 제작해서 더 많은 분들께 드릴수도 있겠지요^^ 초기 제작된 티셔츠는 장당 6천원 정도 하고 있습니다. 판매시 5천원에 드릴 계획입니다.

그런데 사용하다보니 환경설정 부분은 일반적인 그래픽 인터페이스 기반이 아닌 텍스트 설정 방식이라서 어렵게 느껴집니다. (베타만 그런가?)저도 구글링을 해서 필요한 환경설정을 찾아야만 했는데요. 폰트를 변경하고, 워드 워랩, 탭 간격 등 기본적으로 변경해서 사용하는 옵션값들을 알려드릴까 합니다.

저는 맥을 사용하고 있어서, 환경설정을 Command + , 로 불러옵니다. 메뉴에서 Sublime Text 2 > Preferences > Settings User 를 눌러도 됩니다.

Preferences.sublime-settings 라는 환경설정 파일이 열리게 되는데 베타 2181버전에서는 주석만 있고, 아무것도 없는 빈 파일이 열립니다. 여기에 다음과 같이 입력하고 저장합니다.

// Settings in here override those in "Default/Preferences.sublime-settings", and// are overridden in turn by file type specific settings.

{
  "font_face": "Bitstream Vera Sans Mono",
  "font_size": 13,
  "tab_size": 2,
  "translate_tabs_to_spaces": true,
  "word_wrap": true
}

JSON 방식으로 작성하도록 되어 있습니다. 옵션 키와 값으로 이루어져 있고, 값을 변경후 저장하면 바로 적용됩니다. 입맛대로 수정해서 사용하시면 될 것 같습니다.

한국과 일본의 여러 전문가들이 한자리에 모여서 웹표준과 접근성에 대한 주제로 발표를 한다는 것만으로도 이 행사는 큰 의미가 있다는 생각이 듭니다. 1회와 2회 크고 작은 실수도 있었고 진행에 여러 어려움도 있었지만 주최자 이유미씨와 CSS Design Korea의 운영자인 전승엽님을 중심으로 여러 스탭들이 끈기있게 준비를 해주고 있어 잘 마무리할 수 있었고, 올해 역시도 더 나은 모습으로 행사를 진행해줄 것이라는 믿음이 생깁니다.

특히 올해는 접근성에 대한 주제가 눈에 띄게 는 것이 보입니다. 접근성 컨설턴트로 활동하고 계시다는 우에키 마고토씨를 비롯해서 한국 웹접근성 그룹의 장성민님, 그리고 오랫동안 CDK를 이끌어 오셨던 홍윤표님이 접근성에 대한 주제로 발표를 준비하고 계시다고 합니다. 이 세분 외에도 오마가리 히토시님의 워드프레스 세션과 세키야 마유코님의 코딩 세션, 한국 MS의 황리건님의 HTML5 세션이 준비되어 있다고 하는군요.

좀 더 자세한 행사 내용은 CSS Nite in Seoul 공식 웹사이트를 통해서 확인해 보실 수가 있겠구요. 온오프믹스를 통해서 등록하실 수 있습니다. 이 행사는 유료로 진행되며, 많은 분들의 관심과 참여를 부탁드립니다.

다음과 같이 마크업합니다.

<label>비밀번호: <input type="password" name="password"></label>

브라우저에서는 다음과 같이 나타납니다.

그리고 입력 상자에 커서가 위치하게 되면 다음과 같이 placeholder 속성의 값으로 작성된 문자열이 사라지는 것을 볼 수 있습니다.

placeholder 속성을 사용하지 않았을 경우에는 추가적인 마크업이 필요했습니다.

<label>비밀번호: <span class="placeholder">비밀번호를 입력하세요</span> <input type="password" name="password" ></label>

또한, 이것만으로는 placeholder 메시지가 입력 상자 위에 위치한 것처럼 보이도록 만들수 없기 때문에 CSS를 함께 적용해야만 했습니다.

label{position:relative;}
label .placeholder{position:absolute;top:4px;left:50px;z-index:2;}

위와 같이 .placeholder 클래스를 갖는 span 요소를 절대 위치로 정의하여 입력 상자 위에 떠 있는 것처럼 보이도록 스타일링을 해야 했습니다. 여기서 입력 상자에 포커스가 위치한 경우 placeholder 메시지를 감추어야 하기 때문에 추가적인 스타일과 자바스크립트 함수가 필요하게 됩니다. 이것만 보더라도 HTML5의 placeholder 속성이 얼마나 유용한지 알 수 있습니다. 하지만 안탑깝게도 모든 브라우저에서 이 속성을 사용할 수는 없습니다. 예상하겠지만 IE는 6~9사이의 어떤 브라우저도 HTML5의 placeholder 속성을 지원하지 않습니다. 방법은 있습니다. 부담스럽다고 느낄수 있겠지만 Nikita Vasilyev가 만든 placeholder.js 스크립트를 사용하면 IE에서도 동일한 효과를 얻을 수 있습니다. IE6에서조차도 작동하는 것을 볼 수 있습니다. https://github.com/NV/placeholder.js 에서 소스를 구할 수 있습니다.

다만, IE에서는 password 타입의 입력 상자에서는 placeholder 텍스트를 제대로 보여주지 못합니다. 또 한가지 고민이 있습니다. 현재 개별 브라우저는 placeholder 텍스트에 대한 스타일 지원이 미흡합니다. 때문에 디자이너가 사용자가 입력하는 텍스트와 placeholder 텍스트를 구분하여 색상과 글꼴을 디자인했다면 우리는 이를 해결할 필요가 있습니다.

우선 다행스러운건 Nikita Vasilyev의 스크립트가 placeholder 텍스트의 색상을 지정할 수 있도록 돕고 있다는 점입니다. Nikita Vasilyev의 스크립트를 직접 고치지 않았다면 placeholder 기능이 추가된 입력 요소들은 .text-placeholder 클래스를 갖도록 설계되어 있습니다. 따라서 다음과 같은 CSS를 추가만 해 주면 됩니다.

.text-placeholder{color:blue;}

IE7에서 본 화면입니다. placeholder 텍스트가 CSS에서 정의한대로 파란색으로 나타나는 것을 볼 수 있습니다. 그런데 이번에는 크롬과 사파리 그리고 파이어폭스에서 문제를 일으킵니다. 이들 브라우저에서는 파란색으로 보이지 않습니다.

웹킷 기반의 크롬과 사파리 그리고 파이어폭스는 placeholder 텍스트를 CSS에서 처리할 수 있도록 벤더 전용 속성을 제공하고 있었습니다.

::-webkit-input-placeholder{color:blue;} /* 웹킷 전용 속성 */
textarea:-moz-placeholder, input:-moz-placeholder{color:blue;} /* 파이어폭스 전용 속성 */

이제 크롬과 사파리, 파이어폭스에서도 파란색 placeholder 텍스트를 볼 수 있습니다.

[데모]

placeholder 속성은 전통적인 방식을 매우 경제적으로 만들어줍니다. 마크업을 추가하고, CSS로 포지셔닝을 하고, 자바스크립트로 사용자 클릭에 따라 보여지거나 감추어지는 동작을 구현해야 하는 과정을 마크업 속성 하나로 처리하기 때문입니다. 하지만 낡은 IE들은 속성을 지원하지 않고 있다는 것이 다시 한 번 우리를 실망스럽게 만듭니다. 그렇지만 이미 jQuery를 사용하고 있다면 Nikita Vasilyev의 스크립트를 추가하여 위와 같이 placeholder를 구현하는 것은 그렇게 나쁜 방법은 아닐겁니다. 이미 우리는 이 기능을 위해서 함수를 만들어 사용하고 있었으니까요.

솔직히 심플하게 작성된 placeholder 함수가 HTML5의 placeholder 속성에 NV의 스크립트를 추가한것보다 더 효율적일 수 있습니다. 그래서 든 생각인데 별도의 프레임워크에 기대지 않으면서 위의 몇가지 이슈를 모두 해결해주는 깔끔한 스크립트가 공개되면 사소한 고민을 털어버릴수 있지 않을까 싶습니다. :)

지난 2월 15일 수요일 저녁, 종로 토즈에서 2월 운영회의가 있었습니다. 7명이 참석했고, 다섯번째 웹표준 오리엔테이션과 게시판 폐쇄, 기념 티셔츠 제작에 대한 논의들이 있었습니다.

개요

• 제목 : 운영회의 2012/2
• 참석 : 장기웅, 추지호, 이동환, 서광철, 구경모, 김성영, 김정미
• 날짜 : 2012년 2월 15일 수요일 오후 8:00 ~ 10:00
• 장소 : 토즈 종로점
• 장소 후원 : 구글 코리아

내용

• 웹표준 오리엔테이션 준비
  • 3월 17일(토) 예정(변경될 수 있음)
  • 행사일 D-2주까지 기념 티셔츠 디자인 완료
  • 행사일 D-10일까지 이벤트 페이지 개선 완료
  • 행사일 D-2일까지 신청 접수 완료
  • 추지호, 장기웅 외 스탭 3명 참여(미정)
• 코딩 행사 준비 회의
  • 행사명 미정
  • OT 행사 종료 후 1개월 후쯤 비공식 또는 소규모로 테스트 진행
• 블로그 및 게시판 개편 회의
  • 블로그 테마 변경 및 UI 개선
    • 시간 관계상 논의 못함.
  • 게시판 종료 및 대안 방안
    • 게시판 종료 시기 미정. 4월중 예정.
    • 2~3월간 미투데이와 트위터를 통한 SNS 커뮤니케이션에 집중함.
      • 미투데이 – 이동환
      • 트위터 – 추지호
  • ‘클리어보스 네트워크’ 강화
    • 스탭 및 회원 사이트(블로그) 피드를 모아서 클리어보스 블로그 메인에 노출시키는 것.
    • 일종의 메타블로그. 네트워크가 커지고, 활성화되면 좌측 콘텐츠 영역으로 확장 계획.
• 2012년 기념 티셔츠 제작
  • 김정미님 디자인
  • 웹표준 오리엔테이션 #5부터 착용 가능하도록 준비
  • 세탁 후에도 색빠짐이 심하지 않은 원단으로 제작

2월 운영회의 날짜를 2월 15일 수요일로 변경합니다. 장소와 시간은 동일합니다.

Update #1

운영자 사정으로 2월 6일 운영회의는 열리지 않았습니다. 다시 날짜를 잡아서 공지하도록 하겠습니다. 참석 예정자 여러분들께 진심으로 사과 말씀 드립니다.

개요

• 제목 : 운영회의 2012/2
• 참석(예정자) : 추지호, 장기웅, 이동환, 서광철, 구경모, 김성영, 김정미
• 날짜 : 2012년 2월 15일 수요일 오후 8:00 ~ 10:00
• 장소 : 토즈 종로점
• 장소 후원 : 구글 코리아

내용

• 웹표준 오리엔테이션 준비 회의
• 코딩 행사 준비 회의
• 블로그 및 게시판 개편 회의

기타

• 클리어보스 회의는 누구나 참석이 가능합니다. 참석 희망자는 clearboth.org [at] gmail.com 으로 메일을 보내주세요. 단, 토즈가 선예약되어 있기 때문에 참석자가 늘어나 동일 장소내에 다른 방으로 이동이 불가능한 경우 참석이 어려우실 수 있습니다.
• 위 참석 예정자 이외에 3명 더 참석 가능합니다.
• 회비는 없습니다.

얼마전에 웹액츄얼리에서 ‘워드프레스 제대로 파기‘라는 책을 발간했는데요. 저 개인적으로도 관심이 있어서 구매할 생각이 있던 책이었습니다. 그런데 웹액츄얼리에서 클리어보스에 이 책을 선물로 보내주었습니다. 이렇게나 감사할때가!

총 3권을 보내주셨구요. 아직 이 책을 어떻게 활용할지를 결정하지는 않았습니다. 바로 클리어보스 행사가 있다면 행사 참석자분들 가운데 세분께 드릴 수 있을것 같긴 한데 현재 날짜가 잡힌 행사가 없네요^^

조만간 이 책이 꼭 필요한 분들께 돌아갈 수 있도록 아이디어를 내서 다시 공지를 하도록 하겠습니다.

다시 한 번 이 책을 선물해 주신 웹액츄얼리에 감사의 인사를 드리고, 새해 복 많이 받으시길 바라겠습니다.