사용자 인터페이스

스마트폰을 이용하는 사용자

사용자 인터페이스 또는 UI(유아이)란 User Interface의 약자로서, 사용자가 웹사이트나 스마트폰 앱을 통하여 원하는 정보를 쉽게 조회하거나 입력할 수 있도록 해주는, 사용자와 시스템 사이의 인터페이스(I/F)를 말한다. 유저 인터페이스라고도 한다. 키보드 입력을 통한 텍스트 기반의 UI, 마우스 조작 또는 화면 터치를 통한 그래픽 기반의 UI(=GUI), 가상현실(VR) 헤드 마운트 디스플레이(HMD) 장비를 통한 UI, 인공지능(AI) 기반의 음성 인식 UI 등이 있다.

개요

사용자 인터페이스는 사람(사용자)들과 기계 또는 컴퓨터 사이에서 발생하는 상호 작용(Interaction)을 뜻한다. 예를 들어 대형마트의 매니저는 고객들이 더 많은 상품을 구매하게 하기 위해서 제품들을 진열하는 것도 사용자 인터페이스라 할 수 있고 프로그램 개발자가 앱을 개발하면서 각종 버튼이나 리스트의 요소를 편리하게 배치하는 것도 사용자 인터페이스다.

역사

역사의 시작

사용자 인터페이스의 혁신은 '새로운 개념을 구축하고 효율적인 프로세스를 개발한다'라는 정신을 바탕으로 시작한다.

1~2차 산업혁명(1760년 ~ 1914년)

19세기 후반 당시 영국, 서유럽, 북동 아메리카와 같은 세계의 선도 국가들은 철로, 증기선, 운하, 포장도로 등이 도입되면서 상호 연결된 사회가 열렸으며 이것이 빠르고 효율적인 의사소통 수단으로 발전하게 되었다. 이후 거대한 철강 기업과 석유 기업이 등장한 미국에서는 많은 노동력이 필요했다. 환경이 좋지 않지만 살아가기 위해서는 기술 능력이 매우 필요했던 시기이다. 그러면서 20세기 초반에 프레드릭 테일러(Frederick Taylor)는 조직 리더십에 대한 4가지 관점에 대해 정의하는데 이를 '테일러리즘(Tayorism)'이라고 불렀다.

애니악 (1945년 ~ 1959년)

1945년 진 제닝스 바틱(Jean Jennings Bartik)은 애니악(Electronic Numercial Integrator And Computer, ENIAC)라는 기기와 관련된 일자리를 제안 받아 그레이스 호퍼(Grace Hopper)와 함께 일하게 된다. 호퍼는 코블(Common Business Oriented Language, COBOL)이라는 프로그래밍 언어를 개발하여 다양한 사람들이 접근하기 쉽게 만들어 많은 사람들이 사업적인 목적으로 사용 되었다.

사용자를 위한 디자인(1955년)

헨리 드레이퍼스(Henry Dreyfuss)는 미국인 산업디자이너로서 <사용자를 위한 디자인> 이라는 책을 출간하면서 사람과 기계 사이의 관계에 대한 개념을 개념을 제시하였다. 그 후 새롭게 등장한 인체공학적 디자이너들은 인간과 기계가 만드는 공간을 "인터페이스"라고 표현하기 시작했다.

최초의 마우스 발명(1963년)

제2차 세계대전 동안 레이더 기술자로 일했던 더글라스 엥겔바트는 컴퓨터 디스플레이에 커서를 움직일 수 있는 방법을 연구하였다. 마침내 프로토타입을 개발했고 유저와 기술자가 코드를 쓰지 않고 인터페이스 툴을 사용할 수 있게 해주었다.

최초의 터치 스크린(1965년 ~ 1969년)

E.A. 존슨(E.A. Johnson)이 처음으로 오늘날 정전식 스크린이라 불리는 유형의 터치스크린에 대한 특허를 냈다. 이 유형의 스크린은 애플의 제품이 유명해지면서 부활하였다.

최초의 GUI(1973년)

팔로알토 리서치 센터(Palo Alto Research Center, PARC)를 설립하여 최초의 그래픽 유저 인터페이스(GUI)인 제록스 알토를 만들게 된다. 삭제 기능, 데이터 저장 기능, 이메일 기능 등이 제공되면서 이전에 보지 못했던 방식으로 사람들을 연결해주었다.

최초의 개인용 PC(1981년)

1981년에 IBM사에서 최초의 개인용 컴퓨터를 출시하였다. 당시 IBM 컴퓨터는 저렴한 가격에 작고, 접근성이 좋은 개인용 PC를 개발하여 매우 인상적이었다.

매킨토시(1984년)

애플의 매킨토시가 출시한 후 개인용 PC에 대한 생각이 완전히 바뀌었다. "For the rest of us"라는 슬로건을 달고 나온 매킨토시로 인해 사용자들 사이에서 각광받았다. 매킨토시 출시를 통해 '어떤 유형의 사람이나 위협을 받거나 냉소하지 않고도 환영할 수 있는 것'이라는 컴퓨터의 새로운 의미를 만들어냈다.

