인터페이스와 UI 설계

🎯 학습 목표

이 강을 마치면 다음을 할 수 있습니다.

• REST의 6가지 제약 조건과 HTTP 메서드의 의미 및 멱등성을 설명할 수 있습니다.
• SOAP과 REST의 차이점을 비교하고 각각이 적합한 상황을 설명할 수 있습니다.
• UI 설계의 핵심 원칙(가시성·피드백·일관성·행동유도성)을 사례와 함께 설명할 수 있습니다.
• 프로토타입 유형 4가지를 구분하고 각각의 적합한 사용 시점을 설명할 수 있습니다.

🌐 REST — 인터페이스 설계의 표준

이 섹션에서는 현대 웹 API의 표준이 된 REST 아키텍처 스타일의 원칙과 HTTP 메서드를 살펴보겠습니다.

REST(Representational State Transfer)는 2000년 로이 필딩이 박사 논문에서 제안한 네트워크 아키텍처 스타일입니다. REST는 특정 기술이나 프로토콜이 아니라 웹의 장점을 최대한 활용하기 위한 설계 원칙의 집합입니다. REST 원칙을 따라 설계된 API를 RESTful API라고 부릅니다.

REST의 6가지 제약 조건은 기출에서 자주 출제됩니다. 각 제약 조건의 의미를 정확히 알아야 합니다.

1. 클라이언트-서버(Client-Server): UI와 데이터 저장을 분리합니다. 서버는 데이터 처리, 클라이언트는 UI 표현을 담당해 각자 독립적으로 진화할 수 있습니다.
2. 무상태(Stateless): 각 요청은 처리에 필요한 모든 정보를 담고 있어야 합니다. 서버는 이전 요청의 상태를 저장하지 않습니다. 확장성이 높아지지만 요청마다 인증 정보를 포함해야 합니다.
3. 캐시 가능(Cacheable): 응답은 캐시 가능 여부를 명시해야 합니다. 적절한 캐싱은 서버 부하를 줄이고 성능을 향상시킵니다.
4. 균일한 인터페이스(Uniform Interface): 리소스 식별(URI), 표현을 통한 리소스 조작, 자기 서술적 메시지, HATEOAS로 구성된 일관된 인터페이스입니다. REST의 핵심 제약이며 다른 아키텍처와 구분하는 특징입니다.
5. 계층형 시스템(Layered System): 클라이언트는 최종 서버에 직접 연결하는지, 중간 서버를 거치는지 알 수 없습니다. 로드밸런서, 캐시 서버, 보안 계층 등을 투명하게 추가할 수 있습니다.
6. 코드 온 디맨드(Code on Demand, 선택적): 서버가 실행 가능한 코드(JavaScript)를 클라이언트에게 전송할 수 있습니다. 유일한 선택적 제약 조건입니다.

REST API에서 사용하는 HTTP 메서드와 그 의미를 정확히 알아야 합니다.

메서드	CRUD	의미	멱등성	안전성
GET	Read	리소스 조회	O	O
POST	Create	리소스 생성	X	X
PUT	Update	리소스 전체 교체	O	X
PATCH	Update	리소스 부분 수정	조건부	X
DELETE	Delete	리소스 삭제	O	X

멱등성(Idempotent)이란 같은 요청을 여러 번 수행해도 결과가 동일하다는 속성입니다. GET으로 같은 리소스를 100번 조회해도 결과는 동일합니다. DELETE도 이미 삭제된 리소스를 다시 삭제해도 결과(없음)는 동일합니다. 반면 POST는 매번 새 리소스를 생성하므로 멱등하지 않습니다. 안전성(Safe)은 서버 상태를 변경하지 않는 속성입니다. GET만 안전합니다. 기출에서 "멱등성을 갖는 HTTP 메서드가 아닌 것은?"이 자주 출제됩니다.

📨 SOAP vs REST vs GraphQL 비교

이 섹션에서는 웹 API의 세 가지 주요 방식인 SOAP, REST, GraphQL의 특징과 차이점을 살펴보겠습니다.

SOAP(Simple Object Access Protocol)는 XML 기반의 메시지 프로토콜입니다. 엄격한 표준(WSDL로 서비스 명세, UDDI로 서비스 등록·검색)을 따르며, WS-Security 등 보안 기능이 내장되어 있습니다. 은행·금융·기업 시스템처럼 보안과 트랜잭션이 중요한 환경에서 사용됩니다. 무거운 XML 파싱 비용과 복잡성이 단점입니다.

항목	SOAP	REST	GraphQL
데이터 형식	XML	JSON, XML 등	JSON
프로토콜	SOAP(HTTP 등)	HTTP	HTTP
표준화	WSDL로 엄격한 명세	느슨한 규약	스키마 기반
보안	WS-Security 내장	HTTPS+JWT 등	HTTPS+JWT 등
적합한 상황	금융·엔터프라이즈	일반 웹·모바일 API	복잡한 데이터 요구사항

GraphQL은 Facebook이 개발한 API 쿼리 언어입니다. 클라이언트가 필요한 데이터를 정확히 지정해서 요청합니다. REST에서 발생하는 오버페칭(필요 이상 데이터 수신)과 언더페칭(여러 번 요청 필요) 문제를 해결합니다. 단일 엔드포인트(/graphql)로 모든 요청을 처리합니다.

