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

안녕하세요. 이번 시간에는 세계 막기행 축제라는 웹사이트 제작에 대한 가이드를 설명드리도록 하겠습니다. 실제 시험에서는 이렇게 완성된 화면을 보여주지 않으니 꼭 연습할 때만 참고해서 사용해 주시기 바랍니다. 그러면 이 완성된 화면을 가지고 어떻게 웹페이지가 구성되어 있는지 설명을 드리도록 하겠습니다. 메뉴가 왼쪽에 있는 세로형 프레임을 제작하고 있고요. 가장 왼쪽에 헤더 영역을 지정해주고 있습니다. 헤더 영역에는요. 로고 파일을 삽입하였고 그 다음에 메뉴들이 들어가 있습니다. 메인 메뉴는 총 4개이고요. 이 메뉴 중 하나의 마우스를 가져다 대면 메뉴가 하이라이트 처리가 되고 옆에 서브 메뉴가 등장하는 모양을 제작해 주시면 됩니다. 그리고 이 오른쪽 영역은 컨텐츠 영역인데요. 가장 크게는 이미지 슬라이드 그리고 컨텐츠 그리고 푸터 영역으로 나누어져 있습니다. 그래서 이 이미지 슬라이드를 먼저 확인해 보면요. 총 3장의 이미지를 가지고 좌에서 우로 이동하는 모양으로 애니메이션을 구현해 주시면 됩니다. 그리고 여기 아래 컨텐츠 부분에는요. 공지사항이 있고요. 갤러리가 있고 바로 가기가 있습니다. 그리고 가장 마지막 푸터 부분에는요. 하단 로고가 있고요. 그 다음에 하단 메뉴 3개 카피라이트가 들어가 있는 모습을 확인해 주시면 됩니다. 그리고 공지사항의 첫 번째 요소를 클릭하면요. 레이어 팝업장이 나타나도록 구현해 주시면 됩니다. 그러면 실제 시험 문제에서 어떻게 나오는지 한번 확인해 보도록 하겠습니다. 먼저 과제명을 확인해 보도록 하겠습니다. 세계 막기행축제가 과제명이고요. 요구사항을 살펴보자면 오메가바이트의 용량이 초과되지 않도록 파일을 작성해 주시면 됩니다. 그리고 HTML 기준 5 기준 웹표준을 준수해 주시면 됩니다. 그리고 요구사항에서 지정되지 않은 요소들은 주제 특성에 맞게 자유롭게 디자인해 주시면 되고요. 문제에서 지시하지 않은 와이어 프레임의 영역비율, 레이아웃, 텍스트, 요소별 크기, 색상 등은 수험자가 과제명 특성에 맞게 자유롭게 디자인해 주시면 됩니다. 세계 막기행축제 웹사이트 개선을 위한 메인 페이지 제작이 주제이고요. 개요를 한번 살펴보시면 세계 막기행축제 홍보를 위해 홈페이지를 제작하려 합니다. 특히 음식을 소개하고 관련 요리 경연대회, 요리 관련 전시회 등 다양한 행사가 열리는 축제를 홍보하는 웹사이트 제작을 요청하였습니다. 제작 내용을 살펴보자면 메인 페이지를 디자인하고 HTML, CSS, JavaScript 기반의 웹페이지를 제작합니다. 이때 jQuery 오픈소스와 이미지, 텍스트 등은 수험자 제공 파일로 제공해 주고 있으니 활용하여 제작하시면 됩니다. 그리고 HTML과 CSS의 캐릭터셋은 UTF-8로 지정해 주시면 됩니다. 컬러 가이드도 한번 살펴볼게요. 주조색과 보조색은 자유롭게 지정해 주시고요. 배경색은 흰색으로, 기본 텍스트 색은 샵 333.3으로 지정해 주시면 됩니다. 사이트 맵을 한번 살펴보도록 할게요. 메인 메뉴는 총 4개를 가지고 있고요. 각각의 서브 메뉴는 총 3개씩 가지고 있습니다. 그럼 와이어 프레임을 한번 살펴보도록 하겠습니다. 전체 프레임의 가로 길이는 1000픽셀로 왼쪽 정렬로 해주시면 됩니다. 가장 왼쪽에는 A영역의 헤더 영역입니다. 로고가 들어가고요. 메인 메뉴가 들어갑니다. 그리고 메인 메뉴에 하나의 마우스를 올렸을 때 하이라이트 처리가 돼야 하고요. 그 다음에 서브 메뉴가 나타나면 됩니다. 이미지 슬라이드가 그 오른쪽에 들어가고요. 그 밑에는 공지사항, 갤러리, 바로 가기가 들어갑니다. 그리고 로고의 세로 크기만큼 하단 메뉴 카피라이트가 D 포터 영역에 들어가 주시면 됩니다. B영역의 공지사항과 갤러리에 대한 별도 구성 내용입니다. 각각을 탭으로 보여줘서 이 자리 안에 넣어주시면 됩니다. 그러면 세로 길이도 한번 살펴보자면 350 픽셀, 200 픽셀, 100 픽셀로 총 650 픽셀입니다. 그러면 헤더 영역의 세로 크기도 650 픽셀로 지정해 주시면 되겠죠. 그 다음에 공지사항의 첫 번째 요소를 클릭하면 모달 레이어 팝업 창이 구성되면 됩니다. 그러면 세부 영역별 지시사항에 대한 설명을 드리도록 하겠습니다. 먼저 헤더 영역의 로고는요. 헤더 폴더의 수험자 제공 파 폴더에서 로고를 제공해주고 있으니 그대로 삽입해 주시면 됩니다. 그때 포토샵을 이용해서 로고의 색을 과제명에 맞게 반드시 변경해 주시고요. 그 다음에 로고의 크기를 변경할 경우 가로, 세로 비율을 유지해야 합니다. 그 다음에 헤더 영역에 들어가 있는 메뉴 부분의 지시사항을 살펴볼게요. 사이트 구조들을 참고해서 메인 메뉴와 서브 메뉴를 구성해 주시면 되고요. 메인 메뉴의 효과를 보시면 메인 메뉴 중 하나의 마우스를 올리면 하이라이트가 되고 벗어나면 하이라이트를 해제합니다. 그리고 메인 메뉴에 마우스를 올리면 서브 메뉴 영역이 부드럽게 나타나야 하고요. 서브 메뉴가 보이도록 하면 됩니다. 메인 메뉴에서 마우스 커서가 벗어나면 서브 메뉴 영역도 부드럽게 사라지면 됩니다. 서브 메뉴 영역의 효과를 보도록 할게요. 서브 메뉴 영역은 메인 페이지의 콘텐츠를 고려해서 배경색을 설정해 주시면 되고요. 서브 메뉴 중 하나의 마우스를 올리면 하이라이트가 되고 벗어나면 하이라이트를 해제합니다. 마우스 커서가 메뉴 영역을 벗어나면 서브 메뉴 영역이 부드럽게 사라지면 됩니다. 그 다음에 B 영역인 슬라이드 영역을 보도록 하겠습니다. 수험자 제공 폴더에서 슬라이드 폴더에 3개의 이미지가 있습니다. 그리고 3개의 텍스트가 있는데요. 각 이미지에 적용해서 텍스트에 글자체, 국기, 색상, 크기 등은 적절하게 이용해서 가독성과 독창성이 드러나도록 이미지를 제작해 주시면 됩니다. 그리고 슬라이드 애니메이션을 제작해 주시면 되는데요. 이미지만 바뀌면 안되고 이미지가 좌에서 우로 또는 우에서 좌로 이동하면서 전환되어야 합니다. 슬라이드는 매 3초 이내에 하나의 이미지에서 다른 이미지로 전환되어야 하는데요. 웹사이트를 열었을 때 자동으로 시작되어야 하고 반복적으로 전환되어야 합니다. 즉, 마지막 세 번째 이미지가 끝나면 다시 첫 번째 이미지로 돌아가서 이미지가 계속 전환되어야 한다는 이야기고요. 그 다음에 C영역의 컨텐츠 부분을 살펴볼게요. 이곳에는 공지사항, 갤러리, 바로가기 세 가지가 들어가 있고요. 공지사항을 한번 보시면 공지사항의 타이틀 영역과 컨텐츠 영역을 구분해서 표현해 주시면 됩니다. 단, 컨텐츠 영역에는 꼭 HTML 코딩으로 작성해야 하고 이미지로 삽입하시면 안됩니다. 컨텐츠의 텍스트들은요. 수험자 제공 폴더에 컨텐츠 폴더에 텍스트가 있으니 그 내용을 활용해서 제작해 주시면 되고요. 공지사항의 첫 번째 컨텐츠를 클릭할 경우 모달 레이어 팝업 창이 나타나게 됩니다. 그리고 닫기 버튼을 누르면 해당 팝업 창이 닫히면 됩니다. 레이어 팝업의 제목과 내용은 컨텐츠 폴더에 제공된 텍스트가 있으니 그 파일을 활용해 주시면 되겠습니다. 그 다음에 갤러리 영역을 살펴볼게요. 동일하게 컨텐츠 폴더 안에 이미지 3개를 제공하고 있습니다. 그 이미지 3개를 가로 방향으로 배치해 주시면 되고요. 갤러리 이미지에 마우스 오버를 했을 때 개체의 투명도의 변화가 있어야 합니다. 그리고 바로가기 영역을 보면요. 컨텐츠 폴더에 제공된 파일을 활용해서 편집 또는 디자인하여 제작해 주시면 됩니다. 마지막으로 푸터 영역입니다. 로고를 그레이 스케일, 무채색으로 변경하고 사용자의 접근성을 고려하여 배치합니다. 그리고 나머지 카피라이트와 패밀리 사이트에 대한 부분은 푸터 영역에 제공된 텍스트를 사용해서 제작해 주시면 됩니다. 기술적 준수 사항을 살펴보도록 하겠습니다. 웹페이지 코딩은 HTML5 기준 웹표준을 준수해야 하고요. HTML 유효성 검사에서 오류가 없어야 합니다. 이 유효성 검사 서비스는 시험 시에는 제공하지 않습니다. 그래서 꼭 태그들을 잘 활용하고 웹표준을 숙지해서 시험을 진행해 주시고요. CSS는 별도의 파일로 제작해서 링크하셔야 합니다. 그리고 마찬가지로 CSS3 기준 검사에서 오류가 없어야 합니다. 또 자바스크립트 코드도 별도의 파일로 제작해서 연결해 주어야 합니다. 브라우저, 구글 크롬에서는 내장된 개발 도구의 콘솔 탭에서 오류가 표시되지 않아야 합니다. 그 다음에는요. 상호작용이 필요한 모든 콘텐츠에는 임시링크가 들어가 있으면 되고요. 탭으로 이동할 수 있어야 합니다. 그 다음에 사이트는 다양한 화면 해상도에서 일관성 있는 페이지 레이아웃을 제공해야 합니다. 웹페이지의 전체 레이아웃은 테이블 태그 사용하지 않고 CSS를 통해서 직접 위치와 크기를 설정해 주시면 됩니다. 브라우저에서 CSS 사용 안 함으로 설정한 경우 콘텐츠가 세로로 나열되는 것을 확인해 주시면 되고요. 타이틀 텍스트, 바디 텍스트, 메뉴 텍스트의 각 글자체의 굵기, 색상, 크기는 적절하게 사용해 주시되 텍스트 간의 위계질서를 직관적으로 확인할 수 있도록 구현해 주시면 되겠습니다. 모든 이미지에는요. 이미지에 대한 대체 텍스트를 표현할 수 있는 알트 속성을 꼭 넣어주셔야 합니다. 제작된 사이트, 메인 페이지의 레이아웃, 구성요소 크기, 위치 등은 최신 버전의 MS Edge, Google Chrome 등에서 동일하게 표시되어야 합니다. 제출하는 방법을 살펴보도록 할게요. 수험자는 비번호로 된 폴더명으로 완성된 작품 파일을 저장해 제출해야 합니다. 폴더 안에는요. 3가지 폴더가 있어야 해요. 이미지스, 스크립트, CSS로 각각의 자료들이 분류돼서 폴더에 저장되어야 했어야 하고요. 메인 페이지는 반드시 최상위 폴더에 index.html로 저장하여 제출해야 합니다. 수험자는요. 폴더가 제출하는 폴더에 index.html을 열었을 때 연결되거나 표시되어야 할 모든 리소스들을 포함해서 제출해야 하는데 이때 채점위원회 컴퓨터에서 정상 작동해야 하니 모든 열려진 창들을 다 끄고 index.html을 다시 실행해보시는 것도 좋은 방법입니다. 전체 결과물의 용량이 5MB를 넘지 않아야 하기 때문에 혹시나 AI나 PSD 등 포토샵 작업 파일이 들어가 있지 않도록 꼭 확인해주시기 바랍니다. 수험자 유의사항을 살펴볼게요. 수험에 필요한 소프트웨어가 있는지 시험 전에 먼저 확인해주시고요. 혹시 참고자료에서 오자나 탈자가 있을 경우 수정하여 작업해주시면 됩니다. 지참 공구는요. 수험표, 신분증, 흑색 필기 도구인데요. 이 외의 물품들은 지참할 수 없으니 꼭 확인해주시기 바랍니다. 그리고 수험자가 컴퓨터 활용 미숙 등으로 시험 진행이 어려울 경우 시험을 중시시키고 실적처리될 수 있음을 유의해주시고요. 중요한 것이 바탕화면에 수험자 본인의 비번호 이름을 가진 폴더에 완성된 작품의 파일만을 저장해주시면 됩니다. 모든 작품을 감독위원 또는 채점위원이 검토해서 복사된 작품이 있을 경우 관련된 수험자를 모두 부정행위 처리할 수 있으니 주의해주시고요. 그 다음에 실격처리에 대한 내용을 보도록 하겠습니다. 수험자 본인이 수험 도중에 시험에 대한 포기 의사를 표시하는 경우 실격처리됩니다. 그리고 작업 범위가 용량이나 시간을 초과한 경우 또는 요구사항과 형격키가 다르게 제작된 경우 실격처리됩니다. 그 다음에 슬라이드가 자바스크립트 CSS 중 하나 이상의 방법을 이용하지 않고 제작된 경우 그리고 움직이는 슬라이드를 제작하지 않고 이미지 하나만 배치한 경우도 실격처리되니 이 부분을 꼭 연습하셔서 제작해주시면 되겠습니다. 그리고 수험자 미숙으로 비번호 폴더에 작품을 저장하지 못했을 경우에도 실격처리가 되니 주의해주시면 됩니다. 그리고 압축 프로그램을 사용해서 작품을 제출한 경우에도 실격처리됩니다. 마지막으로 가재기준 20% 이상이 완성되지 않은 경우에도 실격처리되니 꼭 완성되는 퍼센트를 높여서 연습해 주시기 바랍니다.