내용 관련 지침^#

 

zb4는 배제^#

What's New를 제외한 나머지 페이지에서는 타겟을 분명히 해야합니다.

 

zb4와 zbXE의 차이점에 관해서는 What's New 에서 일괄적으로 다루고 zbXE 매뉴얼은 오로지 zbXE에 집중해서 작성하도록 합니다. 기존 zb4 사용자들을 위한 비교, 설명이 뒤섞이면 zbXE 메뉴얼이 아니게 됩니다.

 

* 현재 작성된 What's New Page 링크 : http://zbxe.springnote.com/pages/865098

* What's New 메뉴의 제목은 변경 될 수 있습니다.
   관련논의 : http://www.zeroboard.com/proj_doc/16543454#comment_16548298

 

 

용어 표기 통일^#

용어구분	공식명칭	약칭표기 (대소문자 구분)
zbXE전용	제로보드XE ( zeroboardXE)	zbXE
zbXE전용	제로보드4 ( zeroboard4 )	zb4
zbXE전용	zbXE 템플릿 스크립트 ( Template Script )	TS
일반전문	자바스크립트( Java Script )	JS

위와 같은 용어를 통일 시키도록 합니다.

 

zbXE 내에서 만들어진 자체적인 용어 외에 보편적인 대명사 및 전문용어의 약칭은 가장 전문적이고, 정확한 근거를 가지는 명칭을 선택하여 혼동이 없도록 합니다.

 

 

문체^#

매뉴얼의 문체는 '격식을 갖춘 구어체'로 작성 하도록 합니다.

 

문체 비교 :

• 비격식 해요체를 사용한 구어체 : "제로보드XE는 설치형 웹 프로그램이예요." (일상적인 말투(?)입니다.)
• 격식을 갖춘 구어체 : "제로보드XE는 설치형 웹 프로그램입니다." (높임법을 제외한 구어체입니다.)
• 문어체 : "제로보드XE는 설치형 웹 프로그램이다."

 

요즈음은 기타 다른 SW의 매뉴얼도 '문어체'보다는 '구어체'로 작성되는 경우가 많습니다.

논술에 적합한 문체도 '구어체'로 알고있습니다. (맞죠?^^;;)

'구어체'의 장점은 읽는 사람의 평균적인 이해도가 딱딱한 '문어체'보다 높고, 격식은 차릴수 있으면서도 대화형이라 부드러워 거부감이 적습니다. 단점은 문장이 살짝 길어진다는 정도가 되겠습니다.

 

구어체로 작성된 매뉴얼의 예 :

• zero님이 작성한 " 홈페이지형 레이아웃 제작 "
• CGlink님이 작성한 " XHTML & CSS 개요 "
• Textcube의 공식매뉴얼

 

 

 

편집 관련 지침^#

 

본문^#

본문 내용 작성시 글자 크기를 조절하는 기능은 사용하지 않습니다.

부분강조를 위해서는 글자색, 글자배경색, 굵은글씨, 기울이기, 밑줄 등의 꾸밈기능을 이용하고 최대한 가독성을 고려해서 사용합니다.

 

 

소단원 제목의 형식^#

1. 페이지(단원) 내의 소단원제목은 기본적으로 "단락제목1"부터 시작해서 +2 씩 올라가도록 합니다. 즉, 1, 3, 5 만 사용하도록 합니다. 이렇게 하는 이유는 아래 그림에서 보시는 바와 같이 1단계의 차이가 그리 크지 않아서 본문내용이 조금만 길어져도 그 차이를 느낄 수 없어져 버리기 때문입니다.
   스프링노트의 '단락제목1~6'은 HTML 태그의 'H1~6' 태그에 대응합니다.
    
2. 페이지(단원) 내 소단원들이 계층구조를 가지지 않고 내용이 짧을 경우는 "단락제목3"만 사용하여도 무방합니다.

 

지금 보시는 이 "zbXE 문서화그룹 매뉴얼 스타일 가이드"단원의 경우 내용상 크게 2개의 분류로 나뉘어지는 계층구조를 가지고있습니다.

 

소단원 형식 예제 :

1. 단락제목 1,3,5 를  모두 사용한 페이지
   http://zbxe.springnote.com/pages/684681
2. 단락제목3 만 사용한 짧은 페이지
   http://zbxe.springnote.com/pages/392064

 

 

소단원 간의 간격^#

소단원들 간에 규칙적인 간격을 유지하여 줍니다.

지금 보시고 계신 "스타일 가이드"가 위 그림과 같은 방법으로 간격을 유지하고 있습니다. 

 

 

목차만들기^#

페이지의 내용이 길어 스크롤이 생기면서 내부분류가 있을 때는 페이지 최 상단에 반드시 목차를 생성해줍니다.

 

"목차 만들기"는 스프링노트의 부가기능입니다.
문서내의 단락제목을 바탕으로 현재 보고있는 페이지의 최 상단에 보이는 것과 같은 목차를 자동으로 생성해서 문서의 구조를 한눈에 볼 수 있으면서 해당 소단원으로 바로 갈 수 있는 anchor를 생성해줍니다.

 

스프링노트 매뉴얼 참조 : http://help.springnote.com/pages/522357

 

 

그림의 기본 스타일^#

문서 내부에 첨부되는 작은 그림은 가로 600 px 정도를 기준으로하고 최대 726 px 이내로 배치합니다.

