디자이너에게 바란다.

diary 2010. 4. 7. 16:41
  • 디자인 포토샵파일, 메뉴구성 엑셀파일이 확정된 최종본인지 확인하고 넘겨주세요.
  • 온오프, 로그인 후 등 상황에 따라 달라지는 이미지는 +on +off 별로 레이어셑 을 만들어 주십시오. (레이어셑 명명 방법은 "+이름" 을 추천)
  • 상단메뉴, 좌메뉴의 하위메뉴도 상황별로 디자인 추가 변경 있다면 별도 레이어셑으로 만들어주세요.
  • 레이어셑 만들 때 컨텐츠 구역별로 잘 묶어서 주시고, 가급적 레이어 이름을 남겨주세요..
  • 필히, 전체 배경 디자인은 별도 레이어셑(+bg)으로 구분
    • 예를 들어, head 부분의 텍스트와 본문의 텍스트를 하나의 레이어셑에 묶어 두는 경우 곤란합니다.
      (테이블 레이아웃은 디자인 위주로 자르지만, CSS 레이아웃은 컨텐츠별로 자르므로 레이어셑 숨김, 보임을 자주합니다.)
    • 블릿은 bu 혹은 ㅇ, 라인은 line 혹은 ---- 등등 간단하게라도 붙이는 습관을 가져주세요.
      (시간 많이 안걸립니다. - 다시 수정할 때, UI코딩시, 유지보수시 편리)
  • 연관된 레이어는 바로 인접한곳에 위치하도록 해주세요.
    • 나쁜예 : 텍스트를 꾸미는 불릿 레이어가 인접해있지 않고 사이에 다른 레이어들이 어지럽게 섞여있는 경우.
  • 이미지 메뉴는 크기 또는 간격이 일정하게 제작해주세요.
  • 온오프시 이미지 크기가 동일하도록 만들어주세요. (가로형은 너비, 세로형은 높이가 필히 같아야 함)
  • 그리드 계획에 맞도록 신경써주십시오. (가이드라인 사용시 1px씩 어긋나지 않게 정확하게 표시해주세요.)
    • ※주의: 포토샵 작업시 확대 배율이 100% 의 배수가 아닐 경우 가이드가 1px 중간에 만들어지는 오류.
  • 여러 페이지에 걸쳐서 같은 형태의 디자인일 경우 psd 파일 1개로 처리해주세요. (예)
    • 서브 페이지 UI(head, sidebar, foot 영역), 메인 페이지 디자인은 각각 psd 파일 1개로 해결할 수 있도록 해주세요.
    • 주메뉴 영역 등 메인과 서브가 공통적으로 사용하는 디자인은 서브 페이지 디자인에 넣어주세요.
  • 플래시 링크와 비플래시 링크가 가급적 겹치지 않도록 작업해주세요. (나쁜예)
  • 서브 비쥬얼 위에 메뉴를 만들지 마세요. (나쁜예)
  • 디자인시 색상 대비에 좀 더 신경을 써주세요.
    • 웹 접근성 작업 참고 에서 "1-3-2. 전경색과 배경색은 충분한 대비를 가지고 있어야 한다." 부분 참고
  • PSD 파일이 너무 커서 컴퓨터가 버벅거립니다.(10M이하를 원하는데, 20M가 넘는 경우도 많군요.)
    • 페이지 레아아웃 백그라운드에 그라데이션, 그림자가 없으면 안될까요?
      코딩시 쓸데 없는 코드들을 많이 생성시키고, 페이지 전체 렌더링 속도가 엄청 무거워집니다.
  • 이미지를 투명 png-24 파일로 저장해야 하는 경우가 없도록 디자인해주십시오. (나쁜예)
    (IE6에서 비표준코드를 생성해야함).. 단, IE6 점유율이 바닥으로 떨어질 때 사용가능.
  • 좌메뉴 등 이미지가 아닌 텍스트 정보는 포토샵에서 자간을 100의 배수(css에서 letter-spacing 1px의 배수)로만 지정해주세요.
  • 포토샵에서 Character 패널의 kerning 을 0 또는 Metrics 로 설정하세요. (Optical 은 사용하지 마세요.)
  • 메뉴 영역, 제목 영역 등 모든 콘텐츠는 예상할 수 있는 모든 경우를(가장 짧은 것과 가장 긴 것을) 고려하여 디자인해주세요.
  • 여러 사이즈(원본, 섬네일 등)로 서비스 되는(DB에 저장되는) 이미지는 가로 세로 비율을 맞춰주세요.
    (모니터 화면, 디카의 일반적인 사이즈인 4:3 비율을 권장합니다.)
  • 여러 페이지(서브와 메인 등)에서 같은 콘텐츠가 다른 위치에서 보여질 때 특별한 경우 아니면 디자인을 맞춰주세요. 
  •  외국어 디자인시 텍스트 콘텐츠는 해당 언어 OS 범용 폰트로 만들어주세요.
    • 국문: 돋움, 굴림
    • 영문: Tahoma, Arial, Verdana, ..
    • 일문: MS UI Gothic, MS Gothic
    • 중문: Simsun, SimHei, MS Song

