2009년 6월 3일 수요일
CSS 글 자간 줄간 설정방법
글 꼴의 종류와 크기를 결정했다면, 볼드/이텔릭과 같은 글꼴의 장식 및 자간, 줄간 들여쓰기와 같은 문단 편집기능에 대하여 살펴봅니다. 몇몇 기능은 브라우저에 따라, 적용/미적용 여부가 다르며, 적용되더라도 화면의 보여지는 모습이 다릅니다. 충분한 테스트 후 활용하도록 합니다.
[ 글꼴의 굵기 지정 ]
font-weight: normal (default value);
글꼴 그룹의 어떤 굵기의 글꼴을 사용할 것인지를 설정합니다. 초기값은 normal(400)이며, 굵은 글꼴은 bold(700) 키워드를 사용합니다. 설정값은 하위 요소로 상속됩니다. 다음은 Verdana 글꼴의 굵기 속성입니다.
* normal, bold, 100~900
- font-weight: normal
- font-weight: bold
- font-weight: 100
- font-weight: 200
- font-weight: 300
- font-weight: 400
- font-weight: 500
- font-weight: 600
- font-weight: 700
- font-weight: 800
- font-weight: 900
위와 같이, 일반적인 글꼴 그룹은 9종류의 굵기가 다른 글꼴이 준비되어 있지 않는 경우가 많습니다.
따라서, 일반적으로 100~900까지의 9단계의 굵기 지정보다는, 굵은 글꼴 표현을 위한, bold를 주로 사용합니다. 기본값은 normal이기 때문에, 일반 글꼴에는 특별한 지정이 필요하지 않습니다.
* lighter, bolder
100~900의 굵기의 범위에서, 현재 굵기(디폴트값 또는 상위 요소에서 상속된 값)보다 각각 한 단계 가는 글꼴, 또는 굵은 글꼴을 지정합니다.
[ 글꼴 스타일의 지정 ]
font-style: normal (default value);
글꼴 그룹의 표준, 이탤릭, 기울임 글꼴을 지정하는 속성입니다. 설정 값은 하위요소로 상속됩니다.
* normal, italic, oblique
글꼴 그룹의 종류에 따라, 이텔릭체 전용, 기울임 전용 글꼴이 디자인되어 있습니다. 해당 글꼴을 사용하도록 지정이 가능합니다. 해당 글꼴이 없는 경우에는 표준 글꼴을 기울인 글꼴이 이용됩니다. 기본값은 normal이기 때문에, 일반 글꼴에는 특별한 지정이 필요하지 않습니다. 다음은 Verdana 글꼴의 스타일 속성입니다.
- font-style: normal
- font-style: italic
- font-style: oblique
[ 작은 대문자 지정 ]
font-variant: normal (default value);
영어 알파벳의 표기방식입니다. 알파벳을 대문자료 표기하되, 소문자 크기로 작게한 종류의 글꼴인 small-caps를 지정할 수 있습니다. 설정 값은 하위 요소로 상속되며, 기본값은 normal이기 때문에, 일반 글꼴에는 특별한 지정이 필요하지 않습니다.
* normal, small-caps
-
font-variant: normal
- font-variant: small-caps
[ 대소문자 지정 ]
text-transform: none (default value);
영 어 알파벳의 표기방식입니다. 문장에 있는 단어의 첫글자만을 대문자로 표시하거나, 전체를 대문자 또는 소문자로 표기하게 할 수 있습니다. ID와 같이 대/소문자의 구분입력 단위요소에 사용할 수 있습니다. 설정 값은 하위 요소로 상속되며, 기본값은 none이기 때문에, 일반 글꼴에는 특별한 지정이 필요하지 않습니다.
* none, capitalize, lowercase, uppercase
- text-transform: none; Capitalization effects
- text-transform: capitalize; Capitalization effects
- text-transform: lowercase; Capitalization effects
- text-transform: lowercase; Capitalization effects
[ 글꼴 장식 ]
text-decoration: none (default value);
글꼴 장식에 대한 속성입니다. 아래 예와 같이, 밑줄이나 윗줄, 취소선을 표시하거나 깜박이게 할 수도 있습니다.
이 속성은 상위 요소로부터 상속되지 않습니다. 다만, 블록 레벨 요소에 대하여 지정한 경우에는 해당 박스 안에 포함되는 인라인 요소에 모두 적용됩니다. 또한, 인라인 요소에 대하여 지정한 경우에는 해당 요소가 생성하는 모든 박스에 대하여 적용됩니다.
* none, underline, overline, line-through, blink
- text-decoration: none a tag in li tag
- text-decoration: underline
- text-decoration: line-through
- text-decoration: overline
- text-decoration: blink
위와 같이, blink옵션값은 IE에서는 적용되지 않습니다. (Firefox 2.0에는 적용됩니다)
또한, 첫번재 줄에 사용된 코드는 다음과 같습니다. 즉, 같은 레벨의 요소에는, text-decoration값이 상속되지 않습니다.
<li style="text-decoration: none;">text-decoration: none <a href="#">a tag in li tag</a></li>
[ 줄 간격 설정 ]
line-height: normal (default value);
정확히는, 인라인 요소의 높이를 설정하는 값입니다. 만약 블록 레벨 요소에 값을 지정한 경우에는, 해당 박스에 포함될 인라인 요소 박스의 최소 높이를 지정하는 것이 됩니다. 설정 값은 하위 요소로 상속됩니다.
* 인라인 요소에 대한 높이값 표현의 디폴트 값이 IE7과 Firefox2의 차이가 현격하기 때문에, 상위레벨(body, hemtl)에서 픽셀이나 포인트로 결정해 주는 것이 좋습니다.
- line-height: normal
line-height: normal - line-height: 150%
line-height: 150% - line-height: 15px
line-height: 15px - line-height: 1.5em
line-height: 1.5em
기본값은 normal이며, 브라우저가 적절한 줄간격을 설정합니다. "실수값+단위 형태"로 지정할 수 있습니다.
전각(em)의 경우는, 해당 글꼴의 줄 간격을 1로 간주하고 퍼센티지(%)는 100%로 간주하고 계산되어 집니다. 즉, 상위레벨의 값을 1(em), 100(%)으로 계산하여 표현합니다. 픽셀(px) 및 포인트(pt)등과 같은 값을 지정할 수도 있습니다. 단, 인라인 레벨의 박스 높이인 만큼 음수값을 지정할 수 없습니다.
[ 문자 간격 설정 ]
letter-spacing: normal (default value);
글자와 글자의 간격을 설정하는 속성입니다. 주의할 점은 설정하는 값이 자간이 나타내는 것이 아니라, 기본 자간에 설정값이 추가(+)되는 것 입니다. 따라서, line-height와는 달리, letter-spacing값에는 음수값을 지정할 수 있습니다. 설정 값은 하위 요소로 상속됩니다.
* 문단 정렬이 좌우 배분(text-align: justify)인 경우에는, 문단 정렬에 우선되어 간격값이 조정됩니다.
[ font-family: Verdana, Gulim, Dotum, sans-serif; font-size: 9pt; ]
자간은 글꼴의 종류와 크기에 따라, 웹브라우저의 상이점이 발생합니다. 위 그림의 위의 것은 IE7에서 표현되는 스크린이며, 아래는 Firefox2에서 표현되는 모습입니다. 디폴트 상태(normal)에서는 별다른 차이가 없지만, 전각(em) 포인트(pt)등의 단위에서는 약간의 차이가 눈에 띄입니다. 픽셀(px)단위가 비교적 차이가 없어 보입니다.
[ 단어 간격 설정 ]
word-spacing: normal (default value);
공백으로 구분되는 하나의 단어와 단어 사이의 간격을 설정하는 속성입니다. 자간과 마찬가지로 설정하는 값이 단어 간격을 나타내는 것이 아니라, 기본 간격에 설정값이 추가(+)되는 것 입니다. 따라서, line-height와는 달리, word-spacing값에는 음수값을 지정할 수 있습니다. 설정 값은 하위 요소로 상속됩니다.
* 문단 정렬이 좌우 배분(text-align: justify)인 경우에는, 문단 정렬에 우선되어 간격값이 조정됩니다.
[ font-family: Verdana, Gulim, Dotum, sans-serif; font-size: 9pt; ]
단어 간격 역시, 글꼴의 종류와 크기에 따라, 웹브라우저의 상이점이 발생합니다. 위 그림의 위의 것은 IE7에서 표현되는 스크린이며, 아래는 Firefox2에서 표현되는 모습입니다. 디폴트 상태(normal)에서는 별다른 차이가 없지만, 전각(em) 포인트(pt)등의 단위에서는 약간의 차이가 눈에 띄입니다. 픽셀(px)단위가 비교적 차이가 없어 보입니다.
[ 글꼴 크기의 보정 ]
font-size-adjust: none (default value);
현재, IE7은 지원하지 않고 있으며, Firefox 2.0에서는 적용이 되는 속성으로 용도는 아래와 같습니다.
어떠한 이유로(사용자에게 글꼴이 없거나, 요소 하위에 다른 글꼴이 사용되는 등), 요소에 지정된 글꼴이 표시되지 않는 경우, 글꼴 기본 크기의 차이에 따른 이질감을 조정하기 위한 속성입니다. 해당 글꼴(지정한 글꼴) 크기에 대한 소문자 x의 높이의 비율을 지정해 두면, 다른 글꼴이 사용되더라도 소문자 x의 높이가 일정하게 유지되도록 하여 일관성을 유지하게 됩니다. 설정값은 하위요소로 상속됩니다.
아래는, Firefox 2.0에 font-size-adjust를 적용한 예입니다.
<div style="font-family: Verdana; font-size: 14pt; font-size-adjust: 0.54;">Verdana 14pt <font style="font-family: 'Times New Roman';">Times New Roman 14pt</font></div>
그림의 위쪽은 font-size-adjust를 적용하지 않은 경우이며, 아래는 0.54값이 적용된 경우입니다.
주의할 점은, 해당 값에 따라 지정된 글꼴(위의 경우 Verdana)도 크기가 보정될 수 있다는 점입니다. 따라서, 충분한 테스트 및 검증을 해 준 후 사용하도록 합니다.
한가지 재미있는 점은, 영문 글꼴을 대표글꼴로 설정하여 사용하는 경우, 한글의 크기가 브라우저에 따라 같지 않은 문제를, 이 속성을 통해 어느정도 보완할 수가 있다는 점이 있습니다. (적어도, IE에서는 적용되지 않기 때문입니다)
위와 같이, 절절한 font-size-adjust값을 주어, 한글 글꼴을 조정해 줄 수 있습니다. 물론, IE에서는 적용되지 않기 때문에, IE에 맞춘 스타일시트에 Firefox의 한글크기 문제가 있는 경우 사용할 수 있습니다.
[ 장평 설정 ]
font-stretch: norman (default value);
현재, IE7, Firefox 2.0모두 지원하지 않습니다. 총 9단계의 속성값이 있습니다.
ultra-condensed, extra-condensed, condensed, semi-condensed, normal, semi-expanded, expanded, extra-expanded, ultra-expanded이 있으며, 왼쪽에서 오른족으로 갈 수록 폭이 넓어집니다.
2009년 6월 2일 화요일
드림위버를 이용한 웹 표준 코딩 가이드
드림위버를 이용한 웹 표준 코딩 가이드
- 웹 표준 준수 방법 (X)HTML&CSS 유효성 검사, 웹 접근성 향상, Cross
Browsing Check
- DTD 관리 DTD Setting & DTD Switching
기본 DTD 설정 및 DTD 전환하기 - 접근성 대화상자 Accessibility Dialog Box
접근성 속성 대화상자의 사용 - (X)HTML 유효성 검사 (X)HTML Validation Check
(X)HTML Markup 표준 문법 검사 - CSS 유효성 및 Cross Browsing 검사 CSS Validation &
Cross Browsing Check
CSS 유효성 및 브라우저 호환성 검사 - 웹 접근성 검사 Accessibility, WCAG 1.0 & Section
508
WCAG 1.0 및 Section 508 검사
- DTD 관리 DTD Setting & DTD Switching
- CSS 관리 기법 숙련도 및 선호에 따른 CSS 관리방법, 대표속성 사용, 미디어타입
설정
- CSS 대화상자 CSS Dialog Box
대화상자를 이용하여 CSS 코딩하기 - CSS 속성패널 CSS Properties Panel
속성패널을 이용하여 CSS 코딩하기 - CSS 코드뷰 CSS Code View
코드뷰를 이용하여 CSS 코딩하기 - CSS 대표속성 CSS Shorthand Properties
대표속성으로 코딩하기 - CSS 링크 & 가져오기, 미디어 타입 설정 CSS Link & Import,
Media Type
Link 와 Import 그리고 Media Type 설정하기
- CSS 대화상자 CSS Dialog Box
- 코딩의 기술 코딩 속도 개선 및 코드 품질 향상 기법
- 코드 자동 완성 Code Hints
코드 자동완성(Space, Ctrl+Space)기능 - 빠른 태그 편집 Quick Tag Editor
빠른 태그 편집(Ctrl+T) 기능 - 단축키의 확장 Keyboard Shortcuts
필수 단축키와 단축키의 최적화 - 삽입 메뉴 관리 Insert Panel Favorites
삽입 메뉴 최적화 - 코드 관리 Code Management
코드의 정렬(Source Formatting, Tag Library)
- 코드 자동 완성 Code Hints
전자정부 웹표준 강화 종합대책 발표
행정안전부 17일, 브라우저 상관없이 전자정부 이용 가능하도록 한 ' 전자정부 웹표준 강화 종합대책' 발표
- 추경사업으로 시작
- 2011년까지 150개 기존 전자정부 대민사이트 브라우저 호환성, 장애인 접근성 확보, 개선 실시
- 올해 추경 사업 : 115억 투입, 연말정산 간소화, 나라장터등 파급효과 큰 49개 사이트 개선
- 2010년까지 행정기관의 자율적 웹표준 준수 유도, 2011년부터 신규 대민사이트 구축시 웹표준 준수 의무화
웹 표준 교육등 기반조성 분야
- 2011년까지 5억원 규모로 웹 표준화 교육 실시
- 민간 전문 교육기관 선정
- 웹 표준 교육시 구직자 교육비 전액, 재직자 80% 정부 지원
- 추경사업으로 시작
- 2011년까지 150개 기존 전자정부 대민사이트 브라우저 호환성, 장애인 접근성 확보, 개선 실시
- 올해 추경 사업 : 115억 투입, 연말정산 간소화, 나라장터등 파급효과 큰 49개 사이트 개선
- 2010년까지 행정기관의 자율적 웹표준 준수 유도, 2011년부터 신규 대민사이트 구축시 웹표준 준수 의무화
웹 표준 교육등 기반조성 분야
- 2011년까지 5억원 규모로 웹 표준화 교육 실시
- 민간 전문 교육기관 선정
- 웹 표준 교육시 구직자 교육비 전액, 재직자 80% 정부 지원
스스로 멈추는차?
국내에 선보일 볼보 XC60는 도심 속 안전을 획기적으로 보강한 세계 최초의 저속추돌방지 시스템, 시티 세이프티가 기본사양으로 장착되었다.
시티 세이프티는 다년간의 교통사고 현장 조사결과 도심 속 전체 추돌사고의 75%가 시속 29km 이하의 속도에서 발생한다는 것에 착안하여 개발한 액티브 세이프티 장치다. 시속 30km 이하 주행 시, 앞 유리 상단에 장착된 레이저 시스템을 통해 앞 차와의 간격을 모니터링 한다. 만약 추돌위험 수준 정도의 거리까지 좁혀지는데도 운전자가 부주의로 인해 브레이크를 작동하지 않으면, 시티 세이프티 기능이 스스로 작동해 차량의 속도를 줄이거나 완전히 멈춘다.
2009년 5월 31일 일요일
세상을 살아가면서 잊어야 할 세가지
- 세상을 살아가면서 잊어야 할 세가지 -
첫번째
잊을것은
두번째
잊을것은
세번째
잊을것은- 옮겨온
글 -
디자인 기획안
스토리보드.. 말 그대로 스토리를 보여주면 됩니다
홈페이지와 같이 스토리보드를 만들어와라고 했을꺼라 생각이 됩니다
그 홈페이지의 흐름만 파워포인트로 보여주면 되는거죠
메인은 이렇고 이페이지는 이렇다하면서 한장한장 파워포인트로 꾸미세요
그리고 일러스트나 파워포인트를 사용해서 예제를 보신거 같은데
파워포인트 하나만으로도 충분히 조건에 만족을 시킬수 있습니다
선을 그어주고 네모를 그리고 글을 넣고 등등....
스토리 보드.. 단지 제작한 홈페이지를 남들이 봤을때
그 홈페이지가 어떻게 구성이 되어있고 어떻게 링크가 되는지
그걸 보여주기 위한거라 생각하시면 간단합니다
일러나 포토샵의 실력이 아무리 부족하더라도 남들이 보고 이해를 쉽게 할수있고
남들이 봤을때 홈페이지의 구성을 쉽게 이해할수 있고
동감이 가는 그런 내용 꾸밈이 더 중요합니다
기획안은 여러 의미로 쓰입니다만, 만약 경쟁PT 등을 해서 수주받아야 하는 입장이라면 제안서가 되겠구요, 이미 수주를 했거나 혹은 자사 홈페이지라면 말 그대로 홈페이지를 어떻게 만들겠다는 기획을 담은 문서를 뜻하죠. 두 경우 중 어느 경우라도 담는 내용은 비슷합니다.
1. 사이트의 구조
최상위 메뉴(1depth)는 뭘로, 그 아래는 뭘로, 몇 개의 메뉴로 나누고 각 메뉴는 '왜' 그렇게 나누며 그렇게 했을 때 얻어지는 효과가 뭔가.
2. 각 메뉴별 컨텐츠
그럼 나눠진 각 메뉴에 어떤 컨텐츠를 어떻게 담을 것인가. 컨텐츠 제작을 외부에 줘야 한다면 어떻게 줄 것인가.
3. 디자인 컨셉
메인페이지는 어떤 분위로, 어떤 내용을 담아서 디자인 할 것인가. 왜 그런 디자인으로 가야 하는가. 사이트의 메인 컬러는 뭐고, 서브 컬러는 뭔가. 서브페이지는 어떻게 구성할 것인가. 왜 그렇게 하나.
4. 화면구성안
첫 페이지엔 어떤 항목을 어디에 어떻게 배치할 것인가. 왜 그렇게 한 건가. 서브페이지에는 어떤 내용을 어느 위치에 배치할 것인가. 이유는.
뭐 이런 것들이 들어가고.
스토리보드는 말 그대로 웹페이지의 이야기 전개입니다.
위의 기획안이 완성되면, 각 페이지에 어떤 내용이 어떻게, 어느 링크를 눌렀을 때 어디로 이동할 것인지를 순서대로 주욱 보여주는거죠. 실제 디자이너와 프로그래머가 작업을 할 때 스토리페이지를 보고 합니다.
인터넷의 홈페이지 제작 관련 컨텐츠를 판매하는 곳에 가면 이런 기획안이나 제안서, 스토리보드의 예제 파일들이 있을 겁니다. 굳이 그 형식을 따라 할 필요는 전혀 없지만, 혹시 어떤 식으로 해야할지 전혀 감이 안잡힌다면 한 번 보는 것도 나쁘지 않겠지요.
스토리보드를 짱나게 잘 만드는 법
스토리보드는 이해를 위한 스켓치입니다. 그 이해의 핵심은 작업자와 고객일 것입니다.
1. 고객에게 프로젝트 결과물에 대해 사전 이해를 시키기 위한 도구
2. 디자이너, 코더, 플래셔, 프로그래머들에게 이해시키기 위한 도구
이런 목적을 갖고 스토리보드 작업을 해야하며 그 순서는 아래와 같습니다.
가. 사이트 목적에 대한 이해
나. 사이트 컨텐츠/서비스들의 목적에 대한 이해(최종목표, 연관성)
다. 사이트 I.A 고객확인, U.I기획
라. 컨텐츠 수급
마. 스토리보딩
기획자는 위와 같은 순서로 스토리보드를 그리게 됩니다.
각 단계별 숙지를 하신 후 작업을 진행하는데 '라'번의 경우 보통은 100% 완벽한
상태가 아닌 상태로 진행되죠. 물론 임시 데이터를 입력한 후에 진행하는 것이
기본이지만. 보통은 종합테스트전까지 완료해야 할 부분입니다.
위 '가'부터 '마'까지 각각을 읽어서 이해하기에는 쉬울겁니다.
하지만 다시 학습하고자 하는 분을 위해 각각의 실행 방법론을 적는다면..
아래를 참조하시기 바랍니다.
---------------------------------------------------------------------
가. 사이트 목적에 대한 이해
고객사와 요구분석 시기에 고객사 비즈니스에 대해 충분한 인지를 하시기 바랍니다.
물론 대다수의 기획자들이 놓치고 있는 부분이지만 학습을 꼭 해야합니다.
이것을 안하는 기획자와 이것을 하는 기획자는 차이가 큽니다.
물론 대다수의 웹기획자들은 이것을 안합니다. 참 안타까운 일이죠.
고객사의 비즈니스를 공부하셨다면 고객의 니즈를 더 쉽게 파악하실 겁니다.
파악된 니즈분석을 통해 고객사와의 요구분석시기에 대응하신다면, 상당한 만족도를
이끌 수 있습니다.
물론 몇 일간의 학습으로 고객사의 비즈니스를 알기란 매우 힘듭니다.
다만 고객은 그것을 잘 압니다. 이사람이 학습하고 온것인지 아닌지를.
마찬가지로 초기 대응 시 비용을 넘어서는 제안을 할 필요는 없습니다.
다만 고객에게 인식시켜 줌은 필요합니다.
아래와 같은 기획자는 3류이오니 피하시길 바랍니다.
- 열심히 고객이 지껄이는 말만 듣고오는 분들
- 엉뚱한 소리를 해서 고객에게 핀잔듣는 분들
- 고객이 하는 말을 이해 못하는 분들
- 쉽게 구축하려고 자신의 프로세스로만 리딩하려는 분들
나. 사이트 컨텐츠/서비스들의 목적에 대한 이해(최종목표, 연관성)
사실 이 부분이 제일 힘든 부분이기도 하며 중요한 부분이기도 합니다.
위 '가' 단계를 훌륭하게 진행했다면 각각의 컨텐츠들의 구성의도와 목표가
분명 할 겁니다. 또한 연계성 구조도 파악되셨을 겁니다.
이 단계부터는 개발자들과 미팅을 가지시길 바랍니다.
물론 '가' 단계부터 개발자와 같이 달릴 수도 있습니다. 사용 컨텐츠를 구성하고,
그룹핑하고 연동유무를 체크합니다.
기획자는 머리속으로 그것들의 최종 흐름을 깨고 있어야 합니다.
그리고 최종적으로 레이블링을 합니다.
다. 사이트 I.A 고객확인, U.I 기획
위에 레이블링된 I.A를 가지고 고객에게 컨펌을 받습니다.
물론 이때 필요한 산출물로는 '서비스기획서' '레이블링설명서' 등이 될 것입니다.
고객이 ok한다면 U.I기획단계로 넘어갑니다.
U.I기획에서는 크게 하진 마시고 '메인페이지 구성기획'과 '서브페이지 구성기획'을
하시면 됩니다. 보통 메인/서브페이지 스토리보딩 작업이라고들 하죠.
주의하실 부분은 서브페이지 기획은 가장 중요한 이슈가 될만한 페이지를 기획하시기 바랍니다.
보통은 서브메인, 일반페이지(3,4depth)를 기획합니다.
구성안을 고객에게 컨펌받은 후 디자이너에게 전달하여 시각화 합니다.
고객이 구성안에 컨펌했을 경우 '라','마'단계로 넘어갑니다.
보통 '라'와 '마'단계는 동일한 사람이 진행 할수도 있고,
각기 다른 분들이 맡아 진행하기도 합니다.
또는 '라'단계보다는 '마'단계를 먼저 진행하기도 합니다.
개인적으로는 별 큰 차이가 없다 판단됩니다.
라. 컨텐츠 수급
수급되는 컨텐츠로는 텍스트, 이미지, 기타로 분류됩니다.
텍스트 컨텐츠로는 각 페이지마다 삽입 되어야 하는 문구를 말하며,
이미지 컨텐츠로는 각 페이지마다 삽입 되어야 하는 이미지를 말합니다.
기타로 분류되는 것들은 제작되어야 하는 컨텐츠를 말합니다.
all플래시로 들어가는 것들이나 mini pop-up형태의 독립성을 갖는 페이지들을 말합니다.
이처럼 기타 컨텐츠들은 주 사이트 개발에 장애를 주지 않는 것들을 말합니다.
마. 스토리보딩
스토리보드는 위에 말한 것처럼 고객사에게 컨펌받기위한 목적과
개발을 위한 기준 문서 역할이 있습니다.
절대 화려하게 만드시지 마시길 바랍니다.
가장 쉽게 인터페이지스를 구성하시기 바랍니다.
방법은 다양하나 기본적으로는 좌측공간과 우측공간을 9:1 비율로 나누고
좌측공간은 화면설계공간으로 우측공간은 좌측광간에 대한 설명과
위치정보공간으로 활용하시면 됩니다.
메뉴별로 만드는 스토리보드의 첫페이지는 기본정보를 꼭 입력하시길 바랍니다.
공지사항을 만들 경우 기본정보에는 아래와 같은 문구가 들어갑니다.
조회권한 : 전체
작성권한 : 관리자. 백오피스에서 작성
게시판 줄수 : 디자이너가 결저하되 15줄
게시판 푸터 : 10 단위별로 구성하되 점진적 번호가 형성됨
첨부파일 : 없음
버튼규칙
- 목록페이지 : 버튼없음
- 조회페이지 : 목록(좌측하단)
버전업관리 또한 기본정보 페이지에 입력합니다.
예) 23페이지 조회버튼 위치 변경되었음 (임준희_0903)
마지막으로 스토리보딩은 가장 빠른 시간 안에 마무리되어야 합니다.
1일 50p 이상을 할 수 있는 기획자가 되시길 바랍니다.
물론 참신한 스토리보드가 나와야겠죠.
피드 구독하기:
글 (Atom)