🖥️ UI 설계 원칙

이 섹션에서는 사용자가 쉽고 편리하게 시스템을 사용할 수 있도록 하는 UI 설계의 핵심 원칙들을 살펴보겠습니다.

좋은 UI는 사용자가 별도의 학습 없이도 직관적으로 사용할 수 있어야 합니다. 인터페이스 설계의 대표적인 원칙들을 정리해 보겠습니다.

• 가시성(Visibility): 중요한 기능과 상태는 항상 보여야 합니다. 숨겨진 기능은 사용자가 발견하지 못합니다. 현재 어디 있는지, 무엇을 할 수 있는지가 화면에서 명확히 보여야 합니다.
• 피드백(Feedback): 사용자의 모든 행동에 시스템이 반응해야 합니다. 버튼을 누르면 눌렸다는 시각적 반응, 로딩 중이면 진행 표시, 오류 발생 시 명확한 메시지가 필요합니다.
• 일관성(Consistency): 같은 의미를 가진 요소는 같은 방식으로 표현해야 합니다. 저장 버튼은 항상 같은 위치, 같은 색상, 같은 아이콘이어야 합니다. 사용자가 한 번 학습하면 어디서나 적용 가능합니다.
• 행동유도성(Affordance): 요소의 모양이 사용 방법을 암시해야 합니다. 버튼은 누를 수 있어 보이고, 링크는 클릭할 수 있어 보여야 합니다. 제임스 깁슨이 제안하고 도널드 노먼이 UI 설계에 적용한 개념입니다.
• 단순성(Simplicity): 불필요한 요소를 제거하고 핵심 기능에 집중합니다. "완벽한 디자인은 더 이상 추가할 것이 없을 때가 아니라 더 이상 제거할 것이 없을 때 완성됩니다(생텍쥐페리)".
• 오류 방지(Error Prevention): 오류가 발생하기 전에 예방하는 것이 오류 메시지보다 낫습니다. 위험한 작업 전 확인 대화상자, 잘못된 입력 형식 실시간 안내 등이 예입니다.

기출에서는 원칙의 이름과 설명을 연결하는 문제가 출제됩니다. 특히 행동유도성(어포던스)은 용어가 생소해 자주 출제됩니다. "사용 방법을 직관적으로 암시하는 설계 속성"이라고 기억하세요.

📐 프로토타입 유형과 접근성

이 섹션에서는 UI를 실제 개발 전에 검증하는 프로토타입의 유형과 웹 접근성 표준을 살펴보겠습니다.

프로토타입(Prototype)은 최종 제품이 완성되기 전에 아이디어를 시각화하고 검증하는 모형입니다. 실제 개발에 들어가기 전에 프로토타입으로 사용자 피드백을 받으면 방향 수정 비용이 크게 줄어듭니다. 프로토타입은 충실도(Fidelity)에 따라 분류됩니다.

유형	방법	충실도	특징
페이퍼(Paper)	종이에 손으로 스케치	매우 낮음	가장 빠르고 저렴, 초기 아이디어 탐색
와이어프레임(Wireframe)	레이아웃·구조만 표현	낮음	색상·이미지 없이 구조 검토, Figma·Balsamiq
목업(Mockup)	시각 디자인 완성본	높음	실제와 유사한 외형, 인터랙션 없음
프로토타입(Digital)	클릭 가능한 인터랙티브 모형	높음	실제 동작처럼 테스트 가능, Figma·Adobe XD

웹 접근성(Web Accessibility)은 장애인을 포함한 모든 사용자가 웹 콘텐츠에 동등하게 접근하고 이용할 수 있도록 하는 것입니다. W3C가 제정한 WCAG(Web Content Accessibility Guidelines)가 국제 표준입니다. WCAG의 4가지 원칙은 POUR로 기억할 수 있습니다.

• 인식 가능(Perceivable): 모든 콘텐츠는 다양한 감각으로 인식할 수 있어야 합니다. 이미지에 alt 텍스트, 영상에 자막 제공.
• 운용 가능(Operable): 모든 기능은 키보드로도 사용할 수 있어야 합니다.
• 이해 가능(Understandable): 콘텐츠와 UI 동작이 이해하기 쉬워야 합니다.
• 견고성(Robust): 다양한 사용자 에이전트(보조 기술 포함)와 호환되어야 합니다.

📝 핵심 요약

5강에서 배운 내용을 정리해 보겠습니다.

항목	핵심 암기 포인트
REST 6원칙	클무캐균계코 — 클라이언트-서버·무상태·캐시·균일인터페이스·계층형·코드온디맨드
멱등성 없는 메서드	POST (매번 새 리소스 생성)
SOAP 특징	XML 기반, WSDL 명세, WS-Security, 금융·엔터프라이즈
행동유도성	어포던스 — 사용 방법을 외형으로 암시
프로토타입 순서	페이퍼 → 와이어프레임 → 목업 → 디지털 프로토타입
WCAG 4원칙	인식·운용·이해·견고(POUR)

다음 강인 6강 — 자료구조 완전정복에서는 선형·비선형 자료구조 전체를 연산과 시간복잡도 Big-O와 함께 완전히 정복합니다. 스택·큐의 응용(후위표기법·BFS/DFS), 트리 순회 3종, 힙 구조까지 기출 위주로 깊이 있게 다룹니다!