>> [출처] 디자이너에게 바란다|작성자 뭉가

'diary' 카테고리의 다른 글

이미지 낙관 만들어 주는 곳  (0) 2011.05.18
[퍼옴] 차세대 웹브라우저 전쟁  (0) 2011.04.18
css 코딩 정석??  (0) 2011.04.07
무료 다운로드 사이트  (0) 2011.03.25
에디터가 불안정 한거 같은데....  (0) 2010.04.07
:

에디터가 불안정 한거 같은데....

diary 2010. 4. 7. 16:34

티스토리 대체 줄간격 왜이러노.....html 들어가서 수정해도 요지부동이구만.....

줄간격 너무 답답해보여서 수정좀 할라하는데 되다 안되다 난리다. 찾아보니 html 수정하니 제대로 나온다고 하드만...난 왜 수정해도 이모양인지....

'diary' 카테고리의 다른 글

이미지 낙관 만들어 주는 곳  (0) 2011.05.18
[퍼옴] 차세대 웹브라우저 전쟁  (0) 2011.04.18
css 코딩 정석??  (0) 2011.04.07
무료 다운로드 사이트  (0) 2011.03.25
디자이너에게 바란다.  (0) 2010.04.07
:

실전 웹표준 가이드

standard guide 2010. 4. 6. 12:03
- 본문 中 -
HTML 의 목표자체가 인터넷 상에서 의미있는 정보를 교환하기 위함이라는 점을 감안한다면, 웹 상에 정보를 출판(publish)하기 위해 필요한 기술을 갖추고 이를 목적에 맞게 활용할 수 있는 전문가로서의 퍼블리셔(publisher)의 존재가 중요하다.
퍼블리셔란 기존의 단순 HTML 코드생산을 담당하던 코딩작업을 벗어나, 웹상에 컨텐트를 게제하는 방식을 책임지는 전문가를 말한다. 즉, 이전과는 달리, “디자인과 프로그램의 조합으로 웹상에 컨텐트를 보여준다”는 개념을 벗어난, 편집 겸 코디네이터로서의 역할이 추가된 개념이다.
 

퍼블리셔는, 기획자가 만들어낸 컨텐트를 기획의도에 따라 디자인을 적용시켜 프로그램의 도움을 받아 웹 상에 게제하며, 이를
위해 최종사용자가 대면하는 모든 부분을 책임져야 하므로, 웹 개발의 경우, 최소한 (x)HTML/CSS/JavaScript 부분을 전적으
로 담당해야한다. 필요하다면, 프로그래밍에 이용된 템플릿 사용도 가능해야할 것이다. 퍼블리셔를 추가함으로써, 기존 역할을
맡은 인력의 업무를 경감시켜주고, 작업 강도와 기간이 단축되는 효과를 기대할 수 있다.



저자

윤석찬 http://channy.creation.net/blog/
신현석 http://hyeonseok.com/blog
이성노 http://eouia0.cafe24.com/blog
신정식





39p  XTHML 문서 구조


43p  모든 문서 내 URL에서 &를 쓰면 안 된다.

44p 구조적 XHTML 사용 방법

54p CSS 가이드

65p CSS 선언 방법

67p CSS 적용의 체크 포인트 4가지

72p 기본 레이아웃(마크업)

83p 박스 모델(Box Model)

86p 화면 정 중앙에 위치 시키기

90p 테이블(Tables)

115p CSS 개발 및 검증 도구

149p 올바른 플러그인(Plugin) 사용

152p ActiveX와 대안 Plugin 기술

156p 브라우저 내장 기술(Ajax...)

162p 실전 표준 웹 프로그래밍

182p 기존 웹 개발 프로세스

187p 구조화의 어려움 / 역할을 중심으로 한 개발 공정

195p 새로운 개발 프로세스

209p 디자이너 공정 (UI 스타일 가이드)

210p 프로그래머 공정

214p 웹 표준 브라우저 호환표

220p 장애인 웹 접근성 체크 리스트

223p HTML 브라우저 호환표

228p 표준 HTML4.01/XHTML 브라우저 호환 차트

243p 표준 CSS 브라우저 호환 차트

303p 참고 사이트

 

'standard guide' 카테고리의 다른 글

접근성 참고  (0) 2012.07.02
웹 접근성을 고려한 콘텐츠 제작 기법  (0) 2012.03.13
웹표준을 시작하면서..  (0) 2010.04.01
: