2025 웹디자인개발기능사 필기시험 관련 문항 - 기초 데이터 및 프로토타입 설계

 

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

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

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

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

 

PART1은 기초 데이터 및 프로토타입 설계관련 문항이고 총 40문제입니다.

 

 

1. 다음 중 웹디자인 프로젝트의 기초데이터로 가장 적절한 것은?

• a) 광고비
• b) 사용자 요구사항
• c) 회계 보고서
• d) 회사 내부 인사정보

사용자 요구사항은 웹디자인의 방향을 결정짓는 핵심 기초데이터

기초데이터 = 사용자 요구, 시장 분석, 기술요건 
광고비는 마케팅 예산에 해당하고, 웹디자인의 기능/구조를 결정짓는 기초정보는 아님

회계보고서는 회사의 재무 정보로, 디자인이나 사용자 경험 설계에는 직접적인 영향 없음

내부 인사정보는 보안·관리 대상이지 디자인 의사결정에는 필요하지 않음

2. 경쟁사 분석 시 주로 고려하는 항목이 아닌 것은?

• a) 기능
• b) 가격 정책
• c) 팀 구성원
• d) 디자인 트렌드

팀 구성원은 경쟁 제품 분석 시 핵심 요소가 아님

경쟁사 분석 = 기능, 디자인, 가격, UI/UX 전략 등

3. 데이터의 분류로 올바르지 않은 것은?

• a) 정성적 데이터
• b) 정량적 데이터
• c) 실시간 데이터
• d) 감정 데이터

감정 데이터는 공식적인 데이터 분류로 사용되지 않음

데이터 분류 = 정성적, 정량적, 실시간 데이터 등

정성적 데이터 (Qualitative Data) = 숫자로 표현할 수 없는 감각적, 주관적 정보

예) 사용자 인터뷰, 만족도 표현, 관찰 기록 -> UX 리서치, 사회조사, 인터뷰 분석

정량적 데이터 (Quantitative Data) = 수치화 가능한 정보

예) 클릭 수, 페이지뷰, 전환율 등 -> 통계 분석, 마케팅, 실험 결과 측정

실시간 데이터 (Real-time Data) = 수집 즉시 처리되는 정보

예) 실시간 방문자 수, 실시간 위치 정보 등 -> 웹 분석, IoT, 실시간 모니터링, 서버 로깅

4. 사용자 행동 데이터를 분석할 수 있는 도구는?

• a) Figma
• b) Photoshop
• c) Google Analytics
• d) Visual Studio

Google Analytics는 방문자 행동 데이터를 분석하는 대표적인 도구

웹 분석 도구 = Google Analytics, Hotjar 등

5. 다음 중 레퍼런스 데이터에 해당하지 않는 것은?

• a) UI 패턴 조사
• b) 경쟁사 분석
• c) 광고 타겟 설정
• d) 타이포그래피 트렌드

광고 타겟 설정은 마케팅 전략에 가깝고, UI/UX 개선을 위한 레퍼런스와는 거리가 있음

레퍼런스 데이터 = 디자인 사례, UI 트렌드, 벤치마킹 등

6. 다음 중 브레인스토밍 기법의 특징으로 옳은 것은?

• a) 정답을 도출하는 과정이다
• b) 논리적 분석이 우선이다
• c) 다양한 아이디어를 자유롭게 제시한다
• d) 반드시 도식으로 표현한다

브레인스토밍은 다양한 아이디어를 자유롭게 제시하는 창의적 사고기법

아이디어 발상 = 브레인스토밍, 자유로운 사고, 창의성

7. 아이디어 발상 기법 SCAMPER에서 'A'는 무엇을 의미하는가?

• a) Add
• b) Avoid
• c) Arrange
• d) Answer

SCAMPER는 아이디어 창출을 위한 대표적인 창의적 사고 기법

Substitute = 다른 것으로 바꿔보면? (예: 재료, 사람, 과정 등)

Combine = 두 가지 이상을 결합해보면? (예: 기능, 콘셉트)

Add (Adapt) = 무언가를 더하거나 유사한 것을 적용하면? (예: 새로운 기능 추가, 장식 요소 삽입)

Modify (Magnify/Minify) = 크기, 속성 등을 바꾸면? (예: 더 크거나 작게, 더 빠르게, 더 느리게)

Put to another use = 다른 용도로 사용할 수는 없을까? (예: 전혀 다른 상황에 활용하기)

Eliminate = 불필요한 것을 제거해보면? (예: 불필요한 요소 제거, 단순화)

Reverse (Rearrange) = 순서를 바꾸거나 거꾸로 하면? (예: 앞뒤 전환, 상하 반전, 과정 변경)

8. 아이디어 검증 시 가장 적절한 방법은?

