NULI

텍스타일의 세계로 오신것을 환영합니다!

준탑 — Mon, 06 Sep 2010 17:56:48 +0900

더 좋은 글쓰기를 위해 어떤 도움이 필요할까요? 더 쉬운 글쓰기를 위해서는요? 텍스타일은 "더 좋은 글을 더 쉽게 쓰고싶다"는 욕구로 부터 시작되었습니다. 만약 지금 여러분 곁에 좋은 글쓰기 선생님을 둘 수 없다면 텍스타일을 선택한 것은 무척 고무적인 일입니다. 텍스타일의 글쓰기 도구는 조금 특별 하거든요. ^^ 함께 만나 보시죠!

글감 수집기를 설치해 보세요!

좋은 글에는 항상 참조와 인용이 따릅니다. 글감 수집기는 좋은 글이 보다 많은 사람들의 글과 객관적인 사실을 참조하고 있다는 사실에 주목하였고 글을 쓰는 과정에서 이러한 작업을 보다 편리하게 할 수 있도록 도울 것입니다. "글감 수집기"를 여러분의 브라우징 도구에 북마크 하시면 웹 서핑 도중 참조하거나 인용하고 싶은 글을 여러분의 텍스타일에 담아둘 수 있습니다. 하지만 기억하세요. 다른 사람의 글을 수집한 다음 다시 배포할 때 저작권자가 이런 행동을 허용하고 있는지 반드시 확인해야 합니다.

글감 수집기는 "글 관리 > 글감보관함" 페이지에서 설치할 수 있습니다.

글감 수집기가 웹 브라우저의 북마크 도구모음에 설치된 화면.

웹 브라우저에 설치된 "글감 수집기"를 이용하여 인용구를 수집하는 장면.

텍스타일 에디터를 사용해 보세요!

텍스타일 에디터는 텍스타일을 다른 블로깅 도구들과 차별화 하는 가장 두드러진 특징 가운데 하나 입니다. 텍스타일 에디터는 "좋은 글 쓰기"를 위해 개발되었고 텍스타일 에디터를 이용해서 작성된 글은 보다 논리적이고 읽기 편하며 의미있고 검색엔진과 친해질 확률이 더 높습니다. 하지만 이 도구에 익숙하지 않은 분들을 위하여 기존에 사용하시던 익숙한 에디터를 사용할 수 있도록 고려되어 있습니다.

텍스타일 에디터를 이용하여 하나의 단락을 작성하는 화면.

텍스타일 에디터를 조금 더 편리하게.

텍스타일 에디터 열기 : 1부터 9까지 사용.
편집 모드로 전환 : 'Enter' 또는 '더블 클릭' 또는 '편집'을 클릭.
단락 선택 : 선택하려는 단락을 '클릭' 또는 '방향키'를 위아래로 이동하여 선택.
선택된 단락을 이동 : 'Ctrl+방향키' 또는 '드래그&드롭'.

익숙한 에디터 사용하기.

새로운것은 언제나 불편하다는 사실을 잘 알고 있습니다. 텍스타일 에디터는 기존에 사용하던 도구들과 다른 환경을 제공하고 있기 때문에 처음에는 낮설고 불편할런지도 모릅니다. 실제로 텍스타일 에디터는 좋은 글쓰기를 위해 기존의 글쓰기 환경이 제공하던 많은 것들을 포기하고 있습니다. 풍부한 표현보다 구조적인 글쓰기에 집중할 수 있도록 유도하는 과정에서 할 수 없는 일들이 생겨나게 되었습니다. 하지만 여러분이 이 불편한 도구에 익숙해지기위해 작은 노력과 주의를 기울인다면 여러분의 글은 틀림없이 예전보다 더 좋아질 것입니다.

여전히 텍스타일 에디터가 익숙하지 않는 분들께서는 관리자 환경의 "설정 > 쓰기환경 설정 > 편집방식 설정" 메뉴에서 "기타 편집기"를 선택 하세요. 'XpressEditor, FCKeditor, Xquared' 와 같이 기존에 여러분들이 사용하시던 익숙한 오픈소스 에디터를 그대로 사용하실 수 있습니다.

