UIUX 디자인 입문 가이드, UI와 UX 차이·디자인 과정·도구와 포트폴리오 준비법

똑똑해지고 싶은 똑이 2026.10.15 조회 23

다 읽는 데 약 7분 걸려요한 번 읽어 두면 두고두고 써먹을 수 있어요.

💡 핵심 킬러 메시지

UIUX는 예쁜 화면보다 '사용자가 헤매지 않게 하는 경험'을 먼저 설계하는 것이 핵심이에요.

UIUX를 공부하려는데 UI와 UX가 어떻게 다른지 설명하려면 말이 꼬이죠. 디자인만 잘하면 되는 줄 알았다가 리서치 이야기에 놀라기도 하고요.

앱을 처음 열었을 때 원하는 메뉴를 바로 찾을 수 있고, 버튼을 눌렀을 때 예상대로 동작하면 사용자는 편하다고 느껴요. 반대로 버튼이 어디 있는지 헷갈리거나 결제 단계가 복잡하면 금방 앱을 닫아 버리죠. 이런 차이를 만드는 것이 UIUX 디자인이에요. UI는 사용자 인터페이스, 즉 화면의 버튼과 글자, 색상, 배치를 말하고, UX는 사용자 경험, 즉 서비스를 쓰는 전체 과정에서 느끼는 편리함과 만족을 말해요. 이 글은 UIUX를 처음 공부하는 사람을 위해 UI와 UX의 차이, 디자인 과정, 많이 쓰는 도구, 좋은 화면을 만드는 원칙, 접근성, 포트폴리오와 취업 준비 방법을 정리했어요. 도구의 기능과 요금은 바뀔 수 있으니 공식 안내를 확인하세요.

📷 사진 1 스마트폰 화면 시안이 띄워진 모니터
Alt: UIUX 디자인 작업
(이 상자를 내 사진으로 바꿔 주세요)

UI와 UX의 차이

앱을 쓰다 버튼을 못 찾아 답답했던 경험이 누구나 있을 거예요. 그 불편함을 줄이는 일이 바로 UIUX예요.

구분	UI	UX
의미	사용자가 보고 조작하는 화면	서비스를 쓰며 느끼는 전체 경험
다루는 것	버튼, 아이콘, 색상, 글꼴, 레이아웃	사용자 흐름, 정보 구조, 문제 해결
결과물	화면 디자인, 디자인 시스템	사용자 조사, 여정 지도, 와이어프레임
질문	어떻게 보이게 할까?	사용자가 목표를 쉽게 이룰 수 있을까?

두 영역은 서로 떨어질 수 없어요. 아무리 예쁜 화면도 흐름이 불편하면 좋은 경험이 되지 못하고, 흐름이 좋아도 화면이 읽기 어려우면 사용자가 헤매게 돼요.

📷 사진 2 화면 와이어프레임 스케치
Alt: UIUX 와이어프레임
(이 상자를 내 사진으로 바꿔 주세요)

디자인 과정

리서치: 사용자 인터뷰, 설문, 경쟁 서비스 분석으로 문제를 파악해요.
정의: 사용자 유형(페르소나)과 핵심 문제를 정리해요.
정보 구조 설계: 메뉴와 화면을 어떤 순서로 배치할지 정해요.
와이어프레임: 색 없이 화면 뼈대를 그려 배치를 확인해요.
프로토타입: 클릭해 볼 수 있는 시제품을 만들어요.
사용성 테스트: 실제 사용자에게 과제를 주고 어디서 막히는지 관찰해요.
개선과 개발 전달: 피드백을 반영해 최종 디자인을 개발자에게 전달해요.

개발자와 협업하는 방식은 프론트엔드 글에서, 앱 개발 단계는 앱개발 글에서 정리했어요.

📷 사진 3 포스트잇으로 사용자 여정을 정리한 벽
Alt: UX 리서치 워크숍
(이 상자를 내 사진으로 바꿔 주세요)

📷 사진 4 피그마 작업 화면
Alt: UIUX 피그마
(이 상자를 내 사진으로 바꿔 주세요)

많이 쓰는 도구

피그마는 브라우저에서 동작하고 여러 사람이 동시에 편집할 수 있어 실무에서 가장 많이 쓰이는 디자인 도구 중 하나예요. 와이어프레임부터 프로토타입, 디자인 시스템 관리까지 한곳에서 할 수 있어요. 이 밖에 화이트보드 협업 도구로 아이디어를 정리하고, 설문 도구와 화면 녹화 도구로 사용성 테스트를 진행해요. 처음에는 피그마 하나를 깊게 익히는 것을 추천해요.

📷 사진 5 사용자 테스트 기록 메모
Alt: UIUX 사용자 테스트
(이 상자를 내 사진으로 바꿔 주세요)