• a) 랜덤 생성
• b) 피드백 없는 구현
• c) 사용자 테스트
• d) 기능 우선 개발

사용자 테스트를 통해 아이디어의 타당성과 실제 효과를 검증할 수 있음

검증 = 사용자 피드백, 사용자 테스트, MVP

9. 아이디어의 타당성을 검토하는 기준이 아닌 것은?

• a) 실현 가능성
• b) 사용자 공감도
• c) 경쟁사 사장 의견
• d) 시장성

경쟁사 사장 의견은 객관적인 평가 기준으로 보기 어려움

검증 기준 = 시장성, 실현 가능성, 사용자 공감도

10. 다음 중 마인드맵 활용 목적에 가장 가까운 것은?

• a) 통계 분석
• b) 시각적 아이디어 정리
• c) 파일 백업
• d) 브라우저 테스트

마인드맵은 아이디어나 정보를 시각적으로 정리하는 데 유용함.

마인드맵 = 시각화, 사고 구조화

11. 프로젝트 기획 시 가장 먼저 해야 할 일은?

• a) 마케팅 계획
• b) 사용자 분석
• c) 디자인 선택
• d) 기술 구현

사용자 분석은 프로젝트의 방향과 필요성을 정하는 핵심 출발점임

기획 순서 = 사용자 분석 → 기획 의도 설정

12. 사용자 페르소나는 무엇을 정의하는가?

• a) 브랜드 컬러
• b) 타겟 광고 문구
• c) 가상의 사용자 프로필
• d) 개발자 이름

페르소나는 가상의 사용자 모델로 사용자의 니즈와 행동을 구체화함

UX 기획 = 페르소나, 사용자 시나리오

13. 프로젝트 기획에서 SWOT 분석의 'T'는?

• a) Trend
• b) Topic
• c) Threat
• d) Time

'T'는 Threat(위협)으로 외부의 위험 요인을 뜻함

SWOT = 내부 요인(S, W)과 외부 요인(O, T)을 나눠서 파악하는 분석 기법

Strength (강점) = 우리 조직이나 제품이 잘하고 있는 것, 경쟁 우위 요소

예: 브랜드 인지도, 독창적인 디자인, 기술력

Weakness (약점) = 개선이 필요한 부분, 우리 조직의 취약한 점
예: 인력 부족, 낮은 웹 접근성, UX 설계 미흡

Opportunity (기회) = 외부 환경에서 유리한 요소, 확장 가능성
예: 새로운 트렌드, 경쟁사 부재, 정부 지원 정책

Threat (위협) = 외부로부터의 위험 요소, 장애가 될 수 있는 것
예: 신생 경쟁사 등장, 기술 변화 속도, 법적 규제 강화

14. 프로젝트의 타겟층 분석 요소로 옳은 것은?

• a) 페이지 수
• b) 색상 수
• c) 연령과 성별
• d) HTML 태그 수

연령과 성별 등은 타겟 사용자층을 설정하는 기준

사용자 분석 = 연령, 성별, 관심사 등

15. 다음 중 기획의도로 보기 어려운 항목은?

• a) 웹사이트 목표
• b) 버튼 색상
• c) 사용자의 문제 정의
• d) 기능적 특성

버튼 색상은 시각적 요소로, 기획 의도보다는 디자인 단계에 가깝다.

기획 의도 = 목적, 문제 해결 방향

16. 와이어프레임은 무엇을 시각화하는가?

• a) 상세 기능 코드
• b) 개발자 일정
• c) 페이지 구조 및 레이아웃
• d) 서버 구조

와이어프레임은 UI의 기본 구조와 페이지 레이아웃을 설계하는 데 사용

와이어프레임 = 레이아웃, UI 구성, 사용자 흐름 설계

17. 다음 중 목업(Mockup)의 특징은?

• a) 단순 흑백 레이아웃
• b) 클릭 가능한 기능 포함
• c) 실제 UI 시안 형태
• d) 기능적 실행 코드 포함

목업은 실제 디자인 요소를 포함한 정적인 시각적 시안

목업 = 시각적 완성도, 색상, 폰트, 구성 포함

18. 프로토타입 도구로 가장 적절한 것은?

• a) Excel
• b) Figma
• c) Notepad
• d) Premiere

Figma는 와이어프레임, 목업, 프로토타입까지 제작 가능한 UI 도구

프로토타입 도구 = Figma, Adobe XD, InVision 등

19. 아이디어 시각화 과정에 해당하지 않는 것은?

• a) 사용성 테스트
• b) 와이어프레임
• c) 목업
• d) 프로토타입

사용성 테스트는 프로토타입 이후의 평가 과정에 해당

아이디어 시각화 = 와이어프레임, 목업, 프로토타입

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