스킨 편집하기.

만약 여러분이 선택한 스킨이 컬럼 구조를 유지하고 있다면 화면의 좌우 배치를 쉽게 바꿀 수 있습니다. 모든 스킨이 이렇게 컬럼 형태를 유지하고 있는것은 아니기 때문에 손쉬운 스킨 조작 화면이 존재하는 것은 아니지만 간단하게 HTML 코드를 변경하는 것으로 가능하게 됩니다

"디자인 > HTML·CSS 편집 > HTML 편집" 화면에서 두 번째 라인 <div id="container" class="ce"> 부분을 <div id="container" class="ec"> 으로 변경하시면 화면의 좌우 배치가 바뀝니다. 이러한 설정은 '초기화' 하거나 다른 스킨을 선택했을 때 사라집니다.

텍스타일의 세계로 오신것을 환영합니다!

폭폭이 — Mon, 06 Sep 2010 14:53:44 +0900

글감 수집기를 설치해 보세요!

글감 수집기는 "글 관리 > 글감보관함" 페이지에서 설치할 수 있습니다.

글감 수집기가 웹 브라우저의 북마크 도구모음에 설치된 화면.

웹 브라우저에 설치된 "글감 수집기"를 이용하여 인용구를 수집하는 장면.

텍스타일 에디터를 사용해 보세요!

텍스타일 에디터를 이용하여 하나의 단락을 작성하는 화면.

텍스타일 에디터를 조금 더 편리하게.

텍스타일 에디터 열기 : 1부터 9까지 사용.
편집 모드로 전환 : 'Enter' 또는 '더블 클릭' 또는 '편집'을 클릭.
단락 선택 : 선택하려는 단락을 '클릭' 또는 '방향키'를 위아래로 이동하여 선택.
선택된 단락을 이동 : 'Ctrl+방향키' 또는 '드래그&드롭'.

익숙한 에디터 사용하기.

스킨 편집하기.

텍스타일의 세계로 오신것을 환영합니다!

소서방 — Mon, 06 Sep 2010 10:29:21 +0900

글감 수집기를 설치해 보세요!

글감 수집기는 "글 관리 > 글감보관함" 페이지에서 설치할 수 있습니다.

글감 수집기가 웹 브라우저의 북마크 도구모음에 설치된 화면.

웹 브라우저에 설치된 "글감 수집기"를 이용하여 인용구를 수집하는 장면.

텍스타일 에디터를 사용해 보세요!

텍스타일 에디터를 이용하여 하나의 단락을 작성하는 화면.

텍스타일 에디터를 조금 더 편리하게.

텍스타일 에디터 열기 : 1부터 9까지 사용.
편집 모드로 전환 : 'Enter' 또는 '더블 클릭' 또는 '편집'을 클릭.
단락 선택 : 선택하려는 단락을 '클릭' 또는 '방향키'를 위아래로 이동하여 선택.
선택된 단락을 이동 : 'Ctrl+방향키' 또는 '드래그&드롭'.

익숙한 에디터 사용하기.

스킨 편집하기.

블로그 시작

_부르 — Fri, 03 Sep 2010 16:47:35 +0900

잘 해?

임시 저장하였습니다....

NULI — Thu, 02 Sep 2010 18:24:06 +0900

임시 저장하였습니다.
임시저장움훼훼훼훼

중요 표시 버튼을 접근성 있게 만들기

펄님 — Wed, 01 Sep 2010 22:12:21 +0900

아래와 같이 생긴 중요 표시 버튼, 많이들 보셨나요?
중요한 메일이나, 파일들을 표시하기 위해 사용하는 기본적인 UI 요소로 클릭을 하면 색깔이 진해지면서 중요한 아이템이라는 의미를 나타내고, 다시 클릭을 하면 해제가 됩니다.

오늘은 이 중요 표시 버튼을 접근성 있게 만드는 방법을 공유해보고자합니다.

먼저-
'접근성이 있다' 라고 말할 수 있는 것은 아래 두 가지 항목을 만족시키기 때문입니다.

