UI/UX

UI/UX(User interface/User experience)는 사용자 중심의 디자인을 말하는 사용자 경험과 사용자 인터페이스가 합쳐진 말이다.

[아사달] 스마트 호스팅

개요

UI 디자인은 사용자가 제품을 사용할 때 직접적으로 상호작용하는 화면, 버튼, 아이콘 등의 인터페이스 요소를 디자인하는 것을 뜻한다. UI 디자인은 제품의 시각적 요소를 디자인하며, 사용자가 제품을 사용할 때 필요한 기능을 적절하게 배치하여 사용자 경험을 향상시키는 역할을 한다. UI는 사람들이 컴퓨터와 상호 작용하는 시스템이다. 물리적인 하드웨어와 논리적인 소프트웨어 요소를 포함한다. UX 디자인은 제품 또는 서비스의 사용자 경험을 개선하기 위한 디자인이다. 사용자 조사, 정보 구조 설계, 와이어 프레임 및 프로토타입 제작 등의 작업을 담당한다. UX 디자이너는 사용자의 니즈와 목표를 이해하고, 해당 제품 또는 서비스가 사용자에게 제공하는 가치를 극대화하기 위해 최적의 경험을 설계한다. 예를 들어, 음악 스트리밍 앱을 디자인한다고 가정했을 때, UX 디자이너는 음악 검색, 재생 목록, 추천 기능 등에 대한 사용자의 요구를 파악하여 사용자 경험을 향상시킬 수 있는 기능과 디자인을 고려할 것이다. 긍정적인 사용자 경험을 개발, 창출하기 위해서 학술적, 실무적으로 이를 만들어내고자 하는 일을 UX 디자인이라고 하며 영역에 따라 제품 디자인, 상호작용 디자인, 사용자 인터페이스 디자인, 정보 아키텍처, 사용성 등의 분야에서 주로 연구 개발되고 있다. 그러나 UX는 다분야의 총체적 시작으로 접근해나가야 하는 핵심적인 원리를 바탕으로 한다. UI는 사용자에게 보여지는 모든 것이기 때문에 UX에 직접적으로 관여하게 된다. 두 분야는 상호 보완적이며, 협업을 통해 최적의 사용자 경험을 제공할 수 있도록 한다. 결국 좋은 사용자 경험을 제공하기 위해선 UX와 UI가 유기적으로 연계되어야 한다는 것이다. 그래서 UX 디자이너와 UI 디자이너를 구분하지 않고, UX/UI 디자이너로 통합해서 부르는 경우가 많다.

특징

UI

• 직관성: UI는 사용자가 쉽게 이해하고 사용할 수 있는 직관적인 디자인 요소와 기능을 가져야 한다. 사용자가 추가적인 설명 없이도 어떻게 작동하는지 이해할 수 있어야 좋은 디자인이다.
• 일관성: UI 요소와 레이아웃은 일관성을 유지해야 한다. 이는 비슷한 기능이나 정보가 비슷한 방식으로 표시되어야 함을 의미한다. 사용자가 한 부분에서 익숙한 디자인 패턴을 다른 부분에서도 찾을 수 있어야 한다.
• 효율성: UI 디자인은 사용자가 작업을 빠르게 수행할 수 있도록 돕는 것이 중요하다. 불필요한 클릭이나 이동 없이 목표를 달성할 수 있도록 설계되어야 한다.
• 가시성: 중요한 정보나 기능은 사용자에게 명확하게 표시되어야 한다. 사용자가 필요한 정보를 빠르게 찾고 접근할 수 있어야 한다.
• 피드백: UI는 사용자의 상호작용에 대한 즉각적인 피드백을 제공해야 한다. 버튼 클릭, 양식 제출 등의 동작에 대한 확실한 응답을 제공하여 사용자가 자신의 작업 상태를 이해할 수 있도록 해야 한다.

UX

