또 다른 웹환경, 이메일_전문성레포트_121024_v3.0.pdf

사내 전문성 레포트자료로 작성하였지만 취소됨-_-ㅋ

'개인 > ' 카테고리의 다른 글

이메일 레포트  (0) 2012.11.15
웹 접근성&웹 표준 완벽 가이드 부록 B  (0) 2012.02.21
시멘틱 마크업  (0) 2011.09.15
2011 디자인 레포트  (0) 2011.09.01
관계 디자인  (0) 2011.07.28
인레이  (0) 2010.10.26
by 수조 2012.11.15 17:30
회사 스터디`A`! 나의 발표자료

'개인 > ' 카테고리의 다른 글

이메일 레포트  (0) 2012.11.15
웹 접근성&웹 표준 완벽 가이드 부록 B  (0) 2012.02.21
시멘틱 마크업  (0) 2011.09.15
2011 디자인 레포트  (0) 2011.09.01
관계 디자인  (0) 2011.07.28
인레이  (0) 2010.10.26
by 수조 2012.02.21 18:04
시멘틱 웹?
월드와이드웹의 발명자인 팀 버너슬리의 아이디어로 사용자 요구를 만족시키는 방법에 대하여 보다 지능적으로 또한 형편에 따라서는 보다 직관적으로 만들어질 수 있지 않겠느냐는 차세대 웹에 관한 생각

시멘틱 웹 사례(??라고 하기엔 그닥 시멘틱하진 않음)

<사례1 다음 - 메타태그를 3중으로 하여 타이틀을 표시했으나 스크린리더에선 좀 불편할듯... 소스만봐도 문서구조도를 어느정도 알 수 있는점은 좋음>
 

<사례2 구글 - 잦은 div가 사용됨, 스크린리더사용자에 대한 배려 돋보임, 소스만봐서는 구조 파악 힘듬>
* 막상 사례를 찾으려니 시멘틱 이라고 할만한 웹사이트는 별로 없네요,, 더 찾아서 업뎃해야할듯
 


간단하게 지킬 수 있는 군더더기없고 시멘틱한 템플릿 만들기
 
1. 불필요한 <div> 태그는 제거하세요.
<form>, <ul> 요소를 감싸는 <div> 요소를 우리는 어렵지 않게 목격할 수 있습니다. 도대체 왜 쓸데없이 추가적인 <div> 요소를 생성하는 것인가요? 

2. 시맨틱한 마크업을 사용하세요.
우리는 항상 시맨틱한 마크업을 사용하여 HTML 문서의 코드를 작성해야합니다. 예를 들면 <h1> 요소에는 머릿말을, <p> 요소에는 문단 또는 단락을, <ul> 요소는 목록을 표현하는 목적을 두고 만들어진 요소들 입니다. 이러한 마크업을 준수하면 CSS가 지원되지 않는 접속환경에서도 알아볼 수 있는 HTML 문서를 제공할 수 있는 등의 혜택이 따르기 때문입니다.

3. <div> 요소를 최소화하세요.
<div> 요소가 무분별하게 사용된 템플릿을 보고 돌아버릴 뻔 한 적이 있나요? 조금 더 구체적인 질문을 하자면 <div> 요소의 닫는 태그가 누락되거나 시작 지점을 찾느라 고생해 본 경험이 있나요? 아마도 대부분의 개발자가 이러한 경험이 있을 것이라고 확신합니다. 그래서 우리는 항상 <div> 요소를 최소화하여 사용해야 합니다. 그리하면 디버깅이나 유지보수 작업이 훨씬 쉬워질 것입니다.

4. 들여쓰기(Indent) 규칙을 꼭 지키세요.
HTML을 마크업할 때 들여쓰기는 꼭 지켜야 합니다. 그래야 사람이 읽기 편하고 디버깅이 쉬워지니까요. 만약 Adobe Dreamweaver를 사용하고 있다면 Commands > Apply Source Formatting 명령으로 쉽게 들여쓰기가 완성 되도록 할 수 있습니다.

5. 닫힌 태그(</div>)에 주석을 달아 주세요.
보통 하나의 템플릿은 header, sidebar, footer 등 여러가지 구성요소로 구분되어 완성됩니다. 그래서 구성요소의 구분이 끝나는 </div> 태그에 주석을 달아두면 두번다시 찾아 해메이는 일은 없을 것입니다. 코드중에 </div><!-- /wrapper -->라는 주석을 발견했다면, 이것이 의미하는 것은 <div id="wrapper"> 요소가 이곳에서 클로즈 된 것임을 알 수 있는 것이죠.

시멘틱웹 시장 아직은 없다
http://esconsult.egloos.com/838008

잘 쓰이지 않지만 유용한 css2 속성들
http://firejune.com/1489 

'개인 > ' 카테고리의 다른 글