시각 장애환경에서 스크린리더로 의미 파악이 가능합니다.
키보드로 접근과 조작이 가능합니다.

체크박스를 이용하자!

중요 표시 버튼은 어떤 엘리먼트를 이용해서 마크업 할 수 있을까요?
<a>로 처리할 수도 있고, <button>을 이용할 수도 있지만 저는 체크박스(<input type="checkbox">)를 이용해보려고 합니다.
그 이유는 중요 버튼을 사용하는 데 있어서 어떤 항목이 중요한지,안한지에 대한 '상태'정보가 무엇보다 중요하다고 생각했으며
그 '상태'정보를 가장 직관적으로 나타내 줄 수 있는 것은 체크박스라고 생각했기 때문입니다. ^^

체크박스를 이용한다면 기본적인 마크업은 아래와 같을 것입니다.
반드시 <input>의 id값과 <label> for 값을 동일해주어야 둘 사이의 관계가 성립되니 꼭 유의해주세요~!

<input type="checkbox" id="isimp"><label for="isimp">중요 표시</label>

위의 이미지를 보면 체크박스는 안보이는데 어떻게 체크박스를 사용할 수 있을까요??
그 비밀은 바로 아래 그림에 있습니다~

<input> 엘리먼트는 밑에, <label> 엘리먼트는 그 위에 얹혀진 형태로, 우리 눈에 보이는 별모양의 이미지는 <label>이 되는 것입니다.

대체 텍스트는 필수!

바로 위에서 눈에 보이는 별 모양의 이미지가 <label>이 된다고 설명하였습니다.
하지만 이미로만 표시하면 시각 장애환경에서 해당 콘텐츠를 인식할 수 없겠쬬?
따라서 텍스트가 반드시 제공되어야 합니다. 이때 텍스트는 살짝 숨겨서 눈에는 보이지 않지만 스크린 리더로는 인식이 가능하도록 처리해줍니다.

아래 코드의 blind 클래스가 바로 숨김처리를 해주는 녀석입니다.

<label><span class="blind">중요 표시</span></label>

숨김처리를 해 줄때 display:none으로 해주면 안된다는 점을 명심해주세요~!
display:none으로 하면 눈에만 안보일 뿐 아니라 스크린리더도 인식하지 못한답니다~

.blind{visibility:hidden;overflow:hidden;position:absolute;top:0;left:0;width:0;height:0;font-size:0;line-height:0}

CSS야 부탁해!

그 다음으로 할 일은 CSS를 이용해서 체크박스를 숨기고 <label>에 별 모양의 이미지를 적용하는 것입니다.
우선 코드를 보실까요?

input{position:absolute;top:0;left:0;margin:0;width:17px;height:17px}
label{display:block;position:absolute;top:1px;left:1px;width:15px;height:15px;background:url(btn_imp.gif)undefinedundefinedundefinedundefined;cursor:pointer}
label.on{background-position:0 -20px}

input은 absolute 속성을 이용해 포지션을 고정하고 여백을 제거한 후 크기를 지정해주었습니다.
label 역시 absolute 속성을 이용해 input 위에 겹쳐질 수 있도록 설정하고 별 모양의 이미지를 background로 지정하였습니다.
그리고 label이 활성화 되었을 때는 ".on"이라는 클래스를 추가하여 별 모양의 색깔이 변경되게 하였습니다.

여기서 중요한 것은 label의 배경이 투명하지 않아야 한다는 것입니다. 투명하면 아래 이미지처럼 체크박스게 뒤에 숨어있는 것을 들통나게 될테니까요;;

그리고, 별 모양의 이미지가 클릭커블하다는 것을 알려주기 위해서 마우스 커서 모양을 변경(cursor:pointer)하는 것도 중요합니다.

키보드 접근성 보장하기!

아마 위의 CSS 코드를 보시고 아래와 같은 궁금증이 있을 수 있습니다.

"왜 input의 크기가 17x17이어야 하지?"
"label의 포지션 값은 왜 input의 포지션 값보다 1px 씩 밀려났을까?"
"label의 크기는 왜 input 보다 2px 작은 15x15지?"