iMac의 발전

아이맥(iMac)의 진화(1998년)

애플의 아이맥(iMac)은 기존에 출시했던 제품과는 다르게 독창적이다. 아이맥은 소비자에게 있는 그대로 보여줄 뿐만 아니라 인간과 컴퓨터 사이의 신뢰와 이해라는 관계를 형성 시켜주는 인터페이스 역할을 했다.

카메라폰 그리고 '줄이기'(2000년)

주머니 안에 넣어 다닐 수 있는 카메라폰인 J폰(J-Phone)은 스크린이 넓으면서 더 많은 기능을 담으려고 하였다. J폰의 출시 기점으로 전자기기의 '줄이기' 열풍이 불었다. '제품의 크기를 줄이면서 가볍고 빠른 제품'을 만드려는 노력이 지속되었다.

윈도XP와 맥 OSX(2001년)

마이크로소프트(Microsoft)의 윈도XP, 애플(Apple)의 맥 OSX의 출시로 오늘날 운영체제 업그레이드의 기본이 되었다.

레티나 디스플레이(2010년)

2010년에 애플은 고밀도 디스플레이를 개발해 스크린의 이미지를 깔끔하게 보여주는 레티나 디스플레이를 개발했는데 우리가 흔히 쓰는 데스크탑, 태블릿, 휴대폰, 스마트워치 등과 소통하는 방식을 혁신시켜 인터페이스 관점에서 디바이스가 발전할 수 있는 마지막 단계라고 할 수 있다.

현재

현재 기술 발전은 정점에 다다르고 있다. 이제 스크린이 없는 가상 디스플레이 기술을 연구하고 있으며 컴퓨터와 소통하기 위해 다른 프로세스를 활용하는 기술을 개발하는 상태이다. 또한 차세대 UI는 동작 인식과 음성인식이라 볼 수 있는데 최근 삼성전자를 비롯한 TV 제조사들은 동작 인식과 음성인식을 스마트 TV에 적용하여 새로운 UI를 개발하기 시작했다. 음성인식을 통해 TV의 전원을 끄거나 채널을 검색하는 등 점차 동작 인식과 음성인식이 확대되고 있다. 하지만 동작 인식과 음성인식에 대한 한계가 거론되는데, 동작 인식 기술이 정교하지 않고 제한되기 때문에 여전히 문제가 제기 되고 있다. 우리는 이러한 UI 한계를 뛰어넘어 계속해서 사용자 인터페이스 발전이 지속되어야 한다.

목적

• 사용자가 필요로하는 요소를 쉽게 찾고 사용하며 그 요소들로부터 명확하게 의도한 결과를 쉽게 얻어 낼 수 있어야 한다.
• 사용자 인터페이스는 입력, 출력 장치를 통해 상호작용 수단과 방식을 제공해야 한다.

사용자 인터페이스(UI) 설계 지침

1. 가시성의 원칙 : 주요 기능(feature)을 노출해 최대한 노작이 쉽게 한다.
2. 조작 결과 예측의 원칙 : 사용자의 조작에 대한 결과를 조작 부위만 보고도 예측 가능하게 설계한다.
3. 일관성의 원칙 : 조작방식에 일관성을 제공함으로써 사용자가 쉽게 기억하고, 빠르게 적응할 수 있도록 설계한다.
4. 단순성의 원칙 : 기능구조를 단순화시켜 조작에 요구되는 노력을 최소화하여 인지적 부담을 줄이도록 설계한다.
5. 지식 배분의 원칙 : 기능 조작에 요구되는 지식은 사용자의 지식과 기억구조에 적합하도록 하여 학습하기 쉽고, 기억하기 쉽게 상호 보완적으로 분배하여 설계한다.
6. 조작 오류의 원칙 : 발생한 오류는 쉽게 발견될 수 있도록 하고 오류의 수정 또한 최대한 쉽게 이루어지도록 설계한다.
7. 제한사항 선택사용의 원칙 : 조작 상의 제한사항을 이용하여 가능한 선택의 여지를 줄여 조작 방법이 명확하도록 설계한다.
8. 표준화의 원칙 : 기능구조와 디자인을 표준화하여 한 번 학습한 이후 효과적으로 사용할 수 있도록 설계한다.
9. 행동 유도성의 원칙 : 기능을 어떻게 조작하면 될 것인가에 관한 단서를 제공함으로써 조작의 가능성을 높이도록 설계한다.
10. 접근성의 원칙 : 연령, 성별, 인종 등에 따른 다양한 계층의 사용자를 수용할 수 있도록 설계한다.

종류

• 그래픽 사용자 인터페이스(Graphical User Interface, GUI) : 그림으로 된 화면 위의 물체나 틀, 색상과 같은 그래픽 요소들을 어떠한 기능과 용도를 나타내기 위해 고안된 사용자를 위한 컴퓨터 인터페이스이다.
• 웹 기반 인터페이스(Web User Interface, WUI) : 인터넷과 웹 브라우저를 통해 웹 페이지를 열람하고 조작하는 인터페이스이다.
• 명령줄 또는 명령어 인터페이스(Command Line Interface, CLI) : 사용자가 컴퓨터 자판 등을 이용해 명령 문자열을 입력하여 체계를 조작하는 인터페이스이다.

