Skill/웹디자인기능사

웹디자인기능사 실기문제 - 공개문제 분석(요구사항, 와이어프레임, 준수사항)

oodada 2023. 9. 15. 23:12

실기자료

https://github.com/oodada/exam-webdesign

  • 웹디자인기능사 공개문제 바로가기
  • 위 링크 웹디자인기능사 공개문제를 다운 받으신 후 공개문제 위주로 실기연습하시면 됩니다.
  • 20개 유형 중 한 개의 문제가 출제되니 모든 문제를 풀어보시고 시험보시면 됩니다.

실기 A-1 요구사항

1. 시험시간 내에 웹페이지를 제작 후 5MB 용량이 초과되지 않게 저장 후 제출한다.

  • 작업 완료 후 폴더를 오른쪽 클릭 후 속성을 확인하시면 작업 폴더의 용량을 확인할 수 있습니다.

2. 웹페이지 코딩은 HTML5 기준 웹 표준을 준수한다.

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>This is a Heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

3. 메인페이지를 디자인하고 HTML, CSS, JavaScript 기반의 웹 페이지를 제작한다.

(이때 jQuery 오픈소스, 이미지, 텍스트 등의 제공된 리소스를 활용하여 제작할 수 있다.)

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="./css/style.css">
<script src="./js/jquery-3.5.1.min.js"></script>
<script src="./js/script.js"></script>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

4. HTML, CSS의 charset는 utf-8로 해야 한다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="./css/style.css">
<script src="./js/jquery-3.5.1.min.js"></script>
<script src="./js/script.js"></script>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

5. 컬러가이드

- 요구사항에 명시되어 있는 컬러가이드에 맞춰 작업하시면 됩니다.

실기 A-1 사이트맵(Site map)

  • 사이트 상단 메뉴 구성입니다.
  • 탑, 아우터, 팬츠, 악세서리는 메인메뉴(1depth)이고
  • 메인 메뉴를 마우스 오버시 서브메뉴가 나타나게 작업합니다.

실기 A-1 와이어프레임(Wireframe)

  • 사이트 전체의 레이아웃과 구성요소, 사이즈를 나타냅니다.
  • 각 섹션의 가로, 세로 값과 항목을 확인합니다.
    • header 안에 logo, nav
    • 이미지 슬라이드
    • contents 안에 tab(공지사항/갤러리), 배너, 바로가기
    • footer 안에 logo, copyright, sns
    • layer pop

웹디자인기능사 기술적 준수사항

  1. 웹페이지 코딩은 HTML5 기준 웹 표준을 준수하여야 하며, HTML 유효성검사 (W3C validator)에서 오류(‘ERROR’)가 없도록 코딩하여야 한다.
    ※ HTML 유효성검사 서비스는 시험시 제공하지 않는다.(인터넷 사용불가) 
<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>
</html>

  1. CSS는 별도의 파일로 제작하여 링크하여야 하며, CSS3 기준 (W3C validator)에서 오류(‘ERROR’)가 없도록 코딩되어야 한다.

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="./css/style.css">
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>
  1. JavaScript 코드는 별도의 파일로 제작하여 연결하여야 하며 브라우저(Google Chrome)에 내장된 개발도구의 Console 탭에서 오류(‘ERROR’)가 표시되지 않아야 한다.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="./css/style.css">
