[웹디자인개발기능사 실기] 최신 기출 유형 문제 03회 - 가이드

안녕하세요 이번 시간에는 한국 투어 웹사이트 제작에 대한 가이드를 설명드리도록 하겠습니다 교재에 나와 있는이 캡처 들어가고요이 메뉴에 마우스를 올렸을 때는 아래에 이제 서브 메뉴가 내려오는 방식이 구현되었습니다 그다음에 컨텐츠 영역인데요이 안에는 이미지 슬라이드와 그리고 공지 사항 갤러리 바로 가기가 들어가게 됩니다이 이미지 슬라이드는 페이드인 페이드 아웃 기능으로 총 세 개의 이미지를 번갈아가면서 보여 줘야 합니다 그다음에는 공지사항과 갤러리가 각각 다른 영역의 탭의 형식을 구현해서 들어가시면 되고요 그다음에는 바로 가기를 구현해 주시면 됩니다 마지막에 푸터 영역에는 카피라이트 들어가고 SNS 패밀리 사이트가 들어가는 내용을 확인해 보실 수 있겠습니다 그러면 실제 시험 문제는 어떻게 나오는지 보도록 하겠습니다과 형을 먼저 함께 보시면 한국 투어임을 확인해 주시면 되고요 요구 사항을 보도록 하겠습니다 웹페이지 제작 후에 총 5메가바이트 용량을 초과하지 않도록 저장해야 합니다 그다음에 html 5 기준 외 표준을 준수해야 합니다 그리고 혹시 요구 사항에서 지정되어 있지 않은 요소들은 주제 특성에 맞게 자유롭게 디자인해 주시면 됩니다 또 문제에서 지시하지 않은 와이어 프레임의 영역 비율이나 레이아웃 텍스트 크기 색상 등은 수험자가 과제 명의 특성에 맞게 자유롭게 디자인 하실 수 있습니다 주제를 한번 먼저 볼게요 한국 두어 홈페이지를 제작하는 것이 주제이고 그다음에 개호를 한번 먼저 보시면 한국의 대표 여행 회사인 한국 투어는 온라인 상품 판매 홈페이지를 신규 제작하려고 합니다 그래서 사용자에게 여행 상품을 소개하고 판매하여 매출을 올릴 수 있는 웹사이 제작을 요청하였습니다 제작 내용을 한번 보도록 할게요 메인 페이지를 디자인하고 html css 자바스크립트 기반의 웹페이지를 제작합니다 이때는 제이커리 오픈 소스랑 이미지 텍스트 등은 제공하고 있으니이 제공된 내용들을 활용해서 메인 페이지를 제작해 주시면 되겠습니다 html css 캐릭터셋은 utf 8로 설정해 주시면 됩니다 컬러 가이드를 살펴볼게요 메인 컬러와 서브 컬러는 자유롭게 지정하실 수 있고 텍스트의 배경색과 텍스트의 기본색은 지정해 주고 있으니이 컬러 가이드를 활용해 주시면 되겠습니다 사이트 맵을 한번 살펴볼게요 메인 메뉴와 서브 메뉴에 대한 내용이 들어가 있습니다 메인 메뉴가네 개이고 서브 메뉴는네 개에서 세 개인 것을네 개에서 세 개 또는 두 개인 것을 확인해 주시면 되겠습니다 그러면 와이어 프레임을이어서 보도록 할게요 와이어프레임은 브라우저 전체 넓이의 100% 차지하도록 하면 됩니다 a d 영역에 있어서 브라우저 전체 넓이 100% 주어지면 되고요 실제 여기 로고가 시작되는 실제 내용의 부분은 1200 픽셀로 고정시켜 주시고 가운데 정렬해 주시면 됩니다 그러면 a 영역인 헤더 영역을 먼저 살펴볼게요 로고가 들어갈 것이고요 그다음에 메인 메뉴가 올라갈 거고 그 밑으로 이제 서브 메뉴가 펼쳐지는 형태가 됩니다 B 영역을 살펴보면요 여기 이미지 슬라이드가 페이드인 페이드 아웃 기능으로 이제 구현을 할 거고요 C 영역에는 공지 사항 갤러리 바로가기가 들어갑니다 마지막으로 디포터 영역에는 카피라이트 들어가고 그고 오른쪽에 SNS 패밀리 사이트가 들어가게 됩니다 각각의 세로 길이는 1300 200 100으로 총 700 픽셀로 구현해 주시면 되겠습니다 공지 사항과 갤러리는 각각 위치의 별도로 구성해 주시면 되겠고요 공지 사항에 첫 번째 영역을 클릭했을 때 첫 번째 항목을 클릭했을 때는 이렇게 모달 레이어 팝업 창으로 구성해 주시면 되겠습니다 입니다 그러면 각 영역별 세부 영역별 지시 사항을 살펴보도록 할게요 먼저는 로고에 대한 내용입니다 로고는 가로세로 200픽셀 400픽셀 크기로 웹사이트 이미지에 적합한 로고를 직접 디자인해서 삽입해 주시면 됩니다 심벌 없이 로고형 포함한 워드 타입으로 디자인할 거고요 로고 명은 헤더 폴더에 제공된 텍스트를 사용합니다 그다음에 메뉴 구성을 보도록 할게요 우리가 사이트 구조도 앞에서 메인 메뉴와 서브 메뉴가 어떻게 구성되어 있는지를 확인했고 그다음에 메인 메뉴의 효과를 보시면 메인 메뉴 중 하나에 마우스를 올리면 하이라이트가 되고 벗어나면 하이라이트가 해제됩니다 또 메인 메뉴에 마우스를 올리면 서브메뉴 영역이 부드럽게 나타나면서 서브 메뉴가 보이도록 할 거고요 마우스가 메인 메뉴 영역을 벗어나면 서브 메뉴 영역이 부드럽게 사라지면 됩니다 그리고 서브 메뉴 영역의 효과를 보도록 할게요 서브 메뉴 영역은 메인 페이지의 컨텐츠를 고려해서 배경 색깔을 설정해 주시면 됩니다 서브 메뉴 중 하나에 마우스를 올리면 하이라이트 돼야 되고요 벗어나면 하이라이트가 해제되면 됩니다 그리고 마우스가 메뉴 영역을 벗어나면 또 서브메뉴 영역이 부드럽게 사라지면 됩니다 그다음에 이미지 슬라이드를 제작해 볼게요 B 슬라이드 영역인데 제공된 총 세 개 이미지로 제작해 주시면 됩니다 슬라이드 폴더에 제공된 또 세 개의 텍스트가 있어요 각 이미지에 적용하되 텍스트의 글자체 굵기 색상 크기 등은 적절하게 설정해서 가속성을 높이고 독창성이 드러나도록 합니다 슬라이드 애니메이션을 제작할 때는요 이미지 슬라이드에 페이드인 페이드 아웃 효과를 이용해서 제작할 거고요 페이드인 페이 아웃은 하나 이미지가 서서히 사라지고 다른 이미지가 서서히 나타나는 효과입니다 매 3초 이내로 이미지가 전환되면 되고요 웹사이트를 열었을 때 자동으로 시작되어서 반복적으로 전환되어야 합니다 세 번째 이미지가 끝났을 때 다시 첫 번째 이미지로 돌아가면 되겠고요 그다음에 컨텐츠 영역을 보도록 하겠습니다 공지 사항의 타이틀 영역과 콘텐츠 영역을 구분하기 콘텐츠는 html 코딩으로 작성해야 하고 이미지로 삽입하면 안 됩니다 콘텐츠는 컨텐츠 폴더에 텍스트를 제공하고 있으니이를 활용해서 제작해 주시면 되고요 공지 사항의 첫 번째 컨텐츠를 클릭할 경우 모달 레이업 팝업창이 나타나 나타나면 되고 레이업 팝업창 안에 에서 닫기 버튼을 누르면 해당 팝업 창이 닫혀야 합니다 레이어 팝업 창의 제목과 내용은요 컨텐츠 폴더에 텍스트 파일로 제공하고 있습니다 그다음에 두 번째 갤러리 탭을 보시겠습니다 컨텐츠 폴더에서 제공된 이미지 세 개를 사용해서 가로 방향으로 배치해 줍니다 그다음에 바로 가기 또한 컨텐츠 폴더에 제공된 파일을 활용해서 편집 또는 디자인에 제작하면 됩니다 마지막으로 터 영역을 볼게요 프터 폴더에 제공된 텍스트를 사용해서 카피라이트 SNS 패밀리 사이트를 제작해 주시면 됩니다 그러면 기술적 준수 사항을 보도록 할게요 웹페이지 코딩은 html 5 기준 웹 표준을 준수해야 합니다 그래서 유효성 검사에서 오류가 없어야 하는데요 html 유효성 검사는 시험 시에는 제공하지 않습니다 또한 CSS 는요 별도의 파일로 제작해서 링크해야 하고 css 3 기준 검사에서 우류가 없어야 합니다 자바스크립트 코드도 별도의 파일로 제작해서 연결해야 합니다 브라우저에 내장된 개발 도구에 콘솔 탭에서 오류가 표시되지 않아야 합니다 상호작용이 필요한 컨텐츠는 모두 임시 링크를 걸어 줄 거고요 탭키로 이동 선택할 수 있어야 합니다 사이트는 다양한 화면 해상도에서 일관성 있는 페이지 레이아웃을 제공해야 합니다 그리고 웹페이지 전체 레이아웃은 테이블 태그가 아닌 css 통해서 레이아웃 작업을 해야 하고요 브라우저에서 css 사용 안 함으로 설정할 경우 콘텐츠가 세로로 나열되기 구현이 될 겁니다 그다음에 타이틀 텍스트 바디 텍스트 메뉴 텍스트 등 각 글자체의 굵기 색상 크기는 적절하게 설정하되 텍스트 간의 위계질서가 직관적으로 나타날 수 있도록 합니다 그리고 모든 이미지에는 트 속성이 꼭 있어야 하고요 그리고 제작된 사이트의 메인 페이지의 레이아웃 구성 요소의 크기 위치 등은 최신 버전의 MS 크롬에서 동일하게 표시되어야 합니다 마지막으로 적 제출 방법을 살펴보도록 할게요 수험자는 번호로 된 폴더명으로 완성된 작품 파일을 저장하여 제출합니다 폴더 안에는 이미지스 스크립트 css 폴더로 각각의 자료들을 분류해서 저장시켜 놔야 합니다 그리고 중요한 것이 메인 페이지는 반드시 최상위 폴더에 인스 fromhtml 저장하여 대출해야 합니다 수험자는 제출하는 폴더에 인스 html 열었을 때 연결되거나 표시되어야 할 모든 리소스들을 포함해서 제출해야 합니다 즉 위원의 컴퓨터에서 정상 작동하도록 구현해야 하고요 전체 바이트를 넘지 않도록 합니다 포토샵 파일 작업 파일 등은 저장하면 안 된다는 점을 말해 주고 있고요 수험자 유의 사항을 한번 살펴볼게요 모든 소프트웨어가 있는지 먼저 확인 후에 진행을 해 주시고요 혹시 참고 자료 중에서 탈자가 있을 경우에는 수험자가 수정해서 작업해 주시면 됩니다 지참 공구는 수 표 신분증 흑색 필기 도구인데요 이외에 자료나 어떤 물품도 지참할 수 없습니다 그리고 중요한 것이 바탕 화면에 수험자 본인의 비번호 이름을 가진 폴더에 완성된 작품만을 파일으로 저장해 주시면 됩니다 모든 행위는 감독 위원 채점위원이 검토해서 복사한 작품이 있을 때는 관련된 수험자를 모두 부정행위 처리할 수 있음을 유의해 해주시고요 그리고 실격 처리에 대한 대상을 보도록 하겠습니다 수험자 본인이 수험 도중 시험에 대한 포기 의사를 표하는 경우 또 작업범위 용량이나 시간을 초과하는 경우 아니면 요구 사항과 형이 다른 경우 실격이 됩니다 중요한 것은 슬라이드가 자바스크립트나 css 중 하나 이상일 방법을 이용해서 제작되지 않은 경우 움직이는 이미지 슬라이드를 제작하지 않고 이미지 하나만 배치한 경우도 실격 처이 되니이 부분은 꼭 연습 후에 완성을 해 주시는게 좋겠습니다 또 수험자의 미식으로 비번호 폴더에 완성된 작품을 저장하지 못했을 경우에도 실격 처리되니 저장된 내용을 꼭 다시 한번 확인해 주시고요 압축 파일을 압축 프로그램을 사용하시면 절대 안됩니다 과제 기준에 20% 이상이 완성 않은 경우도 실격 처리되니이 부분도 확인해 주시면 되겠습니다