2025 웹디자인개발기능사 필기시험 관련 문항 - 프로토타입 및 심미성 설계

 

안녕하세요 찐망고입니다.

웹디자인개발기능사 문항이 올해부터 많이 바뀌어서 시험본 제자들과 SNS의 댓글로 취합을 해보고 

전자책을 만들어볼까 했는데요 (무료배포예정)

아무래도 취합된 자료가 많지 않아 일단 블로그에 공유 해봅니다.

 

PART2는 프로토타입 및 심미성 설계 관련 문항이고 총 45문제입니다.

 

1. 디자인의 3대 요소로 올바르게 짝지어진 것은?

• a) 색, 맛, 냄새
• b) 재료, 양식, 기법
• c) 이미지, 사운드, 레이아웃
• d) 형태, 색, 질감

디자인의 기본 요소는 형태(Form), 색(Color), 질감(Texture)으로, 모든 시각적 구성의 기초가 되는 조형 요소

이 세 가지는 시각적 인식과 조화로운 배치에 중요한 역할을 함

 

핵심 개념:

디자인의 조형 요소 = 형태, 색, 질감

시각 디자인의 기본 단위

 

2. 디자인에서 '균형'의 원리는 무엇을 의미하는가?

• a) 모양의 통일성
• b) 요소의 시각적 안정감
• c) 색상의 대비
• d) 선의 방향성

균형은 시각적 무게감이 화면 전체에 안정적으로 분포되는 것을 의미함.

좌우 대칭, 비대칭, 복합형 등 다양한 방식으로 이루어질 수 있음.

핵심 개념:

균형 = 시각적 무게의 분산

대칭적/비대칭적 균형이 모두 가능

 

3. 다음 중 디자인의 목적이 아닌 것은?

• a) 미적 가치 제공
• b) 기능적 문제 해결
• c) 가격 경쟁력 확보
• d) 정보 전달

디자인의 목적은 주로 미적 표현, 정보 전달, 사용성 향상 등에 있으며,

가격은 마케팅/전략 요소이지 디자인 고유 목적은 아님

핵심 개념:

디자인 목적 = 정보 전달, 심미성, 사용자 중심성

가격은 제품 전략의 일환이지 디자인의 직접 목적은 아님

 

4. 조형 요소 중 ‘점, 선, 면’의 활용이 적절한 것은?

• a) 기초 시각 언어 구성
• b) 코드 구조 설계
• c) 프로토콜 설계
• d) 이미지 압축

‘점-선-면’은 시각 디자인의 가장 기본적인 표현 단위로, 형태를 구성하고 시각적 리듬을 만드는 기초 요소

핵심 개념:

점: 시각적 시작점

선: 방향, 흐름 표현

면: 공간 구성

 

5. 질감 표현이 필요한 디자인 요소는?

• a) 타이포그래피
• b) 아이콘
• c) 버튼
• d) 배경 이미지

질감은 표면의 느낌을 시각적으로 표현하는 데 쓰이며, 배경에 많이 적용함

특히 웹이나 UI 디자인에서 시각적 분위기를 조성하는 역할을 함

핵심 개념:

질감(Texture): 표면의 시각적 감각

배경 질감은 분위기 조성에 중요한 요소

 

6. 다음 중 시각적 강조를 위한 디자인 원리는?

• a) 통일성
• b) 대비
• c) 비례
• d) 균형

대비(Contrast)는 두 요소 간의 차이를 극대화하여 강조 효과를 만드는 원리.

색상, 크기, 형태 등에서 대비를 주면 사용자의 시선을 끌 수 있음.

핵심 개념:

대비 = 차이 강조

강조 목적: 시선 유도, 정보 구분

 

7. 리듬감 있는 반복은 어떤 원리와 관련이 있는가?

• a) 대칭
• b) 강조
• c) 비율
• d) 반복

반복(Repeat)은 동일하거나 유사한 요소를 반복 배치하여 리듬감과 통일감을 주는 디자인 원리.