활용

현재 사용되는 사용자 인터페이스는 매우 많다. 입력장치인 키보드의 키의 개수가 101개였던 키보드가 스마트 기기가 출시된 후 34개로 줄어들게 되고 마우스는 윈도 8이 출시되면서 터치 방식으로 변화되는 모습이 보였다. 게다가 스마트폰의 지문인식, 사용자의 얼굴로 휴대폰의 잠금화면을 푸는 안면인식, 사람의 음성을 인식하여 원하는 콘텐츠를 검색해주는 애플의 시리(Siri)나 안드로이드의 구글 보이스(Google Voice)와 같은 음성인식 등의 생체인식이 있고 손의 움직임에 따라 사진 넘기기와 음악 재생 등의 제스처를 이용한 동작 인식이 있다. 또한 우리가 흔히 사용하는 모든 전자 제품의 버튼, 메뉴 등에도 활용되고 있다. 우리가 컴퓨터를 켰을 때 화면상에 있는 시작 메뉴 버튼, 작업도구, 문서 작업을 하기 위한 Microsoft Word 전부 사용자 인터페이스의 예시이고 스마트폰의 아이콘 버튼에도 쓰이며 여러 일상 생활에 활용 되고 있다.

문제점

사용자 인터페이스의 근본적인 문제는 전달하려는 인터페이스의 대역폭(Bandwidth)의 제한으로 화면 인터페이스라면 화면의 크기가 제한되고, 만약 소리라면 소리의 형태로 담을 수 있는 정보가 제한되며 촉각도 구분하여 보낼 수 있는 촉각의 종류가 제한되어 있다. 구체적인 예시로 일상에서 아직 완벽하게 기술 개발하지 못하여 생체인식에서 발생하는 문제들을 살펴보면, 지문인식을 할 때 기기가 완전히 사용자의 지문을 인식하지 못하고 안면인식을 할 때는 안경을 낀 사용자들은 안경을 벗고 안면을 인식해야하는 번거로움도 있으며 사람마다 목소리가 달라 뚜렷한 목소리 구분을 하지 못해 제대로 음성을 인식하지 못하는 경우도 많다. 동작 인식 또한 문제가 있는데 사용자가 손으로 제스처를 취했을 때 스마트폰이 사용자의 모션을 완벽히 따라가지 못하여 정확한 동작 구분이 힘들어 제스처를 반복해야 하는 문제가 있다.

전망

여러 UI 기술 중에 UI 기술 적용 모바일 기기 시장은 2019년 전체 50% 이상을 차지할 것으로 전망하고 있기 때문에 UI 기술 중 모바일 시장은 매우 중요해졌다. 여러 모바일 기기 중 스마트폰을 중심으로 UI 기술들이 개발 및 적용된 제품들이 시장에서 성공하고 있으며 인터페이스 관련 IT 기술의 발전이 경쟁을 촉진하고 있다. 과거에는 마우스나 키보드가 입력장치의 전부였지만 현재는 스마트폰, 터치기술, 생체인식 등 여러 UI 장치들이 쓰이고 있고 연구되고 있다. 미래에는 이러한 인터페이스 기술들이 생활에 모두 쓰일 것이고 나아가 오감(five-sense) 기술이 개발될 것이고 앞으로 모바일뿐만 아니라 현재에도 쓰이는 사물인터넷IoT, 생활 가구, 일상에 쓰이는 모든 물리적인 물체에 사용자 인터페이스가 쓰일 것으로 전망되고 지속적인 성장세를 이어 갈 것으로 보인다.

참고 자료

• 〈UI〉, 《네이버 지식백과》
• 〈사용자 인터페이스〉, 《위키백과》
• 전민수, 〈UI의 역사 A-Z〉, 《브런치》, 2017-10-07
• kaily, 〈UX/UI::3. 사용자 인터페이스의 개념과 이해〉, 《Kailog》, 2017-04-24
• 날아올라, 〈사용자 인터페이스 설계지침〉, 《네이버 블로그》, 2016-09-16
• 무키아, 〈사용자 인터페이스 기술의 현재와 미래〉, 《네이버 블로그》, 2019-02-07
• 김유진, 〈모바일 UI 기술동향 및 시장 전망〉, 《한국전자통신연구원》, 2012

같이 보기

• 인터페이스
• 그래픽 사용자 인터페이스(GUI)
• 웹 기반 인터페이스(WUI)
• 사물 인터넷

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

개발 : 프로그래밍, 소프트웨어, 데이터, 솔루션, 보안, 하드웨어, 컴퓨터, 사무자동화, 인터넷 □■⊕, 모바일, 사물인터넷, 게임, 메타버스, 디자인 인터넷 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) 위키 : 자동차, 교통, 지역, 지도, 산업, 기업, 단체, 업무, 생활, 쇼핑, 블록체인, 암호화폐, 인공지능, 개발, 인물, 행사, 일반