• 유용성: 사용자가 제품이나 서비스를 사용함으로써 얻는 가치가 있어야 한다. 유용한 UX 디자인은 사용자의 실제 필요를 충족하고 문제를 해결하는 데 도움이 된다.
• 직관성: 제품 또는 서비스는 사용자가 쉽게 이해하고 조작할 수 있어야 한다. 복잡한 메뉴나 인터페이스를 피하고 직관적인 디자인을 채택해야 한다.
• 형평성: UX 디자인은 모든 사용자에게 공평하고 평등한 기회를 제공해야 한다. 장애를 가진 사용자나 다양한 배경을 가진 사용자들을 배려하는 인클루시브한 디자인이 중요하다.
• 즐거움: 사용자 경험이 즐겁고 만족스러워야 한다. 사용자가 제품 또는 서비스를 사용하는 과정 자체가 즐거운 경험이 되도록 디자인되어야 한다.
• 효율성: 사용자는 제품 또는 서비스를 효율적으로 사용할 수 있어야 한다. 불필요한 단계나 지연을 최소화하고 사용자가 목표를 빠르게 달성할 수 있도록 도와야 한다.

차이점

UX와 UI가 언뜻보면 비슷하게 느껴질 수도 있지만, 두 개념이 완전히 다르다는 것을 알 수 있는 차이점이 있다. UX와 UI 디자인 모두 사용자를 위한 최상의 최종 제품을 제공하기 위함이라는 공통분모가 있지만 두 분야 사이에는 분명한 차이가 존재한다. UX 디자인에는 사용자 조사 및 프로토타이핑에서부터 제품 마케팅에 이르기까지 제품 디자인 및 출시를 아울러 고려해야 하는 분석적 프로세스가 포함된다. 사용자의 니즈와 비즈니스 또는 브랜드의 니즈 사이의 간극을 메우는 것이 UX 디자이너의 일이라 할 수 있다. UX가 전체 경험을 구성하는 것이라면, UI는 사용자가 상호 작용할 시각적이면서 유형적 요소를 만들어 나가는 데 중점을 둔다. UI/UX 디자인의 조화로운 협력을 통해 제품이 개발되어야 하며, 이 두 영역의 역할은 제품의 성공에 있어 모두 동일하게 중요하다. UX 디자이너는 제품 디자이너, 애널리시스트, 사용자 및 마케팅 담당자와 소통을 통해 사이트의 전체 흐름과 기능에 중점을 둔다. 그리고 이러한 프로세스를 바탕으로 방문자에게 원활한 웹사이트 탐색 경험을 제공하기 위해 필요한 기능을 찾아서 UI 디자이너에게 그 인사이트를 전달한다. 그러면 그 다음 단계부터 UI 디자이너는 이미지 크기, 콘텐츠 배열, 텍스트 양 등과 같은 솔루션을 반영하는 데 필요한 시각적인 결정을 내린다. UI 디자이너는 이를 위해 사용자에게 가장 적합한 웹사이트 레이아웃은 무엇인지, 홈페이지에 어느 정도의 정보가 표시되어야 하는지, 인터페이스가 전체적으로 시각적으로 돋보이고 관심을 끌 수 있는지 등과 같은 고민을 하게 된다.

참고자료

• 〈사용자 인터페이스〉, 《위키백과》
• 〈사용자 경험〉, 《위키백과》
• 진민아 책임, 〈UX·UI 디자인, 그게 뭔데?〉, 《토베통》, 2022-08-11
• 민지영, 〈UX/UI 디자인이란? | 정의, 차이점, 사례, UX 디자인 프로세스〉, 《코드블로그》, 2023-05-23
• 〈좋은 UI/UX 디자인의 특징〉, 《크몽》, 2023-07-02
• 조윤정, 〈UX/UI 디자인이란? 차이점과 사례를 한눈에 살펴보기〉, 《윅스블로그》, 2023-11-23

같이 보기

• 사용자 경험
• 사용자 인터페이스

이 UI/UX 문서는 인터넷에 관한 글로서 검토가 필요합니다. 위키 문서는 누구든지 자유롭게 편집할 수 있습니다. [편집]을 눌러 문서 내용을 검토·수정해 주세요.

