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

안녕하세요. 이번 시간에는 알뜰 식자재몰 웹사이트를 제작해 보도록 하겠습니다. 지금 화면에 보고 계시는 웹사이트 캡쳐본은 실제 시험에서는 제공하고 있지 않은 부분이고 이 동영상 강의에서만 사이트를 분석하기 위해서 캡쳐본을 넣어놨다는 점을 참고해 주시기 바랍니다. 그러면 이 사이트를 분석해 볼 텐데요. 지금 이 알뜰 식자재몰은 한국산업인력공단에서 공개한 문제 유형의 D3, D4 유형을 조합해서 작업하는 웹사이트라는 것을 확인해 주시면 될 것 같습니다. 이 D 유형들은 반응형으로 제작을 하라는 요구사항이 있었던 유형들이고요. 그러면 이 웹사이트가 어떻게 반응형으로 구성되어 있는지 캡쳐본을 통해서 확인해 보도록 하겠습니다. 가장 먼저는 웹사이트의 너비를 브라우저의 100%로 지정하도록 하고 있습니다. 브라우저의 100%로 지정하고 있고요. 그리고 이 왼쪽에 A영역, 여기 헤더 영역은 실제 200px로 구현하도록 하고 있습니다. 그러면 이쪽의 나머지 너비는 100%에서 200px을 뺀 영역을 채워주면 되겠죠. 그러면 A영역부터 살펴보도록 하겠습니다. A영역에는 맨 처음에 로고가 나오고요. 그리고 그 아래에 세로형 메뉴가 구성되어 있는 세로형 와이어 프레임입니다. 그래서 이 메인 메뉴 영역에 마우스를 올리면 실제로 서브 메뉴가 가로로 나타나게 될 겁니다. 그리고 이제 오른쪽에 B영역을 살펴보도록 할게요. B영역은 이미지 슬라이드로 구성이 되어있습니다. B영역은 실제 D3유형과 D4유형에는 페이드인 페이드아웃 유형으로 구현하도록 하고 있지만 지금 이 알뜰 십자재몰에서는 여러가지 유형을 시도해보기 위해서 위아래로 슬라이드되는 이미지 슬라이드를 구현하도록 하고 있습니다. 여기까지는 D3유형과 유사하게 조합된 유형인데요. 위아래 C영역과 D영역의 부분을 D-4유형에서 조합된 내용이라는 것을 말씀드리겠습니다. 여기서는 어떤 구성을 하고 있느냐 하면 실제 C컨텐츠 부분에서 바로가기 아이콘들이 나타납니다. 바로가기 아이콘들은 총 7개의 아이콘으로 구성되어 있는데요. 여기서 브라우저의 창크기를 줄였을 때 실제 아이콘의 크기가 작아지기도 하고 또한 아이콘 사이의 간격들을 잘 유지하도록 하는 것이 반응형 와이어 프레임의 포인트라는 것을 말씀드릴 수 있겠습니다. 그리고 컨텐츠의 아래 부분을 보도록 할게요. 여기는 공지사항과 갤러리 영역이 각각 다른 탭으로 구현되어 있습니다. 마찬가지로 공지사항과 갤러리도 반응형 와이어 프레임에 적합하도록 간격들 그리고 크기들을 브라우저 크기에 맞춰서 조정이 되도록 CSS에서 구현을 하게 됩니다. 그리고 D영역, 푸터 영역을 한번 살펴보도록 할게요. 이 푸터 영역에는 D-4 유형에 있는 하단 메뉴들이 나타나 있습니다. 이 하단 메뉴들은 CSS로 이 사이의 바들을 구현을 해놨습니다. 그래서 이것도 CSS 코드로 어떻게 구현이 되어있는지 한번 분석해보시면 될 것 같습니다. 그리고 카피 화이트가 있고 오른쪽에는 셀렉트 박스로 패밀리 사이트가 구성되어 있는 것을 확인하실 수 있겠습니다. 그럼 이어서 문제의 요구사항을 한번 보도록 하겠습니다. 다음에 요구사항을 준수해서 주어진 자료들, 즉 수험자 재봉 파일을 활용해서 시험 시간 내에 웹페이지를 제작 후 총 용량이 5MB를 초과하지 않도록 저장해서 배출해야 합니다. 그래서 실제 작업한 일러스트 파일이나 포토샵 파일이 이 폴더 안에 포함되지 않도록 꼭 주의해주시기 바랍니다. 웹페이지 코딩은 HTML5 기준 웹표준을 준수해야 합니다. 본 강의를 따라 한다면 HTML5 기준을 맞춰서 코딩 작업을 하실 수 있다는 것도 말씀드릴 수 있겠습니다. 이어서 요구사항에 지정되지 않는 요소들은 주제 특성에 맞게 자유롭게 디자인해주시면 되고요. 문제에서 지시하지 않은 와이어 프레임의 영역기율, 레이아웃, 텍스트의 글자체 색상 크기, 요소별 크기, 색상 등은 수험자가 과제명 특성에 맞게 자유롭게 디자인해주시면 되겠습니다. 그러면 주제부터 다시 한번 확인해보도록 하겠습니다. 알뜰 식자재몰이라는 이름의 식자재몰 웹사이트를 제작해주시면 됩니다. 개요를 살펴볼게요. 각종 식자재 판매를 위한 알뜰 식자재몰 웹사이트를 제작하고자 합니다. 이 웹사이트에서는 식자재 품목을 확인할 수 있고 또 회원전용 바로가기 메뉴와 후기가 있는 웹사이트를 제작 요청받았습니다. 이 요구사항에 따라서 메인 페이지를 제작해보도록 할게요. 아래 다에서 제작해야 할 내용을 살펴보도록 하겠습니다. 가장 먼저 메인 페이지를 디자인하고 각각 HTML, CSS, JavaScript 기반의 웹사이트를 제작해주시면 되는데요. 이때 jQuery 오픈소스는 수험자 제공 파일에서 제공하고 있고 이미지, 텍스트 등도 수험자 제공 파일에서 제공하고 있으니 이 파일들을 리소스로 활용해주시면 되겠습니다. 그리고 HTML과 CSS의 각각 캐릭터셋은 UTF-8로 지정해주셔야 한글이 깨지지 않게 나타납니다. 그리고 컬러하이드도 한번 보도록 할게요. 주조색과 보조색은 자유롭게 지정해주시면 되고 배경색은 이 코드 또 기본 텍스트 색도 이 RGB 코드라는 것을 확인해주시면 됩니다. 사이트맵을 한번 보도록 할게요. 앞에서는 메인 메뉴밖에 나타나지 않았는데 실제 각 메인 메뉴에 어떤 서브 메뉴가 나타나야 하는지를 이 사이트맵을 통해서 확인해보실 수 있게 됩니다. 이 알뜰 식사재물 웹사이트는 총 5개의 메인 메뉴를 가지고 있습니다. 또한 서브 메뉴는 각각 다른 숫자만큼의 서브 메뉴들을 가지고 있는데 여기 남은 영역들을 어떻게 처리하는지 코드상에서 또한 다음 페이지에 있는 와이어프레임 그림에서 확인해보시면 될 것 같습니다. 다음으로는 시험 문제에서 와이어프레임을 제시하고 있습니다. 맨 처음에 분석했다시피 와이어프레임의 전체는 브라우저 전체 너비의 100%로 설정해주시면 되고 A영역은 200px 그리고 나머지 B,C,D 영역의 너비는 브라우저 전체 100%에서 A영역의 너비를 뺀 영역만큼을 지정해주시면 되겠습니다. 분석했던 것과 동일하게 이쪽에는 로고가 들어가고요. 그리고 이 메인 메뉴가 A영역에 딱 맞게 지정되어 있는 것을 보실 수 있겠습니다. 실제 D,3,4 유형에는 이쪽에 약간의 공백이 떨어져 있는데요. 이 해당하는 유형들은 이기적의 다른 강의들에서도 해당하는 디자인 스타일의 코드들을 찾아보실 수 있으니 강의나 조서를 활용해주시기 바랍니다. 이렇게 메인 메뉴에 마우스를 올렸을 때 어떤 마우스 메뉴에 올렸는지 이 메뉴가 하이라이트 되어야 하고요. 또한 서브 메뉴에도 마우스를 올렸을 때 하이라이트가 되어야 한다는 세부 영역별 지시사항이 아래에 나타날 것입니다. 그리고 방금 전에 저희가 사이트맵에서 봤었던 이렇게 개수가 맞지 않는 서브 메뉴들은 어떻게 처리되는지 지금 와이어프레임에서 확인해 보실 수 있겠는데요. 이 서브 메뉴의 전체를 한 색깔로 감싸고 있습니다. 그래서 이 메뉴 영역에 배경이 필요할 것이라는 것을 확인해 보실 수 있겠고요. 그리고 각각 서브 메뉴의 개수만큼 가로로 서브 메뉴들을 나열해 주시면 되겠습니다. 그리고 이어서 B 영역을 분석해 보도록 할게요. B 영역은 먼저 서브 메뉴 뒤쪽으로 서브 메뉴가 나타나지 않을 때는 이만큼 영역에 이미지 슬라이드를 채워주시면 됩니다. 이 이미지 슬라이드의 세로 높이를 지정하고 있습니다. 그리고 이제 C 영역을 살펴보도록 하겠습니다. C 영역은 이렇게 두개를 포함하고 있는 영역인데요. 가장 위쪽으로는 바로가기 영역이 있습니다. 바로가기 영역의 높이는 150px이라는 것을 확인해 주시면 되겠습니다. 그리고 그 아래는 250px의 세로 높이를 갖는 공지사항과 갤러리가 각각 절반의 영역을 차지하면서 나타나 있는 것을 보일 수 있습니다. 그리고 마지막으로는 투터의 120px의 높이가 해당된다는 것을 확인하시면 되고 각각 하단 메뉴와 카페가 있고 그리고 패밀리 사이트로 구성되어 있다는 것을 봐주시면 됩니다. C 영역의 공지사항과 갤러리를 다시 한번 살펴볼게요. 각각의 탭으로 별도 구성되어 있다는 것을 보실 수 있고 또한 공지사항의 첫번째를 클릭했을 때는 이렇게 레이어 커버창이 구성되어야 된다는 것을 확인해 주시면 되겠습니다. 그럼 이어서 세부 영역별 지지사항을 살펴보도록 할게요. 먼저 A 영역의 헤더 영역 안에는 로고가 들어가야 하고요. 이 로고는 가로 180px, 세로 100px의 크기로 웹사이트 이미지에 적합한 로고를 직접 디자인해 주시면 됩니다. 그리고 로고명은 헤더 폴더에 제공된 픽셀을 사용해 주시면 됩니다. 그리고 두번째로 헤더 영역에 들어가야 할 것은 메뉴였죠. 맨 앞에서 문제에서 봤던 화이트 구조도 화이트맵을 참고해서 메인 메뉴와 서브 메뉴를 구성해 주시면 됩니다. 먼저 메인 메뉴의 효과를 한번 살펴보도록 할게요. 메인 메뉴 중 하나의 마우스를 올리면 하이라이트가 되고 벗어나면 마우스 아웃되면 하이라이트를 세배시켜 주시면 됩니다. 메인 메뉴를 마우스로 올리면 또한 서브 메뉴 영역이 부드럽게 나타나면서 서브 메뉴가 보이도록 만들어 주시면 되고 메인 메뉴에서 마우스가 벗어나면 서브 메뉴 영역도 부드럽게 사라져 보이면 됩니다. 서브 메뉴 영역의 효과도 살펴볼게요. 서브 메뉴 영역은 메인 페이지의 컨텐츠를 고려해서 배경 색상을 정해 주시면 되고 서브 메뉴 중 하나의 마우스를 올리면 하이라이트가 되고 또 벗어나면 하이라이트를 세배시켜 주시면 됩니다. 마우스가 메인 메뉴를 포함한 서브 메뉴, 전체 메뉴 영역을 벗어나면 서브 메뉴 영역이 부드럽게 사라져 주는 효과를 제공해 주시면 됩니다. 그리고 B 영역도 한번 살펴볼게요. B 영역은 이미지가 들어가 있는 이미지 슬라이드 영역이고요. 이미지 슬라이드라는 폴더에 제공된 3개의 이미지로 제작해 주시면 됩니다. 또한 슬라이드 폴더에 제공된 3개의 텍스트를 각각의 이미지에 적용시켜 주시고 또한 텍스트의 글자체, 굵기, 색상, 크기는 적절하게 설정해서 가독성을 높이고 적정성을 드러나도록 제작해 주시면 됩니다. 그러면 이렇게 이미지 슬라이드의 애니메이션은 어떻게 작업해야 되는지 한번 살펴보도록 할게요. 위쪽에서 이미지를 제작했다면 슬라이드 작업을 해야 하는데 이때 이미지만 바뀌면 안되고 이미지가 위아래 또는 아래에서 위로 이동하면서 변함이야 합니다. 이미지만 바뀌면 안된다는 말에는 이미지 위에 올라가 있는 텍스트도 똑같이 함께 이동해야 한다는 것을 확인해 주시면 되고 이 슬라이드는 매 3초 이내에 하나의 이미지에서 다른 이미지로 변환해 주시면 됩니다. 또한 웹사이트를 열었을 때 자동으로 실행되고 반복통으로 변환되어야 합니다. 그래서 마지막 이미지가 사라졌을 때 다시 첫번째 이미지가 나타나는 방식을 구현해 주시면 되겠습니다. 그럼 다음 C영역, 컨텐츠 영역을 살펴보도록 할게요. 컨텐츠 영역에는 다로가기, 정지사항, 갤러리로 구성되어 있는 것을 와이어프레임에서까지 확인해 볼 수 있겠구요. 다로가기에는 컨텐츠 폴더에 제공된 이미지 파일들이 있습니다. 이 파일들을 활용해서 새로운 웹토넛 디자인을 해서 코드로 작업해 주시면 됩니다. 정지사항은 타이틀 영역과 컨텐츠 영역을 구분해서 표현해 주시면 됩니다. 컨텐츠 영역은 HTML 코딩으로 작성해야 하고 이미지로 수입하면 안된다는 것을 문제에서 지시하고 있구요. 컨텐츠는 컨텐츠 폴더에 제공된 텍스트를 이용해서 제작해 주시면 됩니다. 또한 공지사항의 첫번째 컨텐츠를 클릭했을 경우 레이어 팝업창이 나타나서 실제 공지사항의 내용을 확인할 수 있고 닫기 버튼을 누르면 팝업창이 닫히는 기능으로 구현해 주시면 됩니다. 레이어 팝업의 제목과 내용은 컨텐츠 폴더 안에 텍스트 파일로 제공하고 있습니다. 그리고 갤러리 영역도 살펴볼게요. 컨텐츠 폴더에 제공된 이미지 3개를 사용해서 가로 방향으로 배치합니다. 와이어 프레임을 참고해 주시면 되구요. 갤러리의 이미지에 마우스를 올렸을 때 개체의 투명도에 변화가 있도록 구현해 주시면 되겠습니다. 마지막으로 D영역, 푸터 영역입니다. 푸터 폴더에 제공된 텍스트를 사용해서 하단 메뉴, 커피와 아이템, 패밀리 사이트를 제작해 주시면 됩니다. 여기까지 우리가 작업해야 할 웹사이트의 지시사항들을 확인해 봤는데요. 마지막으로 기술적 준수사항 등 그리고 제출 방법을 확인해 보도록 하겠습니다. 웹페이지 코딩은 HTML5 기준의 웹표준을 준수해야 하기 때문에 HTML 유효성 검사에서 오류가 없도록 작성해야 하는데 실제 시험장에서는 인터넷 사용이 불가하기 때문에 저희가 제공하고 있는 강의와 도서의 코드들을 따라할 수 있는 것을 목표로 해주시면 되겠습니다. 또한 CSS는 별도의 파일로 제작하고 링크시켜야 합니다. 그래서 CSS를 폴더, 그리고 파일 따로 볼링해서 작업해야 한다는 것을 체크해 주시면 되고 CSS 기준 오류가 없도록 코딩해 주시면 되겠습니다. JavaScript 코드도 마찬가지로 별도의 파일로 제작해서 연결해 주셔야 합니다. 그래서 말씀드렸다시피 저희가 작업하고 있는 도서와 동영상 강의에서는 폴더까지도 따로 제작해서 작업하고 있다는 것을 말씀드릴 수 있을 것 같고요. 또한 브라우저에 내장된 개발도구 콘솔탭에 오류가 표시되지 않아야 합니다. 저희가 작업한 다음에 마지막으로 콘솔탭도 확인해 보도록 하겠습니다. 별도로 지정하지 않은 상호작용이 필요한 모든 콘텐츠에는 이렇게 지정했을 때는 탭으로 이동할 수 있어야 합니다. 사이트는 다양한 화면 해상도에서 일반성 있는 페이지 레이아웃을 제공해야 하고 웹페이지의 전체 레이아웃은 테이블 태그가 아닌 CSS를 통한 레이아웃으로 작업해야 합니다. 즉, 레이아웃을 잡을 때 테이블이 아닌 div 태그를 사용해서 영역을 구분해 주셔야 한다는 것을 문제에서 지시하고 있고요. 브라우저에서 CSS를 사용한 함으로 설정한 경우 콘텐츠가 세로로 나열되어야 합니다. 타이틀 텍스트, 바디 텍스트, 메뉴 텍스트에 각 글자체의 굵기, 색상, 크기 등을 적절하게 사용하여 텍스트 간의 위계질서를 직관적으로 나타낼 수 있도록 글자 크기들, 그리고 굵기들을, 색상 크기들을 자유롭게 지정해 주시면 되겠습니다. 모든 이미지에는 이미지에 대한 대체 텍스트를 표현할 수 있는 알트 속성이 있어야 합니다. 마지막으로 제작된 사이트 메인 페이지의 레이아웃, 구성 요소의 크기 및 위치 등은 최신 버전의 MSNG와 구글 크롬에서 동일하게 표시되어야 한다는 것도 말해주시고 있습니다. 배출 방법입니다. 수험자는 기본으로 된 폴더명으로 완성된 작품 파일을 저장해서 배출해야 합니다. 이미지 폴더 안에는 이미지스, 스크립트, CSS 등 자료를 분류해서 저장된 폴더도 포함하고 있어야 하고요. 메인 페이지는 반드시 기본호 바로 아래, 최상위 폴더의 index.html로 저장해서 배출하셔야 합니다. 수험자는 배출하는 폴더에 html을 열었을 때 연결되거나 표시되어야 할 모든 리소스들을 포함해서 배출해야 합니다. 또한 수험자의 컴퓨터가 아닌 책정위원회 컴퓨터에서 정상 작동해야 하기 때문에 이 웹사이트에 필요한 모든 리소스들을 수험자 기본으로 된 폴더 안에 잘 넣어주셔야 한다는 것을 다시 한번 확인해주시고요. 마지막으로 전체 결과물의 용량이 오메가바이트 용량을 초과하지 않도록, 즉 ai 파일이나 psd 파일이 이 폴더 안에 들어가 있지 않도록 꼭 따로 확인해주시면 되겠습니다. 그리고 이어서 수험자의 유의사항들도 한번씩 체크해주시면 되겠는데요. 반드시 검정색 필기도만 시험장 안에서 사용해주셔야 되고요. 연필류도 안된다는 것을 다시 한번 체크해주시면 되겠습니다. 또한 수험에 필요한 소프트웨어 참고자료가 하드웨어에 설치되어 있는지 시험 전에 꼭 확인해주시고 참고자료의 내용 중 오타, 탈자 등이 있을 때는 수험자가 직접 수정해서 작업해주시면 되겠습니다. 수험자는 지참 공부인 수험큐, 신분증, 흑백 필기도구 외에 참고자료 외부 상품은 어떤 물건도 시험 중에 지참할 수 없다는 것을 체크해주시면 되고 시험장 안에 있는 물품들로 활용해주시면 되겠습니다. 수험자가 컴퓨터 활용에 미숙 등으로 인해 시험의 진행이 어렵다고 판단되었을 경우에는 시험을 중지시키고 실격처리될 수 있으니 미리 준비를 잘 해주시면 되겠습니다. 갖다 가면 수험자 본인의 비번호, 수험번호의 이름을 가진 폴더에 완성된 작품의 파일만을 저장해주시면 됩니다. 모든 작품을 감독위원, 지점위원이 검토해서 복사된 작품이 있을 경우에는 관련된 수험사를 모두 구성처리함으로 유의해주시면 되겠고 당시의 컴퓨터 작업으로 상태에 무리가 가지 않도록 적절히 몸풀기를 하면서 작업해주시면 되겠습니다. 마지막으로 실격사항에 대한 안내인데요. 수험자 본인이 수험 도중 시험에 대한 포기 의사를 표하는 경우, 또한 작업범위, 용량이나 시간을 초과하거나 요구사항과 성격이 다른 경우 수험위원이 판단하게 됩니다. 그리고 슬라이드가 자바스크립트, CSS 중 하나 이상의 방법을 이용해서 제작되지 않은 경우 즉, 움직이는 슬라이드를 제작하지 않고 이미지 하나만 배치한 경우에도 실격처리가 되니까 이 부분에는 실격처리 되지 않도록 꼭 움직이는 슬라이드를 잘 익혀주시면 될 것 같습니다. 수험자의 미숙으로 비번호 폴더에 완성된 작품 파일을 저장하지 못했을 경우에도 실격되니 꼭 완성된 파일이 바탕화면에 비번호 폴더에 들어가 있는지 마지막으로 체크해주시면 될 것 같습니다. 압축 프로그램은 절대 사용하시면 안되고요. 그리고 가재기순의 20% 이상이 완성되지 않은 경우에도 실격처리 되니 꼭 20%를 넘고 이미지 슬라이드를 구현할 수 있도록 확인해주시면 될 것 같습니다. 지급 재료는 수험자료의 USB 메모리 그리고 수험장당 1개씩 수험위원이 가지고 있는 USB 메모리가 미시험에 지급됩니다.