UI개발 체크리스트
기본 사항
1. 이미지 저장
공통사항
- 기본 .png(PNG-8)로 저장하되 반투명값이 포함될 경우 .png(PNG-24)로 저장합니다.
- jpg - 이미지 중요도에따라 opacity 40 ~ 60 차등적용하여 저장.
- 메타정보는 포함하지 않습니다.
- 그 외 .png(PNG-24)의 경우 무손실 압축이므로 원본이미지를 그대로 유지하므로 중요한 잡티현상 없이 저장해야할 경우 jpg와 선택적 사용.
- Image Sprites 사용 시 각 이미지의 간격은 최소 10px로 적용합니다.
스케치 앱
- Export시 "Export Desktop"를 통해 "Save for Web"체크 후 저장합니다.
2. html 페이지 명
각각의 html산출물에는 각각의 화면명을 적용합니다.(화면명은 화면명세서 참조)
3. Validation체크
필수적으로 체크하여 전달하여, 최고의 산출물을 유지 합니다.
4. Browser 체크
Browser 체크는 설치되어 있는 각각의 최신 브라우저를 체크하시고 IE하위 버전의 경우 가상머신 및 그 외의 방법으로 체크합니다.
5. CSS 기법 및 문법
- z-index는 9999를 넘지 않으며, 증가간격은 10단뒤로 합니다. 다만, 주변 obj보다 위로 표현이 되어야 할 경우에는 2부터 시작합니다.
- 마지막 property의 세미콜론(;)은 삭제합니다.
예 : .classname {border:1px solid #ddd; font-size:20px}
6. CSS Property순서
기본 아래의 순서로 적용하되 css3 속성은 비슷한 속성 뒤에 작성(예 : border:1px solid #eee; border-radius:5px)하며, transition등은 etc와 동일한 위치에 적용합니다.
- display
- position
- float
- clear
- width
- height
- margin
- padding
- border
- background
- color
- font
- text-align
- vertical-align
- etc
7. 가이드(WSG) 추가 및 수정
어떠한 경우라도 가이드가 추가 및 수정이 이루어질 경우 해당 단위에 대해서 세부적인 내용을 메일로 공유한다.
8. 테스트
테스트가 필요한 경우 서버에 적용을 해도 무관하나, 가능하면 로컬에서만 진행합니다.
서버에 적용 시에는 /testcase/에서 진행하며, 파일명은 test_yymmdd_xx.html로 적용합니다.(css, js파일도 동일)