• a) 코딩 테스트
• b) 디자인 파일 백업
• c) 사용자 흐름 및 피드백 검증
• d) 브라우저 호환성 확인

사용자 흐름을 확인하고 피드백을 통해 개선할 수 있는 시뮬레이션 모델

프로토타입 = 인터랙션 테스트, 사용자 검증 도구

21. 다음 중 UX 설계의 요소로 적절하지 않은 것은?

• a) 사용자 시나리오
• b) 시각적 대비
• c) 사용자 흐름도
• d) 사용자 피드백 분석

시각적 대비는 UI 설계 요소이며, UX의 주요 구성은 아님

UX = 사용자 흐름, 시나리오, 피드백 중심 설계

22. UI 설계에서 '내비게이션 시스템'이 담당하는 역할은?

• a) 페이지 속도 향상
• b) 콘텐츠 자동 생성
• c) 사용자의 위치 안내 및 이동 지원
• d) 이미지 최적화

사용자가 위치를 인지하고 원하는 정보로 이동할 수 있도록 돕는 구조

내비게이션 = 정보 탐색, 사용자 위치 안내

23. 사용성 테스트의 목적은?

• a) 디자인 트렌드 예측
• b) 콘텐츠 자동 업로드
• c) 사용자 인터랙션 평가
• d) 기술 스택 선정

디자인의 사용성, 효율성, 만족도를 측정하기 위한 평가

사용성 테스트 = 사용자 관찰, 피드백 분석

24. 다음 중 반응형 웹 설계에 포함되는 요소는?

• a) 이미지 보정
• b) 미디어 쿼리
• c) 배너광고 삽입
• d) FTP 서버 접속

미디어 쿼리는 반응형 레이아웃 구현을 위한 핵심 CSS 기술임.

반응형 웹 = 미디어 쿼리, 유동 레이아웃

25. UI 구성 요소에 해당하지 않는 것은?

• a) 버튼
• b) 텍스트 필드
• c) 명도 조절 알고리즘
• d) 드롭다운 메뉴

명도 조절 알고리즘은 UI 설계 도구가 아닌 색상 조절 로직

UI 구성 = 버튼, 텍스트 필드, 메뉴 등

26. 정보 구조 설계의 주된 목적은?

• a) 코딩 효율 향상
• b) 사용자 정보 수집
• c) 콘텐츠 접근성과 흐름 최적화
• d) 이미지 용량 감소

정보의 접근성과 논리적 흐름을 설계하여 사용자 탐색을 용이하게 함

정보 구조 = 콘텐츠 구조화, 탐색 최적화

27. 웹사이트의 계층적 구조를 표현한 설계 도구는?

• a) 워드 클라우드
• b) 사이트맵
• c) 애니메이션 차트
• d) SQL 테이블

사이트맵은 웹사이트 내 페이지 간 구조를 시각적으로 표현함.

사이트맵 = 정보 계층 구조 시각화 도구

-> 각 페이지 간의 관계와 구조를 표현하는 정보 구조 설계의 핵심 도구

워드클라우드 = 텍스트 데이터를 시각화하여 자주 나오는 단어를 강조해 보여주는 도구

-> 주제 파악, 키워드 분석에는 유용하지만 사이트 구조 설계에는 부적합

애니메이션 차트 = 시간이나 순서에 따라 움직임을 보여주는 시각 자료

-> UX 흐름 설명에는 사용될 수 있지만, 계층 구조와는 관련이 없음

SQL 테이블 = 데이터베이스에서 정보를 구조적으로 저장하는 표 형식

-> 서버 데이터 처리용이지만 웹사이트 구조 설계와는 별개임

28. 다음 중 정보 아키텍처 구성 요소가 아닌 것은?

• a) 콘텐츠 구성
• b) 데이터베이스 인덱스
• c) 내비게이션 구조
• d) 분류 체계

데이터베이스 인덱스는 정보 아키텍처 구성 요소에 해당하지 않음

정보 아키텍처 = 콘텐츠, 내비게이션, 분류 체계 등

29. 사용자 중심의 정보 구조가 필요한 이유는?

• a) 이미지 배치 최적화
• b) 사용자 탐색 효율성 향상
• c) 로딩 속도 증가
• d) 개발 언어 단순화

사용자 친화적인 정보 구조는 탐색 효율성과 만족도를 높임

사용자 중심 설계 = 탐색 흐름, 정보 접근성

30. 내비게이션 설계 시 고려해야 할 요소가 아닌 것은?

• a) 위치의 일관성
• b) 용어의 명확성
• c) 색상 대비
• d) 사용자의 개인정보

사용자의 개인정보는 내비게이션 시스템 설계 요소와 무관

내비게이션 설계 = 명확성, 일관성, 위치 안내