그 이유는 바로 키보드 접근성 때문입니다.
위와 같은 내용이 고려되어 있지 않다면, 키보드 포커스 표시가 나타나지 않아 키보드가 접근을 했는지 안했는지 알 수 없을테니까요-
아래와 같은 속성들로 인해서 키보드로 접근했을 때, 포커스 표시가 나타납니다.

input{position:absolute;top:0;left:0;width:17px;height:17px}
label{position:absolute;top:1px;left:1px;width:15px;height:15px}

키보드 포커스 표시가 된 중요 표시 버튼

키보드로 접근이 되고 나면 기존의 체크박스를 조작할 때와 마찬가지로 스페이스바를 누르면 상태를 변화시킬 수 있습니다.

테스트해보기!

이제 설명은 다 끝났습니다.
아래 경로의 파일을 통해 스크린리더와 키보드를 이용한 접근성을 확인하실 수 있습니다.^^
(만약 부족한 부분이 있다면 친절한 댓글 부탁드립니다.)

접근성이 보장된 중요버튼
http://pearlnim.com/example/access_imp/btn_imp.html

test

블루라군 — Wed, 01 Sep 2010 11:39:32 +0900

사아자차카타

NULI 포스팅 및 기...

NULI — Wed, 01 Sep 2010 11:26:56 +0900

NULI 포스팅 및 기술문서 작성 가이드
NULI 포스팅 및 기술문서 작성 가이드
NULI 포스팅 및 기술문서 작성 가이드
NULI 포스팅 및 기술문서 작성 가이드
NULI 포스팅 및 기술문서 작성 가이드
NULI 포스팅 및 기술문서 작성 가이드
NULI 포스팅 및 기술문서 작성 가이드
NULI 포스팅 및 기술문서 작성 가이드
NULI 포스팅 및 기술문서 작성 가이드
NULI 포스팅 및 기술문서 작성 가이드
NULI 포스팅 및 기술문서 작성 가이드
NULI 포스팅 및 기술문서 작성 가이드
NULI 포스팅 및 기술문서 작성 가이드

임시 저장 테스트

NULI — Wed, 01 Sep 2010 10:48:31 +0900

가나다라마바

웹 표준 마크업 개발 프로세스

NULI — Mon, 30 Aug 2010 19:02:28 +0900

세미나명 : 웹표준 워크샵 2010
프로그램 : 웹표준 마크업 개발 프로세스
일시 : 2010.7.7(수) 10시 ~ 18시
장소 : 한국과학기술회관 B1F 대회의장
발표자 : 박태준팀장

버튼의 활성화 여부에 따른 커서 모양 적용하기

NULI — Tue, 24 Aug 2010 18:14:01 +0900

사용하기는 꽤나 번거롭지만 여기저기 많이 쓰이고 있는 아이가 바로 이미지 버튼입니다.
먼저, 오래 전에 폭폭이님이 이미지 버튼을 문제 없이 사용하는 방법에 대해 작성하신 글을 참고해주세요.^^

NULI - button의 브라우저별 랜더링 비교, 사용방법, 문제점, 해결방법
http://html.nhndesign.com/blog/2038

제가 오늘 이야기 하고 싶은 부분은 바로 버튼의 활성화 여부에 따른 커서 모양에 대한 부분입니다.
너무 간단해서 이미 잘 아시는 내용일까봐 살짝 걱정이 되기도 하네요. ^^;

경우에 따라서는 이미지 버튼을 사용할 때, 활성화 버튼, 비활성 화 버튼이 있기 마련입니다.
아래 이미지 처럼요-
(왼쪽이 활성화 버튼, 오른쪽이 비활성화 버튼입니다.)

이 때,
활성화 버튼은 클릭이 가능하다는 것을 알려주기 위해 커서 모양을 손모양으로 할 필요가 있고-
비활성화 버튼은 클릭이 불가능하기 때문에 커서 모양을 기본으로 해 주는 것이 바람직하겠죠.

(물론 이미지가 아닌 기본 버튼은 충분히 클리커블하기 때문에 커서 모양을 따로 변경해 줄 필요는 없습니다.)