웹 UI에서 아이콘, 패턴 등에 자주 사용

핵심 개념:

반복 = 시각적 리듬 형성

일관성 유지, 브랜드 아이덴티티 강화

 

8. 타이포그래피에서 가장 중요하게 고려해야 할 요소는?

• a) 가독성
• b) 색상
• c) 크기
• d) 패딩

타이포그래피에서 가장 중요한 것은 읽기 쉬움(가독성)

이는 폰트 선택, 크기, 줄 간격, 색 대비 등을 종합적으로 고려해 가독성(legibility)을 확보해야 함

핵심 개념:

가독성 = 읽기 쉬운 글자 디자인

사용자 친화적 정보 전달

 

9. 다음 중 조형 원리가 아닌 것은?

• a) 강조
• b) 균형
• c) 크기
• d) 통일

크기(Size)는 조형 ‘요소’에 해당하지 ‘원리’는 아님.

조형 원리는 디자인을 구성하고 정렬하는 방법으로서, 균형, 대비, 통일, 강조 등이 있어.

핵심 개념:

조형 요소: 점, 선, 면, 크기 등

조형 원리: 균형, 통일, 대비, 강조 등

 

10. 웹디자인에서 대비 효과를 줄 수 있는 방법은?

• a) 그라디언트
• b) 명도 차이
• c) 애니메이션
• d) 폰트 크기

명도(Brightness) 차이를 활용하면 시각적 요소 간 대비를 줄 수 있음.

어두운 배경에 밝은 텍스트를 쓰는 것이 대표적인 예

핵심 개념:

대비를 주는 방법 = 명도 차, 색상 차, 형태 차

접근성 향상에도 중요

 

11. 시각적 계층을 형성하는 데 가장 큰 영향을 주는 요소는?

• a) 크기
• b) 그림자
• c) 선택자
• d) 마진

크기는 정보의 중요도를 시각적으로 표현하는 가장 직관적인 방법임

큰 제목, 작은 본문처럼 요소 간의 크기 차이는 시각적 계층 구조를 만드는 핵심 원리임

핵심 개념:

시각 계층 = 시선 흐름 설계

크기 차이는 정보의 우선순위 표현

 

12. 다음 중 시각적 흐름을 자연스럽게 만드는 요소는?

• a) 강한 명도
• b) 무작위 배치
• c) 반복된 텍스트
• d) 시선 유도 배치

웹 디자인에서 시선의 흐름은 배치 구조에 따라 자연스럽게 결정됨.

왼쪽에서 오른쪽, 위에서 아래로 흐르도록 유도하거나, 시각적 강조점을 배치하는 것이 효과적

핵심 개념:

시각 흐름 = 시선 이동 방향

자연스러운 UX 구현

 

13. 이미지의 해상도 표현 단위는?

• a) cm
• b) dpi
• c) kg
• d) ms

DPI(Dots Per Inch)는 인쇄나 디지털 이미지의 해상도를 나타내는 단위임.

해상도가 높을수록 더 선명한 이미지. 웹은 보통 72~96dpi, 인쇄는 300dpi 이상 사용

핵심 개념:

DPI = 해상도 단위

이미지 품질, 인쇄 퀄리티와 직결됨

 

14. 컬러를 통해 감정을 전달할 수 있는 이유는?

• a) 색은 심리적 반응을 유도한다
• b) 색은 소리를 전달한다
• c) 색은 위치를 고정한다
• d) 색은 텍스트를 제거한다

색상은 인간의 감정에 직접적인 영향을 줄 수 있음.

예를 들어, 빨강은 긴장과 자극, 파랑은 안정과 신뢰, 초록은 자연과 안정감 등을 상징

핵심 개념:

컬러 심리학 = 감정과 색의 연관성

디자인에서 감성 유도 전략으로 사용

 

15. UX/UI에서 시각적 피드백에 해당하는 것은?