31. 반응형 웹 디자인에서 '미디어 쿼리'의 주된 역할은?

• a) SEO 최적화
• b) 레이아웃의 크기 자동 조정
• c) 쿠키 저장
• d) 서버 보안 강화

미디어 쿼리는 디바이스 화면 크기에 따라 레이아웃을 조정

미디어 쿼리 = 반응형 CSS 적용

32. 모바일 퍼스트 디자인 전략이란?

• a) 데스크탑부터 설계하는 방식
• b) 코드보다 디자인 우선 설계
• c) 모바일 화면을 기준으로 설계하는 방식
• d) 플래시 기반 디자인 방식

모바일 우선 설계는 모바일 사용자 경험을 중심으로 디자인함

모바일 퍼스트 = 모바일 UX 우선 고려

33. CSS Grid와 Flexbox 중 2차원 레이아웃에 적합한 것은?

• a) Flexbox
• b) CSS Grid
• c) Bootstrap
• d) HTML Table

CSS Grid는 행과 열을 모두 다루는 2차원 레이아웃에 적합.

1차원레이아웃은 한 방향(가로 또는 세로)으로만 배치 정렬 = Flexbox

2차원레이아웃은 가로 + 세로 모두 제어, 행과 열 기반 정렬 = CSS Grid

Bootstrap -> CSS프레임워크로 Grid시스템을 제공하지만, Flexbox기반이 많음

HTML Table -> 레이아웃용으로는 비표준이고 접근성도 낮음

34. 다음 중 반응형 이미지 구현 방식은?

• a) <meta name="viewport"> 설정
• b) <img srcset> 속성 사용
• c) z-index 조정
• d) <object> 태그 삽입

<img srcset>은 해상도에 따라 다른 이미지를 불러올 수 있도록 함

반응형 이미지 = srcset, sizes 속성

35. 다음 중 웹 반응형 테스트에 적절한 도구는?

• a) Photoshop
• b) Chrome DevTools
• c) Excel
• d) GitHub

Chrome DevTools는 다양한 해상도에서 반응형 디자인을 테스트할 수 있음.

반응형 테스트 = 브라우저 개발자 도구 사용

36. 다음 중 플랫 디자인(Flat Design)의 주요 특징은?

• a) 그림자 효과 강조
• b) 단순하고 직관적인 시각 요소 사용
• c) 입체적 표현 중시
• d) 텍스처 강조

플랫 디자인은 입체감 없이 단순하고 직관적인 형태와 컬러를 사용

플랫 디자인 = 미니멀, 그림자 없음, 2D 아이콘 중심

37. 머티리얼 디자인은 어떤 회사에서 개발하였는가?

• a) Apple
• b) Adobe
• c) Google
• d) Microsoft

머티리얼 디자인은 Google이 개발한 디자인 언어로, 현실 세계의 재료와 빛의 개념을 디지털에 적용한 것

머티리얼 디자인 = Google, 깊이감, 애니메이션, 명확한 계층

구글머터리얼디자인 관련 포스팅 https://uiweb.tistory.com/211

38. 다음 중 뉴모피즘 디자인 특징에 해당하는 것은?

• a) 과장된 컬러 대비
• b) 그림자와 음영의 미묘한 사용
• c) 플랫한 색상 배경
• d) 실사 이미지 중심 레이아웃

뉴모피즘은 부드러운 그림자와 음영을 이용해 입체감을 주는 디자인 트렌드 ( “New” + “Skeuomorphism”의 합성어)

뉴모피즘 = 소프트 UI, 내부 그림자, 입체 버튼

플랫디자인 = 단순함, 그림자/입체감없음, 2D아이콘

스큐어모피즘 = 현실세계의 재료/형태를 디지털에 반영(ex. 가죽 텍스처UI)

머터리얼디자인 = 그림자, 레이어, 애니메이션으로 깊이감 표현 (구글개발)

39. 웹에서 3D 요소 활용 시 주로 사용하는 라이브러리는?

• a) jQuery
• b) Bootstrap
• c) Three.js
• d) Laravel

Three.js는 WebGL 기반의 3D 그래픽을 구현할 수 있는 자바스크립트 라이브러리

3D 웹 라이브러리 = Three.js, WebGL, 객체 렌더링

40. 디자인 트렌드 중 '다크모드'의 장점으로 적절한 것은?

• a) 시인성 저하
• b) 리소스 사용량 증가
• c) 눈의 피로 감소
• d) 하드웨어 비용 절감

다크모드는 낮은 밝기로 인해 눈의 피로를 줄이는 데 도움이 됨

다크모드 = 눈 보호, 배터리 절약, 사용성 증가

 

다음은 PART2 프로토타입 및 심미성 설계 관련 45문항을 추가로 포스팅 할 예정입니다.