개발 : 프로그래밍, 소프트웨어, 데이터, 솔루션, 보안, 하드웨어, 컴퓨터, 사무자동화, 인터넷 □■⊕, 모바일, 사물인터넷, 게임, 메타버스, 디자인 인터넷 PC통신 • 그누텔라 • 네트워크 • 다크넷 • 다크웹 • 딥웹 • 무선인터넷 • 슈퍼피어 • 스타링크 • 아르파넷 • 아이투피(I2P) • 엑스트라넷 • 오버레이 네트워크 • 오투오(O2O) • 오프라인 • 온라인 • 온오프라인 • 유선인터넷 • 인터넷 • 인트라넷 • 초고속 인터넷 • 토어(토르) • 표면웹 • 프리넷 • 피투피(P2P) • 하이브리드 피투피(P2P) • 홈네트워크 인터넷 기술 ARP • DNS • FTP • G-클라우드 • HTTP • HTTPS • IPFS • IPv4 • IPv6 • IRC • IRI • ISBN • LDAP • MOIP • OpenSSL • OSI 7 계층 • RFC • RFID • SFTP • SOAP • SSH • SSL • SSO • TCP • TCP/IP • TLS • UCI • UDP • URI • URL • URN • VoIP • 강화 내부 게이트웨이 라우팅 프로토콜 • 검색 • 검색엔진 • 게이트웨이 • 경계 경로 프로토콜 • 내부 게이트웨이 라우팅 프로토콜 • 다운로드 • 데몬 • 라우팅 정보 프로토콜 • 백엔드 • 사물인터넷 • 서버 • 서버-클라이언트 • 서브넷마스크 • 세션 • 스트리밍 • 식별자 • 아이피(IP) • 업로드 • 에듀테크 • 온프레미스 • 원격 프로시저 호출(RPC) • 유비쿼터스 • 인터넷 기술 • 자율시스템 • 정보기술 • 정보통신 • 채팅 • 챗봇 • 최단경로 우선 프로토콜(OSPF) • 쿠키 • 크롤링 • 클라이언트 • 키워드 • 텔넷 • 토폴로지 • 트래픽 • 패킷 • 포털 • 포트 • 프런트엔드 • 프로토콜 • 프록시 • 해시태그 이메일 IMAP • POP3 • SMTP • 계정메일 • 네이버 메일 • 다음 메일 • 센드메일 • 스팸 • 스팸메일 • 스팸필터링 • 아웃룩 익스프레스 • 야후 메일 • 웹메일 • 이메일 • 지메일 • 카카오 메일 • 한메일 • 핫메일 웹 KWCAG • WCAG • 서핑 • 시맨틱 웹 • 오프라인 웹 • 웹 • 웹 1.0 • 웹 2.0 • 웹 3.0 • 웹개방성 • 웹서비스 • 웹접근성 • 웹접근성 인증마크 • 웹주소 • 웹표준 • 웹호환성 • 피드 웹사이트 BBS • GNB • LNB • UI/UX • 게시판 • 관리자 사이트 • 그래픽 사용자 인터페이스(GUI) • 누리집 • 대시보드 • 드롭다운 메뉴 • 랜딩 템플릿 • 랜딩 페이지 • 리더보드 • 마이홈피 • 메뉴 • 모달창 • 미니홈피 • 방명록 • 배너 • 사용자 경험(UX) • 사용자 인터페이스(UI) • 섹션 • 왼쪽메뉴 • 웹기획 • 웹사이트 • 웹페이지 • 인터페이스 • 쪽지 • 커뮤니티 • 탑메뉴 • 탭메뉴 • 템플릿 • 팝업 • 페이지 • 페이지뷰 • 햄버거 메뉴 • 호버 • 홈페이지 • 화면 웹브라우저 넷스케이프 • 모자이크 • 브라우저 • 브레이브 브라우저 • 블록체인 브라우저 • 사파리 • 삼성인터넷 • 스윙 • 엣지 • 오시리스 • 오페라 • 웨일 • 웹브라우저 • 인터넷 익스플로러(IE) • 크롬 • 파이어폭스 • 판도브라우저 인터넷 서비스 구글 • 구글 미트 • 구글챗 • 구글 행아웃 • 깃허브 • 네아로 • 네이버 • 네이버 웹툰 • 네이버 카페 • 넷플릭스 • 다음 • 라이코스 • 레진코믹스 • 메일루 • 멜론 • 바이두 • 바이트댄스 • 비트토렌트 • 빌리빌리 • 빙 • 소리바다 • 스포티파이 • 아마존 웹서비스(AWS) • 애플 • 야후 • 야후재팬 • 얀덱스 • 에버노트 • 에어비앤비 • 왓챠 • 웹소설 • 웹툰 • 유튜브 • 인스타툰 • 인터넷 서비스 • 인터넷카페 • 잼라이브 • 줌 • 카카오 • 카카오 웹툰 • 카카오페이지 • 탑툰 • 텐센트 • 팟캐스트 • 패스 • 페이오니아 • 페이팔 • 해시넷 • 화상통화 • 화상회의 인터넷쇼핑 11번가 • 그립 • 네이버 쇼핑 • 네이버 쇼핑 라이브 • 라이브방송 • 라이브커머스 • 모바일쇼핑 • 스쉐라이브 • 스타일쉐어 • 아마존 • 알리바바 • 오픈마켓 • 옥션 • 온라인쇼핑 • 위메프 • 이베이 • 인터넷쇼핑 • 인터파크 • 전자상거래 • 지마켓 • 징동닷컴 • 카카오 쇼핑 • 카카오 쇼핑 라이브 • 커머스 • 쿠팡 • 쿠팡 라이브 • 타오바오 • 티몬 소셜 네트워크 SNS(소셜 네트워크 서비스) • 구글 블로거 • 네이버 밴드 • 네이버 블로그 • 디시인사이드 • 링크드인 • 마이크로블로그 • 맞팔 • 브런치스토리 • 블로그 • 소셜 네트워크 • 엑스 (트위터) • 웨이보 • 인스타그램 • 트루스소셜 • 티스토리 • 팔로우 • 페이스북 • 플리커 • 핀터레스트 메신저 골프메신저 • 님버즈 • 대화방 • 두레이 • 디스코드 • 딩톡 • 라인 • 라인웍스 • 마이크로소프트 팀즈 • 메신저 • 버디버디 • 스냅챗 • 스노우 • 스카이프 • 슬랙 • 아이씨큐(ICQ) • 왓츠앱 • 웹메신저 • 위챗 • 잔디 • 직톡 • 카카오워크 • 카카오톡 • 카톡방 • 큐큐(QQ) • 탱고 • 텔레그램 • 틱톡 • 페이스북 메신저 • 플로우 도메인 네임서버 • 다국어도메인 • 도메인 • 레지스트라 • 레지스트리 • 아이피 • 인터넷주소 • 인터넷키워드 • 한글인터넷주소 • 후이즈 호스팅 메일호스팅 • 서버호스팅 • 웹호스팅 • 코로케이션 • 클라우드 • 클라우드 네이티브 • 파킹 • 포워딩 • 호스팅 위키 구스위키 • 나무위키 • 노스모크 • 더위키 • 디시위키 • 리그베다위키(엔하위키) • 리브레위키 • 미디어위키 • 바다위키 • 백괴사전 • 아이티위키 • 알파위키 • 엔하계 위키 • 요다위키 • 우만위키 • 위키 • 위키낱말사전 • 위키독스 • 위키문법 • 위키문서 • 위키문헌 • 위키미디어재단 • 위키백과 • 위키스 • 위키엔진 • 위키원 • 위키원드 • 위키트리 • 위키휴가 • 제이위키 • 제타위키 • 중국위키 • 팬덤(위키아) • 한국어 위키백과 • 한국위키미디어협회 • 항공위키 인터넷 사용자 가입 • 가입자 • 강퇴 • 계정 • 관리자 • 네트워크 관리자 • 네티즌 • 누리꾼 • 대기자 • 데이터베이스 관리자 • 등록자 • 디지털 원패스 • 로그아웃 • 로그인 • 방문자 • 방장 • 블로거 • 블록체인 관리자 • 비회원 • 사용자 • 사이트 관리자 • 서버관리자 • 시삽 • 시스템 관리자 • 아이디(ID) • 운영진 • 웹관리자 • 웹마스터 • 유튜버 • 접속자 • 차단 • 최고관리자 • 탈퇴 • 탈퇴자 • 회원 • 회원제 • 휴면 • 휴면계정 인터넷 단체 IANA • ICANN • W3C • 다르파 • 유럽입자물리연구소(CERN) 위키 : 자동차, 교통, 지역, 지도, 산업, 기업, 단체, 업무, 생활, 쇼핑, 블록체인, 암호화폐, 인공지능, 개발, 인물, 행사, 일반