<p>1. 이론</p><p><br></p><p>① UI(User interface) </p><p><br></p><p>- 사용자가 직관적으로, 무엇을 하면 어떻게 될지 예측할 수 있게 하고, 쉽게 조작할 수 있도록 도와주는 것</p><p><br></p><p>- 사용자가 원하는 곳으로 찾아가게 하기 위해 일련의 정보를 제공하는 개념</p><p><br></p><p>- 버튼, 리모콘, 메뉴</p><p><br></p><p>② UX(User Experience)</p><p><br></p><p>- 사용자가 어떤 시스템, 제품 혹은 서비스를 직간접적으로 이용하면서 느끼고 생각하게 되는 총체적 경험</p><p><br></p><p>- 기술을 단지 효용성 측면에서만 보는 것이 아니라, 사용자의 삶의 질을 향상시키는 방향으로 이해하려는 새로운 개념</p><p><br></p><p>- 사용자 needs의 충족, 브랜드 충성도 향상 등에 기여함</p><p><br></p><p>- 개선의 디자인</p><p><br></p><p>2. 홈페이지</p><p><br></p><p>① 구버전</p><p><br></p><p>- 플래시,swf(플래시 플러그인 설치) -> 메인 애니메이션이 되는 것</p><p><br></p><p>- 테이블 태그 <table>, tr, td</p><p><br></p><p>- 프레임 태그 <frameset>, <frame></p><p><br></p><p>- layout이 오래된 느낌</p><p><br></p><p>- 모바일 지원이 되지 않는 것</p><p><br></p><p>② 신버전 </p><p><br></p><p>- 시맨틱 태그(의미있는 태그, 지능형 태그)</p><p><br></p><p>- Header(상단), footer(하단) 등</p><p><br></p><p>- Div(공간 태그), 레이아웃, 심플디자인</p><p><br></p><p>- 콘텐츠에 집중하는 디자인</p><p><br></p><p>- 메뉴 - 전체메뉴 / 보여주고 싶은 부분만 보여준다.</p><p><br></p><p>- 더 보고 싶을 때는 고객이 선택해서 볼 수 있게 / 슬라이드 쇼 효과</p><p><br></p><p>- 클릭해서 새로운 창을 띄어서 보여준다.</p><p><br></p><p>③ 스토리보드</p><p><br></p><p>- 구버전의 홈페이지 탐색</p><p><br></p><p>- 구버전의 홈페이지 문제점 및 개선할 점 탐색</p><p><br></p><p>- 개선할 방향 및 주제에 맞는 컨셉 설정</p><p><br></p><p>- 컬러 설정</p><p><br></p><p>- 파일명의 세부화</p><p><br></p><p>- 메인페이지 구체화 표시(레이아웃)</p><p><br></p><p>- 서브페이지 레이아웃 표시</p><p><br></p><p>3. 코딩</p><p><br></p><p>- <p>, <br>, <pre>의 차이점 복습</p><p><br></p><p>- 어제 배운 코딩 실습</p><p><br></p><p>- <ul>, <ol>, <li> q복습</p><p><br></p><p>- <h1>~<h6>까지 크기</p><p><br></p><p>- <b> 글자의 굵기</p><p><br></p><p>- 포토샵에서 합성한 이미지 홈페이지에 구현 : <img src="img.jpg"></p><p><br></p><p>- alt : 야생화 title : 야생화</p><p><br></p><p>- height : 500</p><p><br></p><p>4. 포토샵</p><p><br></p><p>- 포토샵 작업 내용 형식 차이에 따른 저장 방식</p><p><br></p><p>- jpg : 16만 칼라의 다양성 표현 가능 / 투명 x</p><p><br></p><p>- gif : 투명 저장 가능 / 256색상만 지원</p><p><br></p><p>- png : 다양한 색상 지원, 투명 저장 가능 / 용량이 조금 크기 때문에 필요하지 않은 부분 자르기 이용. 이미지 사이즈 조정해서 필요한 부분만 사용 / 익스플로러5 지원x</p><p><br></p><p>- pattern stamp tool : 사각 선택 툴로 패턴 저장 후에 패턴 스탬프 툴로 일정한 형식의 저장된 그림들이 그려짐</p><p><br></p><p>- 한꺼번에 넣고 싶을 때는 fill-pattern 선택</p><p><br></p><p>* 오래된 홈페이지</p><p><br></p><p>- 가보정</p><p><br></p><p>1. 홈페이지 구성</p><p>Main homepage : frame 사용 </p><p>수원 본점 : table 태그</p><p>영통점 : blog 사용</p><p><br></p><p>2. 문제점 -> 개선</p><p>본점 내에 4개의 건물을 소유하고 있음에도 불구하고 홈페이지는 초라하게 꾸며져 있음</p><p>->대중적이면서도 고급스러운 느낌을 주는 것을 표현</p><p>대표적인 상품의 소개의 부재, <span style="font-size: 9pt;">메인 이미지의 부재로 인한 본 식당의 첫 이미지가 좋지 않게 느껴질 가능성 높음</span></p><p><span style="font-size: 9pt;">-> 메인 이미지에 대표적인 상품과 본점의 소개</span></p><p>Main 홈페이지에서 수원본점이나 영통으로 가게 포탈이 표시되어 있어 복잡하게 느껴짐</p><p>-> 한 홈페이지로 해결</p><p>식품의 재질에 대한 내용의 부실과 SNS연동의 부재로 신뢰성이 떨어짐</p><p>-> 적극적인 SNS연동이나 홈페이지 내의 리뷰페이지 필요 / 재질에 따른 식품등급표를 등재하거나 사진으로 품질 표시</p><p>반이나 차지하는 쓸데없는 여백으로 부실하게 느껴짐</p><p>-> 색 효과를 넣어주던가 알맞은 내용 추가(레이아웃 설정)</p><p>=> 가격만으로 불호표시 가능</p><p>건물 galley 불필요</p><p>-> 메인 이미지에 표시 가능</p><p><br></p><p>3. 본 식당 특징</p><p>- 화성의 수원 갈비</p><p>- 전통적인 느낌</p><p>- 높은 가격대</p><p>- 단체 손님이 많다는 것</p><p><br></p><p>4. 목표 : 수원화성의 최고의 갈비를 팔고 있다고 하는 유명한 가게이며 본점 근처에 식당 건물이 4개나 있을 정도로 고급스러운 느낌을 주고 있는 가게이다. 이런 가게는 고가 때문에 대중화되기는 어렵겠지만 한번 있을 고급진 식당에서의 외식에서 가족끼리 올 수 있는 곳으로 소개하거나 외국인으로부터 수원 갈비를 소개해줄 수 있어야 한다.</p>
<!-- -->