• a) 배경음
• b) 페이지 전환
• c) 버튼 클릭 시 애니메이션
• d) 콘텐츠 자동 저장

UX에서는 사용자의 행동에 대한 시각적 피드백이 중요.

버튼을 클릭했을 때 색이 바뀌거나 작게 눌리는 효과는 사용자에게 "작동했다"는 반응을 전달.

핵심 개념:

피드백 = 사용자와 시스템의 상호작용 신호

시각적 피드백은 UX의 기본

 

16. 프로토타입의 주된 목적은?

• a) 배포용 완성본
• b) 이미지 디자인
• c) 인터랙션 검증
• d) 배경 꾸미기

프로토타입은 웹사이트나 앱을 정식 개발하기 전, 디자인과 흐름을 미리 시뮬레이션하는 단계.

사용자 인터랙션과 흐름을 테스트하기 위해 사용.

핵심 개념:

프로토타입 = 테스트용 시뮬레이션

피드백과 개선을 위한 핵심 도구

 

17. 하이 피델리티(High-Fidelity) 프로토타입의 특징은?

• a) 종이 스케치
• b) 실제와 유사한 그래픽과 인터랙션
• c) 기능 없는 목업
• d) 비정형 정보 구조

하이 피델리티는 실제 제품과 거의 유사한 수준의 외형과 동작을 가진 프로토타입을 의미함.

시각적 완성도와 사용자 흐름을 정밀하게 구현함.

핵심 개념:

Fidelity = 충실도

High-Fi = 완성도 높은 테스트 모델

 

18. 프로토타입 도구로 적합하지 않은 것은?

• a) Figma
• b) Adobe XD
• c) Axure
• d) Excel

Figma, XD, Axure는 UI 설계 및 인터랙션 테스트를 위한 전문 도구.

Excel은 스프레드시트 도구로 프로토타입 제작에 적합하지 않음

핵심 개념:

프로토타입 도구 = UI 구성 + 인터랙션 시뮬레이션 가능해야 함

 

19. 프로토타입에서 클릭 가능한 요소는 무엇을 의미하는가?

• a) 인터랙션
• b) 그리드
• c) 백엔드
• d) 보안모듈

인터랙션은 사용자와 시스템 사이의 작용/반응 관계.

클릭, 터치, 호버 등으로 요소와 상호작용하며, 피드백을 확인할 수 있어야 함.

핵심 개념:

인터랙션 디자인 = 사용자의 조작 → 시스템 반응

 

20. 프로토타입을 제작할 때 가장 먼저 고려해야 할 것은?

• a) 파일 압축률
• b) 폰트 라이선스
• c) 사용자 흐름
• d) 이미지 포맷

프로토타입은 사용자의 행동 경로를 기반으로 설계돼야 함.

어떤 버튼을 누르면 어디로 이동하는지, 어떤 순서로 콘텐츠를 소비하는지를 계획하는 게 핵심

핵심 개념:

사용자 흐름(Flow) = UX의 기반

흐름 설계가 프로토타입 구조를 결정

 

21. 사용성 조사의 대표적인 방법은?

• a) 마케팅 분석
• b) 코드 최적화
• c) 사용자 테스트
• d) 서버 모니터링

사용자 테스트(Usability Testing)는 실제 사용자를 대상으로

웹사이트의 직관성, 효율성, 만족도를 측정하는 대표적인 조사 방법

핵심 개념:

사용성 조사 = 실사용자 중심 평가

직관성, 효율성, 오류율 등 측정

 

22. 사용성 조사의 핵심 목적은?

• a) 사용자 불편 요소 발견
• b) 사이트 보안 점검
• c) 광고 효과 측정
• d) API 속도 테스트

사용성 조사의 목적은 사용자가 실제로 불편해하는 점을 파악하고 이를 개선하는 데 있음.

기능 오류, 복잡한 인터페이스, 로딩 시간 등을 찾아냄.

핵심 개념:

사용성 조사 = UX 개선의 출발점