좋은 화면을 만드는 원칙

일관성: 같은 기능의 버튼은 같은 모양과 위치를 유지해요.
위계: 중요한 정보는 크고 진하게, 부가 정보는 작게 보여 줘요.
피드백: 버튼을 누르면 로딩 표시나 완료 메시지로 결과를 알려 줘요.
단순함: 한 화면에 한 가지 목표에 집중해요.
오류 예방: 잘못 누르기 쉬운 삭제 버튼에는 확인 단계를 둬요.

📷 사진 6 일관된 버튼 스타일을 정리한 디자인 시스템
Alt: UI 디자인 시스템
(이 상자를 내 사진으로 바꿔 주세요)

접근성도 함께 고려하세요

글자와 배경의 색 대비를 충분히 주고, 색만으로 정보를 구분하지 않으며, 버튼은 손가락으로 누르기 쉬운 크기로 만들어요. 이미지에는 대체 텍스트를 넣어 화면 낭독 프로그램 사용자도 내용을 알 수 있게 해야 해요. 웹 표준 마크업의 기본은 HTML 글에서 다뤘어요. 접근성은 장애가 있는 사용자뿐 아니라 햇빛 아래에서 화면을 보는 사람, 한 손으로 휴대폰을 쓰는 사람 모두에게 도움이 돼요.

실무에서 UIUX가 쓰이는 곳

앱과 웹 서비스뿐 아니라 쇼핑몰 상세 페이지, 회사 홈페이지, 키오스크 화면까지 사용자가 만나는 모든 화면에 UIUX가 적용돼요. 쇼핑몰 화면 구성은 상세페이지제작 글에서, 홈페이지를 외주로 만들 때 디자인 범위와 비용은 홈페이지제작비용 글에서 정리했어요.

📷 사진 7 키오스크 화면을 터치하는 손
Alt: 키오스크 UX
(이 상자를 내 사진으로 바꿔 주세요)

UIUX, 포트폴리오를 준비할 때

완성된 화면만 보여 주기보다 문제를 어떻게 정의하고 리서치와 테스트로 어떻게 고쳤는지 과정을 담아 보세요. 과정이 보이면 내 생각을 전달하기 쉬워요.

UIUX 체크리스트

항목	확인할 것	체크
차이	UI 화면·UX 경험	☐
리서치	사용자 이해	☐
설계	흐름·화면	☐
테스트	사용자 확인	☐
접근성	누구나 쓰기 쉽게	☐

포트폴리오와 취업 준비

UIUX 포트폴리오는 완성된 화면보다 문제를 어떻게 발견하고 해결했는지 과정을 보여 주는 것이 중요해요. 기존 앱의 불편한 점을 찾아 리서치, 문제 정의, 와이어프레임, 프로토타입, 테스트 결과까지 정리한 개선 프로젝트를 두세 개 준비해 보세요. 결과물에는 디자인 결정의 이유와 테스트에서 얻은 숫자나 관찰 내용을 함께 적으면 설득력이 높아져요.

UIUX 감정 카드: UIUX 앞에서 이런 마음이라면

읽다가 마음이 머문 대목이 있었다면, 지금 내 상태와 가장 가까운 카드를 골라 보세요.

📷 사진 8 포트폴리오 과정 정리 화면
Alt: UIUX 포트폴리오
(이 상자를 내 사진으로 바꿔 주세요)

자주 묻는 질문

UIUX에서 접근성은 왜 중요한가요?

시력이나 환경에 상관없이 누구나 서비스를 쓸 수 있게 하기 위해서예요. 글자 크기, 색 대비, 대체 텍스트 같은 부분을 챙겨 보세요.

UI와 UX 중 무엇부터 공부해야 하나요?

기본 디자인 원칙과 UI 도구를 익히면서 UX 과정을 함께 배우는 것이 좋아요.

그림을 잘 그려야 하나요?

아니요. 문제를 정리하고 논리적으로 설계하는 능력이 더 중요해요.

코딩도 알아야 하나요?

필수는 아니지만 HTML과 CSS 기초를 알면 개발자와 소통하기 쉬워요.

비전공자도 UIUX 디자이너가 될 수 있나요?

네, 과정 중심 포트폴리오로 역량을 보여 주는 비전공자가 많아요.

마무리

UIUX는 사용자의 문제를 이해하고 화면과 흐름으로 해결하는 일이에요. 오늘 자주 쓰는 앱 하나를 골라 불편했던 순간을 적어 보는 것부터 시작해 보세요.

함께 읽으면 좋은 글

AI insight 목록

이 글, 어땠어요?

별을 눌러 평가해 주세요. 한 사람당 한 번만 세요.

아직 평가가 없어요. 첫 평가를 남겨 주세요.

💬 댓글

첫 댓글을 남겨 주세요.