이메일 레포트  (0) 2012.11.15
웹 접근성&웹 표준 완벽 가이드 부록 B  (0) 2012.02.21
시멘틱 마크업  (0) 2011.09.15
2011 디자인 레포트  (0) 2011.09.01
관계 디자인  (0) 2011.07.28
인레이  (0) 2010.10.26
by 수조 2011.09.15 19:34


7월에 작성! (생각보다 용량이 커서 분할압축을 걸었다 ㅠ_ㅠ)

'개인 > ' 카테고리의 다른 글

이메일 레포트  (0) 2012.11.15
웹 접근성&웹 표준 완벽 가이드 부록 B  (0) 2012.02.21
시멘틱 마크업  (0) 2011.09.15
2011 디자인 레포트  (0) 2011.09.01
관계 디자인  (0) 2011.07.28
인레이  (0) 2010.10.26
by 수조 2011.09.01 18:16

1. Mobile UX의 이해
   UI - U&I 너(고객)와 나(UI)의 관계를 만드는 것
   고객(너)과의 관계가 우호적이기 위해서는 UI(나)는 이렇게 불편한 상태로 방치되어선 안된다.

2. Mobile UX 철학
   관계(UI)에는 이런저런 설명이 있을 필요가 없다. 까다롭지 않게, 편안하고 일관적인 관계 유도하기

3. Mobile UX 디자인
   나(UI)의 안에 있는 관계의 표현방법(관계에 대한 올바른 마음가짐을 갖는 것이 중요하다)
  
4. Mobile UX 문화
   요즘의 관계는 간결하고, 쉽지만 그 속에 아날로그의 감수성도 간직하고 있다.

'개인 > ' 카테고리의 다른 글

이메일 레포트  (0) 2012.11.15
웹 접근성&웹 표준 완벽 가이드 부록 B  (0) 2012.02.21
시멘틱 마크업  (0) 2011.09.15
2011 디자인 레포트  (0) 2011.09.01
관계 디자인  (0) 2011.07.28
인레이  (0) 2010.10.26
by 수조 2011.07.28 14:27

http://kr.my.yahoo.com/


대화상자 인레이

페이지 일부분을 확장하고, 그 안에 대화상자를 보여주는 것.



ex)BBC(라지만 리뉴얼된듯 함..)

고려사항
- 오버레이로 대체도 가능하지만, 페이지 안에 삽입되는 인레이를 사용함으로서 페이지를 가리는 문제를 피할 수 있다.
  (그렇지만 이번 미투데이 개편에선 오버레이로 바뀜 왜일까?)

컨텍스트 내 인레이
- 페이지 안에서 바로 효과를 확인하면서 설정을 바꿀 수 있다.
   http://kr.my.yahoo.com/(페이지색상 변경도구)

목록 인레이
-인레이를 사용하기에 매우 적합한 곳이다. 필요할때까지 상세 정보를 숨겨 공간을 확보하고, 
  페이지에는 객괄적인 상위 정보를 더 나타내는 효과적인 방법이다.
ex)구글리더, 예시 참조

고려사항
-현재 콘텐츠에 집중할 수 있다.

아코디언:한 번에 하나씩 열기
-목록에서 한번에 한 항목씩 볼 수 있는 원리다.


아코디언:한 번에 여러 구획 보기
-병렬 콘텐츠
1. 상세 정보를 단계적으로 가려 불필요한 정보는 감춘다.
2. 전체보기 링크로 사용자가 숨은 콘텐츠를 볼 수 있도록 유도한다.
3. 자주 펼칠 필요가 없는 구획에 대해 요약 정보를 제공한다.
http://www.google.co.kr/ i google 좌메뉴

상세 정보 인레이
페이지에 있는 항목에 대해 추가 상세 정보를 제공하는 방식
http://www.google.co.kr/ i google 이미지 슬라이드 쇼

고려사항
- 부동산 사이트에서 주택에대한 섬네일을 제공함으로써 집에 대한 호기심을 자극한다

인레이와 오버레이 결합하기


콘텐츠를 페이지 내에 제공하여 사용자가 다른 곳으로 옮겨다니지 않고 한 페이지에 머물 수 있게 한다.

전통적인 방식의 탭


콘텐츠 탭
http://kr.my.yahoo.com/ (투데이 뉴스)

개인용 보조도구 탭
http://kr.my.yahoo.com/(관심서비스 바로가기)

인레이VS오버레이?
P.156

'개인 > ' 카테고리의 다른 글

이메일 레포트  (0) 2012.11.15
웹 접근성&웹 표준 완벽 가이드 부록 B  (0) 2012.02.21
시멘틱 마크업  (0) 2011.09.15
2011 디자인 레포트  (0) 2011.09.01
관계 디자인  (0) 2011.07.28
인레이  (0) 2010.10.26
by 수조 2010.10.26 17:16