사용자 중심 문제점 탐색

 

23. A/B 테스트란 무엇인가?

• a) 서버 비교 실험
• b) 두 가지 버전의 비교 실험
• c) 이미지 배치 실험
• d) 색상표 변경 실험

A/B 테스트는 같은 콘텐츠를 두 가지 방식으로 구성함 

사용자의 반응을 비교하고 어떤 것이 더 효과적인지를 데이터로 분석하는 방법

핵심 개념:

A/B = 두 버전 비교

전환율(CTR), 클릭률, 만족도 등 측정

 

24. 히트맵 분석이 제공하는 정보는?

• a) 텍스트 길이
• b) HTML 구조
• c) SEO 등급
• d) 사용자 클릭 위치 분포

히트맵은 사용자가 어디를 클릭하거나 시선을 오래 두는지를 시각적으로 보여주는 도구.

UI 개선, CTA 위치 분석 등에 활용

핵심 개념:

히트맵 = 클릭, 스크롤, 시선 분포 시각화

시각적 피드백 기반 UX 분석

 

25. 다음 중 정량적 사용자 조사에 해당하는 것은?

• a) 심층 인터뷰
• b) 포커스 그룹
• c) 온라인 설문
• d) 관찰 노트 분석

정량적 조사는 수치로 측정 가능한 데이터 수집 방식.

온라인 설문은 대량의 응답을 수치화하여 분석 가능하기 때문에 여기에 해당

핵심 개념:

정량 = 숫자 기반 분석

정성 = 감정·의견 중심 분석

 

26. 사용성 테스트는 어떤 단계에서 수행되는가?

• a) 개발 완료 후
• b) 디자인 프로토타입 단계
• c) 배포 이후
• d) 콘텐츠 작성 전

사용성 테스트는 디자인이 완성되기 전 사용자 흐름을 미리 확인하기 위해 프로토타입 단계에서 수행하는 것이 일반적

이 단계에서 사용자 피드백을 반영해 디자인을 개선할 수 있음

핵심 개념:

테스트는 완성 전, 프로토타입 단계에서

사용자 관점에서 검증하는 과정

 

27. 사용성 테스트의 주요 평가 항목이 아닌 것은 ?

• a) 효율성
• b) 만족도
• c) 정확성
• d) 서버 속도

사용성 테스트는 사용자의 행동과 감정에 기반한 평가로, 서버 속도는 기술적인 성능 평가에 가까움.

대신 효율성, 오류율, 만족도 등이 주요 항목임

핵심 개념:

주요 항목: 효율성, 정확성, 만족도

기술 성능은 별도 영역

 

28. 사용성 테스트에서 사용되는 도구가 아닌 것은?

• a) Premiere Pro
• b) Hotjar
• c) UserTesting
• d) Lookback

Premiere Pro는 영상 편집 도구지, 사용자 행동 분석 도구는 아님.

나머지는 실제 사용성 테스트 플랫폼으로, 화면 녹화, 클릭 분석 등을 제공

핵심 개념:

Hotjar, Lookback, UserTesting = 실사용 피드백 수집 도구

UX 조사에 특화

 

29. 사용성 테스트 결과 반영 시 고려해야 할 것은?

• a) 개발자의 의견
• b) 사용자의 피드백
• c) 경영진의 요구
• d) 유행 색상

사용성 테스트의 핵심은 사용자 중심 개선. 실사용자의 불편사항과 제안을 바탕으로 UI/UX를 개선하는 것이 목적

핵심 개념:

피드백 기반 수정

사용자의 경험이 최우선

 

30. 다음 중 사용성 테스트 결과 분석 항목으로 적절한 것은?

• a) 해시태그 수
• b) 광고 클릭률
• c) 실수 빈도
• d) 텍스트 길이

사용자가 특정 작업을 수행하는 동안 발생하는 오류나 실수의 빈도는 사용성 분석의 핵심 지표.

이를 통해 인터페이스의 복잡도를 판단할 수 있음