먼저 이미지 버튼의 커서 모양을 손 모양으로 변경합니다.

button{cursor:pointer}

위 스타일을 적용하면 이미지 버튼은 마우스 오버시에 손 모양이 나타나게 됩니다.

그리고 비활성화 버튼에는 button에 disabled="disabled" 속성을 추가합니다.

물론 이미지 버튼이기 때문에 disabled="disabled" 속성을 추가하더라도 표면적으로 달라지는 부분은 없습니다.
비활성화에 따른 버튼의 모양을 변경하려면 별도의 클래스를 생성하여 이미지를 변경해주어야 합니다.

disabled="disabled" 속성은 CSS나 이미지가 로드되지 않았을때에도 이 버튼이 비활성화 되었다는 것을 바르게 나타내주기 위해서 꼭 필요한 속성이죠.
그리고 지금 얘기하려고 하는 커서 모양을 적용할 때도 꼭 필요한 아이입니다!

이제 disabled="disabled" 속성이 적용된 비활성화 버튼에 마우스를 오버해보세요. 마우스 커서가 어떻게 보이나요?
제가 간단히 각 브라우저별 커서 모양을 정리해보았습니다.^^

IE6~8의 경우는 CSS로 커서 스타일을 변경했지만 비활성화된 상태에서 커서의 모양이 자동으로 변경되는 것을 알 수 있습니다.
(이게 바람직한건지는 잘 모르겠어요.^^;)

그렇다면 다른 브라우저에서도 커서 모양을 변경하려면 어떻게 하는 것이 좋을까요?!
아마 눈치 채신 분들도 있겠찌만- 속성 선택자(Attribute Selector)를 사용하는 것입니다.
이 선택자는 매우 유용하지만 IE6,7에서는 지원되고 있지 않아 실제로 사용하는 경우는 극히 드뭅니다.

그런데 지금의 경우는 IE6,7에서 자동으로 커서 모양을 바꿔주고 있으니 신경쓸 필요가 없겠쬬!
따라서 아래와 같이 속성 선택자를 마음껏 활용해줍니다.

button[disabled='disabled']{cursor:default}

위 내용이 모두 적용된 테스트 페이지가 아래 있습니다.
참고하세요.^^

버튼의 활성화 여부에 따른 커서 모양 - 테스트 페이지
http://pearlnim.com/example/button_cursor/button.html

모바일 환경에서의 마크업 개발 이슈

NULI — Tue, 24 Aug 2010 10:53:21 +0900

세미나명 : 웹표준 워크샵 2010
프로그램 : 모바일 환경에서의 마크업 개발 이슈
일시 : 2010.7.7(수) 10시 ~ 18시
장소 : 한국과학기술회관 B1F 대회의장
발표자 : 문지애선임UI개발자

모바일 웹 브라우저

부르 — Thu, 19 Aug 2010 20:02:50 +0900

안녕하세요. 웹표준화팀 박상혁입니다.
이번주에는 단말에 탑재되어 있는 모바일 웹 브라우저에 관해 알아보겠습니다.

최근 모바일 웹이 모바일 웹 2.0 이라는 이름으로 이슈가 되고 있습니다. 그 배경에는 WIMAX, WLAN, WPAN, WIFI등 무선 네트워크의 진화가 기존 WAP 환경에서 mobile web browsing 서비스로 전환되며 좋은 환경을 제공하고 있고 단말로 유선 웹 서비스 이용이 가능해져 부족했던 컨텐츠를 기존 웹이 대신 할 수 있게 되었다는 점입니다.
여기에 발 맞춰 야후,구글등 인터넷 서비스 업체들도 모바일 관련 서비스를 경쟁적으로 개발 하고 있습니다. 여러가지 원인 중 가장 큰 원인은 오즈, 햅틱, 시크릿, 아르고, 옴니아, 아이폰등의 단말의 컨버전스, 고속화, 대용량화등이 아닐까 생각됩니다.

이러한 단말들은 모바일 환경의 진화에 발 맞춰 기존 유선 웹 서비스를 터치스크린 UI와 풀브라우징 브라우저를 이용해 보다 빠르고 편리하게 접근 할 수 있습니다. 유선 웹 서비스 이용가능한 이러한 풀 브라우저는 아래와 같이 크게 세가지 방식으로 유선 웹 서비스를 제공합니다.

Web-Viewing Type: 웹 페이지를 Server-based Type과 같이 데이터 가공 과정 없이 Page Viewing Server에서 랜더링 시킨 웹 페이지를 이미지로 변환해 단말로 전송하는 방식입니다. 컨텐츠 구성, 화면 크기와 관계없이 전송 데이터 용량이 일정해 유선 웹서비스의 대용량 데이터 전송을 피하기 위한 방식입니다.
Standalone Type: 웹페이지를 별도의 서버 없이 휴대폰 단말에 내장된 브라우저 기능으로 모두 처리하는 방식입니다. PC 브라우저와 동일한 방식으로 웹 서비스를 제공합니다.
Server-based Type: 휴대폰 단말 환경에 최적화시키기 위해 페이지 변환 서버를 거쳐 가공된 웹 페이지를 전송 받습니다. 변환서버에서 한번 필터링 된 데이터를 전송받기 때문에 Standalone Type 보다는 동일한 페이지라도 적은 데이터를 전송받는 구조로 Web Like를 표방했던 WAP 2.0 시대의 Web-Viewing Type의 대안입니다. 페이지 랜더링 속도가 Web-Viewing Type 과 비슷하게 빨라 혹자는 Web-Viewing Type 이라고 말하는 경우도 있습니다. 보통 브라우저 밴더사에서 변환서버를 직업 운영하고 있으며 변환서버의 데이터 가공 기준은 밴더사의 기술로 외부로 공개되어 있지 않은 것으로 알고 있습니다. 대표적인 브라우저로는 오페라 소프트웨어의 오페라 미니가 있습니다.

이중 흔히들 말하는 풀 브라우저라고 불리는 브라우저의 방식은 Standalone Type 입니다. 이 방식은 서버에서 전송받은 데이터를 단말의 브라우저에서 파싱과 랜더링 과정을 진행해 컨텐츠를 보여주는 방식으로 기존 유선 웹 브라우저와 동일합니다. 또한 플래시도 지원하며 AJAX 지원, DOM을 사용한 상호 작용이 가능하며 SSL,TLS,Cookie 도 지원합니다.
이렇게 유선 웹서비스를 PC와 동일한 화면에서 이용 가능한 Standalone Type의 브라우저의 종류는 아래와 같은 것들이 있습니다.

모바일 웹 브라우저

인프라웨어 Polaris
Opera mobile – (9.2 이하 presto 기반, 9.5 이상 Presto Core 2 기반 )
MS IE mobile - Windows mobile
Google Chrome – Android (webkit기반)
Apple Safari – MAC os (webkit기반)
Access Netfront - Multi Platform
Nokia oss – S60 (webkit기반)
Mozilla Fennec – linux , Windows Mobile (gecko기반)

이중 국내에서는 출시되는 단말에 약 70% 정도가 인프라웨어 Polaris 브라우저를 탑재하고 있으며 IPod Touch에는 Safari, 삼성 옴니아폰에는 웹뷰어, Opera mobile, IE mobile등 세가지의 브라우저가 기본 탑재되어 있습니다. 그 밖의 근래 출시된 터치스크린 UI의 단말도 기존 웹뷰어 뿐만 아니라 단말에 따라 Polaris, IE mobile 등의 브라우저가 탑재되어 출시되고 있습니다. 4월 WIPI 탑재 의무화가 폐지되면서 외국산 단말기들이 출시되면 국내에서 사용되는 모바일 브라우저의 종류는 더 많아 질 것으로 보입니다.