위 그림은 가로 600px, 테두리는 검은색으로 1px, 가운데 정렬 하였습니다.
굳이 좌우를 꽉 체우는 것보다 여백이 좀 남아있어야 답답하지 않습니다.

 

캡춰된 이미지는 가로x세로 비율이 유지되는 것이 보기에 좋습니다.

 

그림은 가능하면 Resize 되지 않는 것이 좋습니다.
특히 그림 안의 TEXT를 읽어야하는 그림, 예를들어 화면을 캡춰했을 때 그 중 특정한 부분을 보여줘야할 때는 가독성을 고려해 편집해야합니다.

 

* 자세한 내용은 본 문서 가장 아래에 있는 [별첨01-큰 그림 배치 실험] 참조

 

 

화면 캡춰시 스타일 가이드^#

기본적으로 화면 캡춰시 브라우저를 제외한 내용만 캡춰하여 사용합니다.

화면 캡춰시 브라우저가 함께 들어가야 하는 경우 아래와 같은 스타일을 기준으로 합니다.

1. 브라우저 선택 : Windows OS에서 사용하는 Firefox를 기준으로 합니다.
2. 윈도우 테마 : 특별한 테마 없이 'Window 고전'을 이용합니다.
3. 화면 배색 : 화면 배색 역시 'Window 표준'을 기준으로 합니다.
4. 주소입력창을 포함하는 표준 도구모음을 제외한 다른 모든 툴바를 제외한 상태로 캡춰합니다.
5. 개인정보가 표시되지 않도록 유의합니다.
6. 불필요하게 바탕화면이 드러나지 않도록 합니다.

 

* 추신 : 지금은 완성되지 않은 다른 단원들을 체워가는 것이 우선이니 이미 작성된 페이지의 그림을 위 기준에 맞추어 다시 작성하는 작업은 하실 필요 없습니다. 기존 페이지의 편집 스타일을 통일 시키는 작업은 매뉴얼이 '내용상 완성'에 준하는 단계에 접어 들었을 때 하도록 하겠습니다.

 

 

단락 : 인용 단락 사용^#

스프링노트의 기능 및 문서구조를 가능한 지켜서 사용합니다.

스프링노트만의 독특한 구조는 아닙니다.

XHTML 표준에 맞춘 보편적인 문서의 구조를 따라서 작성하는 것이라 보면 됩니다.

(이 소단원은 작성중..)

 

 

단락 : 소스코드 단락 사용^#

소스코드는 반드시 스프링노트의 "소스코드 인용단락"을 이용합니다.

소스코드 안에서 중요한 부분은 눈에 잘 들어오도록 컬러링을 해줍니다.

 

[소스코드 작성의 예-01]

1. <style type="text/css">
   <!--
   #header {     background: #CCCCEE; }
   #columnLeft { background: #CCEECC; }
   #content {    background: #EECCCC; }
   #footer {     background: #CCCCEE; }
   -->
   </style> 

 

너무 긴 소스크드의 경우 설명과 직접적인 관련이 없는 부분은 "~생략~" 을 활용할 수 있습니다.

 

[소스코드 작성의 예-02]

1. <div id="bodyWrap">
       <div id="header">
           ~상단 내용~
       </div>
       <div id="contentBody">
           <div id="columnLeft">
               ~좌측 내용~
           </div>
           <div id="columnRight">
               ~콘텐츠 영역~
           </div>
       </div>
       <div id="footer">
           ~하단 내용~
       </div>
   </div>

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

별첨^#

 

별첨01 - 큰 그림 배치 실험^#

이 실험은 그림을 배치하는 방식에 따라서 '스프링노트'와 'zbXE의 스프링노트연동 모듈'을 통해서 볼때 어떤 차이가 생기는지 확인하기 위한 것입니다. 특히 Screen Shot 같이 넓은 화면의 보여줘야 할 때 발생하는 문제에 관하여 테스트 해봅니다.

스프링노트는 그림의 크기가 브라우저 크기에 따라서 조정되었을 경우 일그러져 보이게 되고 원본크기로 보도록 해주는 기능이 없다는 것을 고려해서 최선책이 무엇인지 찾아내고자 합니다.

* 글로 적은 내용은 FF에서 실험하고 보이는 데로 적었습니다.

* 스프링노트의 기능 개선 및 zbXE 스프링노트연동 모듈의 버젼업에 따라 결과가 달라질 수 있습니다.

 

[경우-1] 크기조정 안했을 때.^#

 

위 그림은 '본문에 넣기'한 후 별도의 크기조정을 안한 경우임.

 

 

[경우-2] 크기조정 했을 때. (그림원본 크기에 준하는 크기)^#

위 그림은 '본문에 넣기' 한 후 크기를 임의조정한 상태임.

*스프링노트에서 그림의 크기를 조정할 때 가로세로 크기를 수치로 보여주지 않아서 좀 불편함.

 

[경우-3] 크기조정 했을 때. (임의의 작은 크기)^#

그림을 편집디자인을 위해 임의의 작은 크기로 조정한 상태임.

 

 

[결론] 크기 조정하지 않은 상태로 한다.^#

[경우-2]의 방법은 공식사이트에서 볼 때 보기에 좋지 않고, [경우-3]의 방법은 스프링노트에서 보는 분들을 고려한다면 사용해서는 안된다.
결국, 크기가 큰 그림은 [경우-1]과 같이 크기를 조절하지 않고 그냥 두는 것이 가장 좋다는 결론이다.