핵심 개념:

실수 빈도 = UI 직관성의 지표

오류율이 높으면 UX 개선이 필요

 

31. 사용성 분석 후 가장 먼저 수행할 일은?

• a) 문제점 도출
• b) 광고 세팅
• c) 리뉴얼 기획
• d) 서버 세팅

사용성 테스트가 끝나면 먼저 해야 할 일은 수집된 데이터를 분석해 문제점을 도출하는 것

그 다음 개선안을 기획하고 실행하게 됨

핵심 개념:

분석 → 문제 도출 → 개선안 기획

사용자 기반 데이터 중심

 

32. 테스트 결과를 바탕으로 디자인을 변경하는 것은?

• a) 기획 회의
• b) 보안 점검
• c) 리서치 정리
• d) 피드백 기반 개선

사용성 테스트 이후의 핵심 작업은 테스트 피드백을 바탕으로 디자인을 조정하는 일.

이 과정을 통해 사용자 경험이 실제로 개선될 수 있음

핵심 개념:

피드백 → 반영 → 디자인 개선

반복적인 UX 개선 사이클

 

33. A/B 테스트에서 측정하지 않는 것은?

• a) 전환율
• b) 서버 메모리 사용량
• c) 클릭률
• d) 체류 시간

A/B 테스트는 주로 사용자의 행동 반응을 비교하는 실험.

반면 서버 메모리 사용량은 시스템 성능 측정이라 범위에서 벗어남

핵심 개념:

A/B 측정 요소: 클릭률, 전환율, 체류 시간

서버 성능은 별도 모니터링 항목

 

34. 테스트 결과 보고서에 포함되지 않아도 되는 것은?

• a) 경영 전략
• b) 사용자 오류 사례
• c) 수정 전후 비교
• d) 사용자 반응 요약

사용성 테스트 보고서는 UI/UX와 관련된 사용자 행동과 반응 중심으로 작성함.

경영 전략은 보고서의 주요 목적과 거리가 있음.

핵심 개념:

테스트 보고서 = 사용자 행동 데이터 요약

전략 수준 내용은 별도 보고

 

35. 분석 보고서 작성 시 가장 중요한 점은?

• a) 디자인 컬러
• b) 디자인 트렌드
• c) 객관적 데이터 기반
• d) 폰트 일관성

분석 보고서는 개인 의견이 아닌 수치와 관찰을 기반으로 객관적 데이터에 따라 작성돼야 신뢰성과 활용도가 높아짐

핵심 개념:

데이터 기반 = 객관성, 타당성 확보

수치 자료와 행동 로그 활용

 

36. 다양한 디바이스에 동일한 HTML 구조를 제공하는 방식은?

• a) 적응형 웹
• b) 반응형 웹
• c) 플러그인 기반
• d) 서버 측 렌더링

반응형 웹(Responsive Web Design)은 하나의 HTML 문서에 다양한 미디어 쿼리를 적용,

브라우저 크기에 따라 자동으로 레이아웃을 조정하는 방식임

핵심 개념:

한 코드, 다양한 화면 대응

CSS 미디어 쿼리 사용

 

37. 미디어 쿼리는 무엇을 제어하기 위한 CSS 기능인가?

• a) 사용자 입력
• b) 서버 반응
• c) 화면 크기와 특성
• d) 폰트 등록

미디어 쿼리는 CSS에서 화면의 해상도, 너비, 높이, 방향 등을 기준으로 조건에 따라 스타일을 다르게 적용할 수 있는 기능.

핵심 개념:

반응형 웹의 핵심 기술

디바이스 특성 감지 → 스타일 변경

 

38. 다음 중 접근성 향상을 위한 요소는?

• a) 화려한 애니메이션
• b) 낮은 명도 대비
• c) 스크린 리더 지원
• d) 작은 클릭 영역

웹 접근성(Web Accessibility)은 장애 유무와 상관없이 누구나 콘텐츠에 접근할 수 있도록 하는 설계 원칙.