하지만 단말에 탑재된 브라우저만으로는 PC와 동일한 이용은 사실상 불가능 합니다. 가장 큰 이유는 국내 유선 웹 서비스의 액티브X등 모바일 환경에서 구현 불가능한 비표준 컨텐츠를 사용한 개발, 다양한 단말의 특성(화면크기등)을 전혀 고려하지 않은 점등 때문입니다. 그래서 초기 화면을 보는데 만족하는 수준 정도인 서비스들이 대부분입니다. 예컨대 위의 브라우저들중 어떠한 브라우저를 선택 하느냐에 따라 플래시가 안보일수도 있고 로그인이 안될 수 있으며 전송받은 데이터의 양이 다를 수도 있습니다. 또한 어떠한 브라우저를 선택하더라도 전송받는 데이터양이 많아 페이지 로딩,이동시간이 오래걸리며 PC 모니터에 맞춰진 화면때문에 매번 확대,축소,드래그등을 해야하는 불편함이 있습니다.

이렇게 인프라,단말,유저의 관심 증대 등의 모바일 시장의 활성화의 기초가 다져지고 있어도 단말로 이용 할 수 있는 서비스가 없습니다. 그래서 국내 웹 서비스 업체들은 모바일에 최적화된 기능과 UI, 데이터 전송량을 줄이며 기존 유선 웹 서비스와의 연동이 가능한 서비스로 방향을 잡고 제공,개발하고 하고 있습니다.

하지만 그 역시도 모바일 전용 서비스라고 해도 다양한 단말과 브라우저에 최적화된 서비스를 제공하고 있지는 못합니다. 일부 특정 단말이나 브라우저에 맞춰진 서비스를 제공하는 것이 대부분 입니다. 이러한 문제를 해결하기 위해서는 먼저 아래 사항들을 충분히 고려해 해결 방안을 모색 해야 할 것으로 보입니다.

브라우저 호환성 확보 문제
비표준 환경 및 독자 컨텐츠 문제
컨텐츠 중복 제작 문제
적용 표준의 개수 문제
단말 크기 및 기능/성능 문제
네트워크 속도와 요금 문제

이러한 문제 해결의 가이드인 표준 스펙은 W3C에서 기존 HTML/XHTML/CSS 스펙¹⁾과 OMA의 스펙²⁾을 기초로 한 W3C Mobile 스펙³⁾ 작업이 진행 중이며 국내에서도 모바일 웹 2.0 포럼의 모바일OK 워킹그룹에서 모바일 웹 표준 작업이 진행되고 있습니다.
비록 유선 웹은 비표준 관련 기술들로 제공되고 있지만(개선되고 있지만 아직 미미한 수준) 모바일 웹은 각 브라우저 밴더, 이통통신 업체, 서비스 개발업체 모두 표준 스펙 준수로 최적화에 힘써야 할 것입니다. 모바일을 포함한 모든 웹 서비스를 변화시킬수도 있고 그럼 진정한 one-source multi-device도 가능하지 않을 까 생각합니다.

아래 문서들을 참고해 적은 글이며 오류나 수정이 필요한 부분은 연락주시면 바로 수정하겠습니다.

스펙 참조

참고자료

[모바일ok와표준화], etri, 2008.

CSS3 실전 예제

ws — Wed, 18 Aug 2010 19:49:47 +0900

세미나명 : HTML5 오픈 컨퍼런스
프로그램 : CSS3 실전 예제
일시 : 2010.7.2(수) 13시
장소 : 강남구 학동 건설회관
발표자 : 정찬명 선임 UI개발자

발표자료보기

널리 웹표준 가이드를 개편했습니다!

ws — Wed, 18 Aug 2010 19:17:56 +0900

안녕하세요. 기타도리입니다.

이번에 널리(NULI) 가이드라인 사이트를 개편하게 되었습니다.

업무 외 틈틈이 사이트를 운영하다 보니, 많이 신경을 못 썼던것이 사실인데요.

언젠가 팀원이 건네준 널리(NULI) 접속 통계를 보니, 부족한 사이트 임에도 많은 분들이 찾아주시고,

참고하고 계신것을 보고 좀 더 신경써야 겠다는 생각을 많이 했습니다.

그래서 그 첫걸음을 사이트에 대한 개편으로 시작합니다. ^^

기존, 잘 참고가 되지 않는 항목들을 없애고,

또 많이 보시는 항목 들 중 업데이트가 부족했던 항목들을 새롭게 업데이트 하였습니다.

