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

안녕하세요. 이번 시간에는 연꽃마을축제 웹사이트를 제작해보도록 하겠습니다. 화면에 보이는 이 사진은 실제 시험장에서는 제공되고 있지 않으니까 우정을 꼭 확인해주시고요. 그러면 간단하게 한번 이 화면의 구성이 어떻게 되어있는지 확인해보고 갈게요. 메뉴가 화면의 왼쪽에 나타나있는 세로형 와이어 프레임이고요. 그 다음에 위에 로고와 메뉴가 이렇게 나타나있고 이때 서브 메뉴는 메인 메뉴 아래쪽으로 흘러내려오는 슬라이드 다운 기능을 구현해서 완성했습니다. 그리고 오른쪽에는 이미지 슬라이드가 구현이 되어있고 하단에 바디 컨텐츠 부분을 보면 음지사항, 갤러리, 바로가기가 순서대로 구현되어있습니다. 마지막으로 포스터 부분에는 카피라이트와 SNS 그리고 패밀리 사이트가 구성되어있는 것을 확인하시고 이제 시험 문제를 보도록 하겠습니다. 시험 문제의 요구사항을 한번 보도록 할게요. 전체 파일의 크기는 5MB를 초과하지 않도록 해야 하기 때문에 꼭 포토샵이나 일러스트 파일이 들어가있지 않도록 확인해주시고요. 웹페이지 코딩은 HTML5를 기준으로 웹표준을 준수해서 작성해야 합니다. 이외의 내용들을 자유롭게 디자인하시면 되고요. 문제에서 지시하지 않은 와이어프레임의 영역비율, 레이아웃, 텍스트의 글자, 색상, 크기, 위구드의 크기와 색상 등은 어성자가 과대명에 맞춰서 자유롭게 디자인해주시면 됩니다. 그러면 이번 시험 문제의 주제를 한번 살펴보도록 하겠습니다. 연꽃마을축제 홈페이지를 제작해야 해요. 계열을 한번 읽어보시고요. 제작 내용을 살펴보도록 하겠습니다. 메인 페이지를 디자인하고 HTML, CSS, JavaScript 기반의 웹페이지를 제작해야 합니다. 이때 시험장에서는 jQuery 옵디소스와 이미지 텍스트는 제공하고 있으니까 이 파일들을 꼭 확인해서 제작해주시면 되고요. HTML과 CSS의 캐릭터셋은 밑에 털로 설정해야 합니다. 그리고 시험 문제에서 컬러 가이드를 제공하고 있어요. 배경색과 기본 텍스트 색을 확인하고 작업해주시고요. 아까 메뉴 부분에서 보았던 내용들은 여기 사이트맵으로 미리 작성되어 있으니까 이 내용들로 활용해주시면 되겠습니다. 그러면 앞에 그림에서 살펴봤었던 와이어 프레임을 시험 문제에서는 어떻게 제시하고 있는지 한번 살펴보도록 할게요. 가장 먼저 가로 길이는 1000px로 설정해주도록 하고요. 세로 길이의 총 탑은 650px로 지정해주시면 되겠습니다. 이때 가운데 속렬을 지정해주셔야 창 크기를 늘렸을 때 이 부분의 공백이 설정되도록 가운데 속렬을 지정해주시면 되고요. 그러면 A 영역을 먼저 설정해보도록 할게요. 로고가 들어갔고 사진에서 보았던 대로 메뉴가 들어갔죠. 그 다음에 B 파트는 이미지 슬라이드가 들어가는 부분입니다. 그 다음에 C 영역에는 우주상, 갤러리, 바르바르가 순서대로 들어갔고요. 그 다음에 D 영역에는 카피라이트 엑스리트, 세븐일리 사이트가 들어가는 부분입니다. 갤러리와 우주상이 어떻게 구현되어 있는지도 따로 제시하고 있어요. 템블런으로 표현을 해주시고요. 그 다음에 순서대로 우주상을 적어주시면 되고 갤러리는 그림 패드가 들어가도록 표현해주시면 됩니다. 우주상의 첫번째 글을 클릭했을 때는 모달 레이어 팝업창을 구성해서 여기에 우주상의 첫번째 글의 타이틀 그리고 우주상의 내용들을 작업해주시면 됩니다. 각기 메뉴가 들어가면 되고요. 이때 모달 레이어 팝업창은 이 팝업창 외의 부분들에 음영 처리가 되어서 실제 화면이 비활성화 되도록 작업해주시면 됩니다. 이렇게 간단하게 기호들을 살펴봤으니 이제 패드 영역별 지지사항을 보도록 하겠습니다. 가장 먼저 A영역, 명칭은 테더라고 표현을 해줄거고요. 이 부분에 먼저 들어가야 될 로고를 보도록 하겠습니다. 가로 세로 200px, 400px 크기로 로고를 직접 디자인해서 삽입해주시면 되고요. 심벌 없이 로고명을 포함한 워드 타입으로 디자인해주시면 됩니다. 로고명은 수험자 제공 폴더에, 해석 폴더에 제공되는 텍스트를 사용해주시면 되고요. 이어서 메뉴를 보도록 하겠습니다. 아까 사이트 맵, 사이트 구조도를 참고해서 메인 메뉴와 서브 메뉴 안에 들어갈 텍스트들을 확인해주시면 되고요. 일단 메인 메뉴의 효과를 먼저 보도록 할게요. 메인 메뉴 중에서 중 하나에 마우스를 올리면 마우스 오버라는 JavaScript 기능함수를 사용하면 하이라이트가 되어야 하고, 마우스 아웃 벗어나면 하이라이트를 해제하면 됩니다. 그리고 메인 메뉴에 마우스를 또 올리면 서브 메뉴 영역이 부드럽게 나타나야 해요. 이때 서브 메뉴는 메인 메뉴에 아래쪽으로 그러면서 나머지 메인 메뉴들이 아래쪽으로 밀리도록 구현해주시면 되고요. 그 다음에 메인 메뉴에서 마우스가 벗어나면 마우스 아웃되면 서브 메뉴 영역이 부드럽게 사라져야 합니다. 서브 메뉴 영역의 효과를 한번 보도록 할게요. 서브 메뉴 영역도 메인 페이지의 텍스트를 고려해서 색상을 설정해주시면 되고요. 서브 메뉴 중에서 마우스 중에 하나를 올리면 하이라이트가 되고 벗어나면 하이라이트가 해제해야 합니다. 메인 메뉴에서도 동일하게 하이라이트 기능이 구현해야 했었지만 비슷한 코드를 사용하면 되고 마우스 커버가 메뉴 영역을 벗어나면 메뉴 영역을 벗어나면 마우스 아웃되면 서브 메뉴 영역이 부드럽게 사라지면 됩니다. 이번에는 B 파트, B 영역의 슬라이드 부분을 보도록 할게요. 슬라이드 이미지를 먼저 제작해야 하는데 사용자 제공 폴더에서 슬라이드 폴더 안에 3개의 이미지가 제공되고 있습니다. 이걸로 제작해주시면 되고 슬라이드 폴더에 제공된 3개의 텍스트도 있어요. 이거를 각 이미지에 적용을 하여 텍스트의 글자체, 글귀, 색상, 크기를 적절하게 설정해서 가속성을 높이고 극장편이 변하도록 제작해주시면 됩니다. 슬라이드 이미지를 또 작업해보도록 할게요. 이미지 슬라이드를 구현해야 하는데 이 문제에서는 페이드 인, 페이드 아웃 효과를 이용해서 이미지가 흘러가도록 제작해주시면 됩니다. 페이드 인, 페이드 아웃은 하나의 이미지가 천천히 사라지고 다른 이미지가 천천히 나타나는 효과를 말합니다. 슬라이드는 매 3초 이내로 하나의 이미지에서 다른 이미지로 전환되어야 합니다. 3초마다 이미지가 바뀌면 된다는 뜻이고요. 웹사이트를 열었을 때 자동으로 시작되어야 합니다. 그리고 또 반복적으로 전환되어야 하는데 3개의 이미지가 슬라이드가 못 끝나면 세 번째 이미지에서 다시 세 번째 이미지가 보이도록 전환하도록 이렇게 구현을 해야 된다는 얘기고요. 이어서 시 영역을 보도록 할게요. 컨텐츠라고 예정해 놓고 코드 작업을 해줄 거고요. 가장 먼저 공지사항을 보도록 하겠습니다. 공지사항의 타이틀 영역과 컨텐츠 영역을 구분해서 표현해주시면 됩니다. 단 컨텐츠는 html 코딩으로 작성해야 하고 이미지로 삽입하면 안됩니다. 컨텐츠는 어선자 제공 폴더에서 컨텐츠 폴더에 스펙트를 제공하고 있어요. 이 내용을 활용해주시면 되고 공지사항의 첫 번째 컨텐츠를 클릭할 경우에 모델 레이어 팝업창이 나타나고 닫기 버튼을 누르면 해당 팝업창이 닫혀야 합니다. 이때 팝업되는 레이어 팝업창의 제목과 내용은 컨텐츠 폴더에서 텍스트 파일로 제공하고 있습니다. 두 번째로 갤러리 부분을 보도록 할게요. 어선자 제공 폴더에서 컨텐츠 폴더에 제공된 3개의 이미지를 사용해서 가로 방향으로 배치하면 됩니다. 이 때 공지사항과 갤러리 부분은 앞에서 보셨던 와이어 프레임 영역을 참고해서 이 부분을 참고해서 대답해주시면 됩니다. 다시 돌아와서 바로가기 부분을 보도록 할게요. 바로가기 영역에는 마찬가지로 컨텐츠 폴더에 선자 제공 폴더도 제공하고 있고 이 이미지를 활용 또는 편집, 디자인해서 제작해주시면 됩니다. 그럼 이제 마지막으로 푸터 부분을 보도록 할게요. D 영역이었고 푸터 안에 제작을 할 거고요. 선자 제공 폴더에서 푸터 폴더에 텍스트랑 이미지를 제공하고 있어요. 이 내용을 활용해서 커뮤니티와 SNS 이미지 3개 그리고 패밀리 사이트를 접속해주시면 됩니다. 지금까지 세부 영역의 지지사항을 살펴왔고 이제 기술적 준수사항을 보도록 할게요. 맨 처음에 말씀드린 대로 웹페이지 코딩은 HTML5 기준 웹 코딩을 준수해야 하고요. HTML 유효성 검사에서 모두가 없어야 합니다. HTML 유효성 검사 서비스는 시험 중에는 시험 시에는 제공하고 있지 않으니까 꼭 이 부분을 미리 시험장에 설치하고 들어가주시면 되고요. CSS는 별도의 파일로 제작해서 준수하여야 합니다. 이때도 오류가 없도록 꼭 확인해주시고요. 그리고 JavaScript 코드도 별도의 파일로 제작해서 연결해야 되고 그 다음에 브라우저에 내장된 개발도 그리고 순수탭의 오류가 표시되지 않아야 합니다. 이 두 가지 부분은 실제 코드를 작업하고 있는 창이나 혹은 실제 브라우저에서 오류를 확인할 수 있으니까 마지막에 작업이 다 끝나고 체크해주시면 되고요. 상호적용이 필요한 컨텐츠는 임시링크 되어야 합니다. 즉, 하이퍼링크를 사용하는 경우 모든 링크는 샵으로 추가해서 임시링크로 연결되도록 해야 하고 스키로 이동을 선택할 수 있어야 합니다. 그래서 각각의 영역을 꼭 HTML로 잘 구현해주시고요. 그 다음에 사이트는 다양한 화면의 상도에서 일관성 있는 페이지 레이아웃을 제공해야 합니다. 그래서 우리가 전체 와이어 프레임을 가로 길이를 3px로 설정하고 여기를 가운데 정렬하도록 했죠. 그래서 여기 부분이 늘어나고 줄어들도록 그래서 이 가운데 가로 3px의 크기 부분은 레이아웃이 일관성이 지지되도록 설정해주시면 되고요. 웹페이지 전체의 레이아웃은 테이블 패드가 아닌 CSS를 통해 레이아웃 작업을 하도록 합니다. 그래서 우리가 지금까지도 각각의 영역을 div 영역으로 사용했고 이 부분의 가로 길이와 세로 길이는 CSS에서 설정했었죠. 그 다음에 브라우저에서 CSS를 사용 안 한 것으로 설정한 경우 컨텐츠가 세로로 나열되어야 합니다. 방금 말씀드린 내용과 동일한 설정으로 이 부분을 준수하시고요. 그 외, div 영역만 잘 설정이 되면 가로 길이, 세로 길이는 CSS에서 설정했을 때 CSS를 사용하지 않는다면 컨텐츠가 세로로 나열이 될 거고요. 그 다음에 타이틀 텍스트, 바디 텍스트, 메뉴 텍스트에 각각의 글자, 폼트, 글자체, 굵기, 색상, 크기는 적절하게 설정해주시면 되고 이때 텍스트 반의 위계질서는 크기를 크게, 혹은 썸머 부분은 작게 설정함으로써 직관적으로 알 수 있게끔 해야 합니다. 모든 이미지에는 이미지에 대한 대체 텍스트를 표현할 수 있는 알체 속성이 있어야 합니다. 빼놓지 말고 작업해주시고요. 제작된 사이트 메인 페이지의 레이아웃 구성 요소의 크기, 위치는 최신 버전의 MSS나 구글 크롬에서 동일하게 표시되어야 합니다. 그럼 이어서 배출 방법을 보도록 할게요. 수험자는 비번호로 된 폴더명으로 완성된 작품 파일에 전환해서 배출해야 합니다. 이 폴더 안에는요. 이미지 폴더, 크기 폴더, CSS 폴더를 각각 만들어주시고요. 그 다음에 메인 페이지에는 반드시 최상위 폴더에 index.html로 저장해서 배출해주셔야 합니다. 수험자는 배출하는 폴더에 index.html을 열었을 때 연결되어야 하거나 표시되어야 할 모든 리소스들을 그 비번호 폴더 안에 포함해서 배출해주셔야 하고요. 이때 수험자의 컴퓨터만이 아니라 패턴 유어의 컴퓨터에서도 전상 작동해야 합니다. 그렇기 때문에 모든 이미지나 텍스트, 코드들이 비번호 폴더 안에 들어가 있어야 한다는 점이고요. 그래서 그 부분을 배출하기 전에 꼭 확인해주시고요. 전체 결과물의 용량은 오메가바이트가 효과되지 않도록 작업해주셔야 합니다. 이때 확장자가 AI나 PSP로 저장되는 파일이 있다면 오메가바이트를 넘을 수도 있으니까 이 파일들이 들어가 있는지 아닌지 확인해주시면 됩니다. 이어서 수험자 유의사항을 보도록 할게요. 수험에 필요한 소프트웨어 참고자료가 하드웨어에 설치해 있는지 확인 후 작업해주시면 됩니다. 그리고 참고자료의 내용 중 오탈자가 있을 때는 수정해서 작업해주시면 되고요. 지청공구 이외의 참고자료나 외부장치 등 어떠한 장치도 시험층에 지탐할 수 없습니다. 그리고 수험자가 컴퓨터 활용 미숙으로 인해 시험 진행이 어렵다고 판단되었을 때는 감독위원이 시험을 중지시키고 실격 처리할 수 있습니다. 마지막으로 바탕화면에 수험자 본인의 비번호 이름을 다른 폴더에 완성된 작성을 저장해주시면 됩니다. 그리고 모든 작품을 감독위원, 수정위원이 컴퓨터했을 때 혹시나 동일한 작품이 있다면 부자된 작품이 있다면 관련된 수험자를 모두 부정행위 처리할 수 있으니까 유의해주시고요. 장시간 작업으로 인해 시체가 불편하지 않도록 적절한 높이기를 하시고 작업해주시면 됩니다. 실격 처리에 대한 내용을 마지막으로 설명드릴게요. 실제 수험자 본인이 시험 도중에 시험에 대한 크기 유산을 표시하는 경우 그리고 작업 범위, 용량이나 시간을 소화하거나 요구 사항과 흔적하게 다른 경우 마지막으로 세번째로 슬라이드가 자바스크립트 CSS 중 하나 이상의 방법을 이용하여 제작되지 않을 경우 그리고 움직이는 슬라이드를 제작하지 않고 이미지 하나만 배치하는 경우 실격 처리 되니까 이미지 슬라이드 부분은 꼭 표시한 뒤에 시험장에 가시길 바라고요. 그리고 수험자 미숙으로 비번호 폴더에 작품이 배정되지 않았을 경우에 실격 처리 되니까 바탕화면에 비번호 폴더를 꼭 먼저 만들고 작업을 시작해주시고 마지막에도 바탕화면에 비번호 폴더를 꼭 확인해주시고 실격 처리 해주시면 됩니다. 그리고 압축 프로그램을 사용해서 작품을 압축하는 경우에도 실격 처리가 되니까 압축하지 않으시고 비번호 폴더도 제출해주시면 됩니다. 마지막으로는 과제 기준의 20% 이상이 완성되지 않은 경우에도 실격 처리가 되니까 20% 이상을 만들어낼 수 있도록 연구해주시면 됩니다. 이어서 세 번째는 지급하는 내용을 보도록 할게요. 시험장에 들어갔을 때 수험 자료가 들어있는 USB 외모 그리고 시험 문제를 제출해야 하는 특정 위원이 가지고 있는 USB 용모를 제공하고 있으니까 이 내용들은 간단하게 살펴보시면 되겠습니다.