스크린 리더는 시각장애인을 위한 핵심 기능 중 하나

핵심 개념:

접근성 = 포용적 디자인

시각, 청각, 인지 약자 고려

 

39. 디바이스별 UI 테스트 시 확인할 요소가 아닌 것은?

• a) 터치 반응
• b) 배터리 용량
• c) 해상도 대응
• d) 클릭 타겟 크기

UI 테스트에서는 디자인과 사용성 중심으로 확인하지, 배터리나 하드웨어 성능은 시스템 테스트 항목

핵심 개념:

테스트 포인트 = 해상도, 반응속도, 터치 범위 등

하드웨어 상태는 비핵심

 

40. 접근성을 위한 색상 설정 기준은?

• a) 비슷한 명도의 색상 조합
• b) 보색 사용 금지
• c) 충분한 명도 대비 확보
• d) 색상만으로 정보 전달

색상 대비는 저시력 사용자가 콘텐츠를 구분하는 데 매우 중요.

WCAG(Web Content Accessibility Guidelines)에서는 특정 비율 이상의 대비를 권장

핵심 개념:

명도 대비 = 배경과 텍스트 구분

기준: 텍스트/배경 4.5:1 이상 권장

 

41. 모바일 우선 설계(Mobile First)의 주요 이점은?

• a) 데스크톱 화면 우선 설계
• b) 빠른 초기 로딩
• c) 고해상도 비디오 자동재생
• d) 마우스 인터랙션 우선

모바일 퍼스트(Mobile First)는 작은 화면과 저사양을 먼저 고려하는 방식이기 때문에

초기 로딩 속도와 필수 기능 중심으로 설계되어 퍼포먼스 최적화에 유리

핵심 개념:

모바일 → 태블릿 → PC 순

핵심 기능 우선, 점진적 확장

 

42. 반응형 이미지 구현에 사용하는 HTML 속성은?

• a) <meta>
• b) srcset
• c) type
• d) autoplay

<img> 태그의 srcset 속성을 사용하면 브라우저는 화면 해상도와 너비에 따라

최적의 이미지를 자동으로 선택해 불러올 수 있음

핵심 개념:

srcset = 해상도별 이미지 제공

반응형 콘텐츠 구성

 

43. 다크모드 설계의 장점으로 적절한 것은?

• a) 전력 소모 증가
• b) 시인성 저하
• c) 눈의 피로 감소
• d) 가독성 감소

다크모드는 낮은 밝기 환경에서 눈의 피로를 줄이고, OLED 디바이스에서는 전력 소모도 감소시킬 수 있음.

트렌드 측면에서도 각광받는 디자인 기법

핵심 개념:

명암 대비 최적화

가독성 유지를 위한 색상 설계 필요

 

44. 다양한 디바이스 테스트를 위한 대표 브라우저 도구는?

• a) Illustrator
• b) Notion
• c) Chrome DevTools
• d) WordPress

Chrome 개발자 도구(DevTools)의 디바이스 모드는 해상도와 터치 환경을 가상으로 테스트할 수 있음

모바일, 태블릿, PC 레이아웃 확인 가능.

핵심 개념:

크로스 디바이스 테스트

실시간 CSS 조정 기능 포함

 

45. 다음 중 반응형 레이아웃 설계에 가장 적합한 CSS 기술은?

• a) z-index
• b) margin
• c) grid
• d) static position

CSS Grid Layout은 2차원(행+열) 구조를 쉽게 다룰 수 있어 복잡한 반응형 레이아웃 설계에 적합.

display: grid와 함께 미디어 쿼리를 활용

핵심 개념:

CSS Grid = 반응형 레이아웃 설계의 중심

Flex는 1차원, Grid는 2차원 구조

 

다음은 PART3 색채 계획 및 구현 관련해서 포스팅 하려고합니다.

이번 시험에 색관련 문제가 많이 나왔다 해서 많이 만들어볼예정 😊