(혹시 덜 된 부분이 있다면 덧글로 알려주세요 ^^)

특히, 사이트를 찾아주시는 분들이 가장 찾아 보시는 ‘마크업가이드’ 항목을 전면 개편하였는데요.

개편 전까지 올려져 있던 마크업 가이드 내용은 4년전 것으로,

크게 업데이트 되지 않아, 지금 개발 상황과 다소 맞지 않았습니다.

하지만 NHN 내부적으로는 마크업 가이드를 오히려 강력하게 제정하고 있었고,

이는 올해 초에 완성되어 마크업 코딩 컨벤션으로 활용중인 상태였습니다.

하지만 이 내용이 널리(NULI)에는 업데이트 되질 못하였습니다.

일단 가이드라인 내용이 너무 많아 웹버전으로 올리는 것이 쉽지 않았기에,

팀원들의 여가 시간에 자발적(?)참여를 통해서는 엄두가 안났습니다.

그래서 기존 사내에서 운영중인 마크업 코딩 컨벤션을 PDF버전으로 제공하여,

컨버팅 공수는 줄이고, 참고하실 분들에게는 코딩컨벤션 내용을 거의 모두(90%) 공개하는 것으로 가닥을 잡았습니다.

결론적으로, 기존 HTML버전의 가이드는 PDF방식으로 제공되고, 이는 PDF 웹뷰어를 통해

좀 더 쉽게 보실 수 있는 형태로 구성하였습니다. 또한 파일 전체를 다운로드도 가능하도록 해놨으니, 편한 형태로 참고하시면 됩니다.

이와 더불어,

마크업 개발 효율성을 높일수 있는 템플릿 라이브러를 구축하여 제공하고 있는데요.

이는 현재 NHN웹표준 개발자들도 활용하고 있는 것으로,

사이트를 참고하시는 국내 마크업 관련 개발자 분들에게도 도움이 될것으로 기대하고 있습니다.

UIO팩토리라는 이름을 붙여 운용중이며,

지속적으로 템플릿 항목들을 추가할 예정으로,

당장 쓸만한 내용이 없더라도, 지켜봐 주시기 바랍니다 :)

오래간 만에 전면 개편을 하며, 처음 이 사이트를 오픈하며 썼던 글을 찾아보게 되었는데요.

예나 지금이나,

이 사이트를 운영하며 공개 하는 목적은 국내 웹표준 혹은 마크업 개발자분들에게 도움이 되고자 함이니,

부족하더라도, 따듯한 시선으로 조언과 충고를 주신다면 즐겁게 반영해 나가도록 하겠습니다.

NULI

텍스타일의 세계로 오신것을 환영합니다!

글감 수집기를 설치해 보세요!

텍스타일 에디터를 사용해 보세요!

텍스타일 에디터를 조금 더 편리하게.

익숙한 에디터 사용하기.

스킨 편집하기.

텍스타일의 세계로 오신것을 환영합니다!

글감 수집기를 설치해 보세요!

텍스타일 에디터를 사용해 보세요!

텍스타일 에디터를 조금 더 편리하게.

익숙한 에디터 사용하기.

스킨 편집하기.

텍스타일의 세계로 오신것을 환영합니다!

글감 수집기를 설치해 보세요!

텍스타일 에디터를 사용해 보세요!

텍스타일 에디터를 조금 더 편리하게.

익숙한 에디터 사용하기.

스킨 편집하기.

블로그 시작

임시 저장하였습니다....

중요 표시 버튼을 접근성 있게 만들기

체크박스를 이용하자!

대체 텍스트는 필수!

CSS야 부탁해!

키보드 접근성 보장하기!

테스트해보기!

test

NULI 포스팅 및 기...

임시 저장 테스트

웹 표준 마크업 개발 프로세스

버튼의 활성화 여부에 따른 커서 모양 적용하기

모바일 환경에서의 마크업 개발 이슈

모바일 웹 브라우저

모바일 웹 브라우저

스펙 참조

1. HTML/XHTML/CSS specification

2. OMA specification

3. W3C mobile specification

참고자료

CSS3 실전 예제

널리 웹표준 가이드를 개편했습니다!