<script src="./js/jquery-3.5.1.min.js"></script>
<script src="./js/script.js"></script>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>
- F12 > 개발자창 > 콘솔 탭에 오류가 없어야 합니다.

  1. 상호작용이 필요한 모든 콘텐츠(로고, 메뉴, Slide, 공지사항, 갤러리 등)는 임시링크(예:#)되어야 하며 ‘Tab’() 키로 이동 선택할 수 있어야 한다.

    • 링크 작업 시 링크를 비워두지 말고 '#'을 넣어둡니다.
      <ul class="nav-depth2">
<li><a href="#">블라우스</a></li>
<li><a href="#">티</a></li>
<li><a href="#">셔츠</a></li>
<li><a href="#">니트</a></li>
</ul>
    • A-1 샘플
    • 위 링크를 클릭해 페이지를 연 후 tab 키를 누르면 logo에 점선박스가 생긴다. 연속에서 누르면 점선 박스가 이동한다. 이와 같이 tab 키를 눌러 이동 선택이 가능하도록 해야 한다.

  2. 사이트는 다양한 화면 해상도에서 일관성 있는 페이지 레이아웃을 제공해야 한다.

    • 브라우저 크기가 크거나 작아도 같은 레이아웃을 제공해야 한다.

  3. 웹 페이지 전체 레이아웃은 Table 태그 사용이 아닌 CSS를 통한 레이아웃 작업으로 해야 한다.

- table 태그는 사용하면 안됩니다. 
<table>
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
</table>
- div와 css를 이용한 레이아웃 작업
<div class="header">
  <h1 class="logo">
      <a href="#">JUST쇼핑몰</a>
  </h1>
</div>
  1. 브라우저에서 CSS를 “사용안함”으로 설정한 경우 콘텐츠가 세로로 나열된다.
    • html 에서 css 링크를 삭제했을 때
    • 브라우저의 콘텐츠가 세로로 나열되어야 한다.

  1. 타이틀 텍스트(title text), 바디 텍스트(body text), 메뉴 텍스트(menu text)의 각 글자체/굵기/색상/크기 등을 적절하게 설정하여 사용자가 텍스트간의 위계질서(hierarchy)를 직관적으로 알 수 있도록 한다.

    • 타이틀은 h1, h2 등의 타이틀 태그,
      • 링크는 a 태그,
      • 중요한 글씨는 strong,
      • 단락은 p 태그를 사용해
      • 텍스트 간의 위계질서를 직관적으로 알 수 있도록 한다.

  1. 모든 이미지에는 이미지에 대한 대체 텍스트를 표현할 수 있는 alt 속성이 있어야 한다.
<div class="slide">
  <ul>
    <li>
      <a href="#">
          <img src="./images/slide1.jpg" alt="open event 딱 일주일만! 오픈기념 15% 계절마다 함께 하기 좋은 붓컷데님 must have denim">
      </a>
    </li>
    <li>
      <a href="#">
          <img src="./images/slide2.jpg" alt="2021 New purplia OPEN EVENT 3가지 혜택 받으러가기">
      </a>
    </li>
    <li>
      <a href="#">
          <img src="./images/slide3.jpg" alt="더할수록 커지는 MADE 혜택 1+1 두 장 구매시 15% 할인 ALL-DAY 차르르 부드러운 모달 티셔츠">
      </a>
    </li>
  </ul>
</div>
  1. 제작된 사이트 메인페이지의 레이아웃, 구성요소의 크기 및 위치 등은 최신버전의 Internet Explorer와 Google Chrome 에서 동일하게 표시되어야 한다.
  • Internet Explorer 최신버전(11버전) 브라우저
    • F12 > 개발자모드 > 오른쪽 상단에 11(최신버전)로 표시 되어 있는지 확인 후 디자인 확인
      )
  • chrome 브라우저

제출방법

  1. 수험자는 비번호로 된 폴더명으로 완성된 작품 파일을 저장하여 제출한다.

  2. 폴더 안에는 images, script, css 등의 자료를 분류하여 저장한 폴더도 포함되어 있어야 하며, 메인페이지는 반드시 최상위 폴더에 index.html로 저장하여 제출해야 한다.

    • css 파일은 css 폴더에
    • js 파일은 js 폴더에
    • image 파일은 images 폴더에 넣어준다.

  3. 수험자는 제출하는 폴더에 index.html을 열었을 때 연결되거나 표시되어야 할 모든 리소스들을 포함하여 제출해야 하며 수험자의 컴퓨터가 아닌 채점위원의 컴퓨터에서 정상 작동해야 한다.

    • 첫페이지의 파일 이름은 무조건 index.html 로 설정해주어야 한다.

  4. 전체 결과물의 용량은 5MB용량이 초과되지 않게 제출하며 ai, psd 등 웹서비스에 사용하지 않는 파일은 제출하지 않는다.

  • html, 이미지 파일, css, js 파일만 제출한다.
  • 폴더를 오른쪽 클릭 후 속성을 눌러 폴더의 용량 확인 후 5MB를 넘지 않도록 한다.

수험자 유의사항

  1. 바탕화면에 수험자 본인의 “비번호” 이름을 가진 폴더에 완성된 작품의 파일만을 저장하시오.

  2. 다음 사항에 대해서는 채점 대상에서 제외 하오니 유의하시기 바랍니다.
    나) 실격
    (1) 지정 작업범위(용량)를 초과한 경우
    (2) 요구사항과 현격히 다른 경우(채점위원이 판단)
    (3) Slide가 JavaScript(jQuery포함), CSS 중 하나 이상의 방법을 이용하여 제작되지 않은 경우.
    ※ 예) Flash로 제작한 Slide는 인정되지 않으며, 움직이는 Slide를 제작하지 않고 이미지 하나만 배치한 경우도 실격처리 됨.
    (4) 수험자 미숙으로 비번호 폴더에 완성된 작품 파일을 저장하지 못했을 경우
    (5) 압축프로그램을 사용하여 작품을 압축 후 제출한 경우

저작자표시 비영리 동일조건

'Skill > 웹디자인기능사' 카테고리의 다른 글

웹디자인기능사 실기 - 기본 셋팅, 와이어프레임 제작  (0) 2023.09.15
웹디자인기능사 실기 - 이미지 생성, vscode 설치, chrome 설치, 파일 생성  (0) 2023.09.15
웹디자인기능사 필기&실기자료  (0) 2023.09.15
웹디자인기능사 시험정보  (0) 2023.09.15
웹디자인기능사 실기 문제&답안  (2) 2021.02.20

'Skill/웹디자인기능사'의 다른글

  • 현재글웹디자인기능사 실기문제 - 공개문제 분석(요구사항, 와이어프레임, 준수사항)

관련글

티스토리 친구하기

티스토리툴바