 |
다음은 LGE B2B 웹사이트에 적용되는 기술에 대해 개발자가 기본적으로 지켜야 할 원칙들에
대한 설명을 제공합니다.
- HTML - 복잡하고 다양한 HTML 코딩방식에서 지속적인 유지 보수와 update를 쉽게 할
수 있도록 표준 지침을 두었습니다.
- 주석달기 - 프로그래밍 시 주석달기의 필요성 및 유의사항에 대한 안내입니다.
- 메타태그의 삽입 - 메타태그의 정의 및 활용방법에 대한 설명입니다.
- 플래시 무비의 사이즈 - 플래시 무비의 용량 기준 및 크기를 줄일 수 있는 방법을 소개합니다.
1. HTML 코딩 규칙
HTML TAG
- HTML 은 보통의 텍스트 문장에 그 문장의 특성(크기, 색깔)과 하이퍼 링크(연결)등에 대한 특징을 가집니다. 즉,"택"은
명령어의 일종입니다.
- 택은 "<"와">"사이에 존재하며, 택은 꼭 "/"를 첨가한
동일 택으로 닫아 주어야 합니다.
- 택은 대소문자를 구별하지 않습니다.
HTML 문서의 구조
<HTML> :HTML 문서의 시작
<HEAD> :HTML 문서의 헤더
<TITLE> HTML 문서의 제목</TITLE> :HTML 문서의 제목
</HEAD> <BODY> :HTML 문서의 몸체
본문내용
</BODY>
</HTML> :HTML 문서의 종료
|
2. 타이틀의 삽입
프로그램 코딩 규칙으로, 프로그램 개발된 모듈상단에 항상 기입합니다.
3. 메시지부여 규칙
개요
사용자가 친근감을 갖고 쉽게 사용할 수 있는 시스템이 설계될 수 있도록 하기위해, 사용자와 시스템간의 인터페이스가 일어나는 시점에
사용자에게 요청기능에 대한 처리결과를 알려주고,오류 발생시 이에 대한 문제 원인을 제공해 줄 수 있는 메시지 부여 규칙을 정의하여
사용자로 하여금 보다 효율적으로 시스템을 사용할 수 있도록 합니다.
메시지(Message) 부여규칙
| |
기본원칙
시스템 사용자에게 요청기능에 대한 처리결과를 알려주고 오류 발생시에 이에 대한 문제 원인을 제시해주는 기능은 매우 중요합니다.
사용자에게 제시되는 모든 메시지는 최대한 친절하고 정확하며 일관성이 있도록 부여해야 합니다.
기본적으로 Event를 일으키는 Button명 + "~되었습니다."로 규정짓습니다.
사용경우
- 알림기능 : 사용자가 처리하고자 의도한 기능이 올바로 처리되었음을 알려주거나 의도한 대로 처리되지 않았을
경우의 상태를 전달하기 위해 메시지를 사용합니다.
예) 메시지 "입력된 데이타가 없습니다."
- 에러전달기능 : 기능수행시 에러가 발생한 경우 이를 나타내기 위해 메시지를 사용합니다. 예) 메시지 "잘못된
명령어가 입력되었습니다."
메시지 형태
- 통보형 메시지 : 사용자에게 요청기능의 처리결과를 통보해주는 형식의 메시지
- 청유형 메시지 : 사용자에게 올바른 사용을 부탁하는 형식의 메시지로서, 예를 들어 데이타 입력시 데이타의
입력허용 범위를 지켜줄 것을 권고하는 형식의 메세지
- 비교형 메시지 : 사용자에게 시스템 사용시 문제원인을 알기 쉽게 비교형식으로 나타내는 메시지
- 확인형 메세지 : 자료삭제나 저장처럼 자료의 변환에 앞서 사용자의 의도를 재확인하는 메시지
메시지 사용규칙
- 통보형 메시지: "∼없습니다.", "∼입니다.", "∼틀렸습니다.",
"∼되었습니다." 등 친절하고 친근한 어미를 사용합니다. 예) 메시지 "해당하는 사원이
없습니다."
- 청유형 메시지 : "∼하십시요.", "∼사용하십시요." 등 친절하게 부탁하는
어조를 사용.
예) 메시지 "명령 취소시에는 ESC KEY를 사용하십시요."
메시지 "코드 조회시에는 F1 KEY를 사용하십시요" 안내기능
- 비교형 메시지 : "∼은 ∼보다 ∼합니다." 형식을 사용합니다.
예) 메시지 "종료일은 시작일보다 커야 합니다."
- 확인형 메세지 : "~하시겠습니까?" 형식을 사용하며, 사용자의 확인을 요구합니다.
메시지 사용방법
- Text : 화면의 특정 위치에 메세지 라인을 사용하여 텍스트 형태로 보여줍니다.
- Message Box : 사용자에게 강한 인상을 주기위해 Message Box를 사용해서 화면중앙에 보여줍니다.
이때 Messgae Box의 Title은 "알림"으로 합니다.
|
메시지 표준 형태 예시
| 메시지내용 |
메시지 사용시기 |
사용법 |
처음자료 입니다.
마지막 자료입니다.
정상적으로 저장 되었습니다.
정상적으로 저장되지 않았습니다.
삭제 하시겠습니까?(Yes,No)
작업 내용을 저장하시겠습니까?(Yes,No)
변경된 내용을 저장 하시겠습니까?(Yes,No)
이미 입력된 자료입니다.
삭제 가 완료 되었습니다.
조회
조회할 내용 이(가) 없습니다.
처리할 자료
해당코드
작업이 종료 되었습니다.
.............진행중입니다.
신규 패스워드를 입력한 후 확인버튼을 누르십시오.
패스워드가 변경되었습니다.계속 작업하십시오.
시스템에 접속할 수 없습니다.
정의되지 않은 사용자입니다.
입력하신 패스워드가 패스워드 규칙에 맞지 않습니다
○○을 확인하십시오.
○○을 입력하십시요.
프린터의 연결상태를 확인하십시오. |
복수 열 처리시
복수 열 처리시
입력,수정 후 저장시
입력,수정작업 실패시
삭제 기능 수행시
저장 기능 수행시
작업내용 비저장 상태에서
종료시
이미 입력된 자료시
정상 삭제,조회시
조회할 자료 부재시
처리할 자료 부재시
해당코드 부재시
작업 종료시
작업 진행시
패스워드 변경 입력시
패스워드 정상 변경시
접속 실패시
사용자번호 입력 오류시
패스워드변경,입력 오류시
데이터 입력내용 오류시
해당항목 입력 가이드시
보고서 발행 실패시 |
T
T
M
M
M
M
M
M
M
M
M
M
T
T
T
M
M
M
M
T
T
M |
※ 사용방법 : T - Text 형태로 메세지라인에 표시
....................M - Message Box를 사용하여 표시
.....................J - JAVA Applet 표시
가이드라인
- 가급적 친절한 메시지가 되도록 합니다.
- 사용자가 이해하기 쉽도록 사용자 위주의 문구를 사용합니다.
- 메시지에 사용되는 문법, 용어, 약어 등을 일관성 있게 사용합니다.
- 메시지의 형태와 배열위치의 일관성을 유지하도록 합니다.
- 메시지 내용은 간결하면서도 정확하도록 합니다.
- 메시지에 대해 사용자의 확인을 받도록 하며 반복적으로 검토·수정하도록 합니다.
- 에러메시지의 경우 문제의 원인이 제시되도록 합니다.
HTML 상에서 주석달기
컴퓨터 프로그램에서 주석들이란 웹 브라우저를 통하여 직접 볼 수도 없고 다른 형태에도 영향을 끼치지 않는 글자들을 말합니다. 하지만
이용자가 원본(source) 파일을 보는 경우에는 주석을 읽을 수 있습니다.
파일을 갱신한 사람의 이름이나 해당 파일을 만들기 위하여 사용한 소프트웨어와 그 버전, 또는 수정을 한 날짜 들과 같은 종류의 주석들은
나름대로의 형식이 있습니다.
주석을 삽입하려면, 다음과 같이 입력하면 됩니다 :
<!-- your comments here -->
반드시 위의 예제처럼, 느낌표와 하이픈(-)의 사용 방법을 지켜야 합니다.
주석문은 그 안에서 중복될 수 없으며, 가능한 한 줄에 사용하고 특수 문자를 포함하지 않도록 해야 합니다.
프로그램 상에서 주석달기 For more Information Contact Us webmaster@designins.co.kr
Project Name : LG전자/korea ->프로젝트명을 기술합니다.
Module Name : lgekr_news_list.jsp ->기능을 단장한 프로그램명을
기술합니다.
Create Date : 2001/04/23 ->처음 작성한 일지를 기입합니다.
Last Update Date : 2001/ by _________________ ->수정일자
및 수정자 이름을 기입합니다.
Author : 신성철 ->작성자 이름을 기입합니다.
Table Name : lgv_membership,lgv_lgnews ->프로그램에서
참조하는 데이터 베이스 Table명을 기입합니다. 참조 Table이 없을 경우 N/A
Description : 뉴스 리스트를 읽어옴 ->전반적인 프로그램 기능을 간략히 기술합니다.
주석은
반드시 상세하게 기술하며, 수정라인에 수정일자 및 수정자 표시합니다.
meta의 정의
메타태그는 홈페이지에 적어넣어 두면 검색로봇에 의해 체크, 검색 됩니다. 그런데 요즘은 검색엔진이 웹페이지 검색방식 보다는 대부분
디렉토리 검색엔진 방식으로 운영되고 있습니다. 디렉토리 검색 방식은 메타태그를 이용한 게 아니고 홈페이지 운영자가 직접 검색엔진에
홈페이지를 해당 디렉토리에 등록신청을 하는 것입니다.
키워드의 삽입
검색 엔진에서 사이트를 검색하거나 새로운 사이트를 찾고자 할 때 참조하는 것이 문서에 삽입된 키워드입니다.
검색엔진에서 상위랭킹을 차지하기 위해서는 메타태그를 이용해서 이 키워드를 입력할 때 사이트의 성격에 맞고 방문객들이 검색엔진에서
검색어로 입력할 만한 단어를 입력하는 것이 중요합니다. 여러개의 키워드를 입력할 수도 있습니다.
※ 개발시 간과할 수 있는 부분이므로 주의하시기 바랍니다.
<title> 인터넷마케팅 및 웹사이트구축 전문회사 - 디자인인스</title>
<meta name="author" content="디자인인스">
<meta name="description" content="인터넷마케팅 및 웹사이트구축 전문회사인
디자인인스의 비지니스에 관한 설명과 정보들. ">
<meta http-equiv="keywords" content="인터넷마케팅, 인터넷비지니스,
인터넷비즈니스, 디자인인스, internet marketing, Internet Marketing, internet business,
Internet Business, web promotion, WebPromotion, email marketing, Email
Marketing "
인터넷 사용자에게 가장 큰 불만은 속도에 대한 것 입니다.
플래시 무비의 용량이 너무 커서 기다림에 지쳐 나가는 트래픽이 많다면 문제가 될 것 입니다.
일단은 한페이지의 용량의 최고 마지노선을 100k 정도로 잡으시고 그걸 염두에 두면서 제작하셔야 합니다. 물론 용량은 적으면 적을수록
좋습니다.
다음은 플래시 무비제작에 있어서 무비 용량을 줄이는 방법입니다.
※가급적 홈페이지의 메인 페이지에는 사용을 지양합니다.
...단, 정책적인 필요성이 있는 경우는 사용이 가능합니다.
1. 그라디언트 효과의 과다한 사용을 금합니다.
2. 비트맵 이미지 (gif. jpg)의 사용을 자제하고,
사용하더라도 가져 오기전에 이미지의 크기를 줄여서 가져오고
가져와서도 프로펄퍼티 창에서 크기를 이미지가 깨지지 않는 한도내에서 줄여 주어야 합니다
3.사운드 삽입은 사운드의 길이가 길면 그만큼 용량이 커지기 마련입니다.
이런 경우 짧은 사운드를 반복 재생하게 하는 방법으로 용량을 줄일 수 있습니다. wav파일은 mp3로 변화시키면 용량이 줄어듭니다.
4. 트위닝이 불필요한 객체는 심벌 등록을 하지말고 .두 개 이상 사용할 경우에는 심볼화 시키는게 낫습니다.
5. 필요없는 프레임이나 키프레임. 레이어는 반드시 삭제합니다.
|
