SlideShare a Scribd company logo
1 of 13
START
Interface
UI
사물과 사물 또는 사물과 사람 사이에 상호 소통을 하는 접점을 우리는 인터페이스라고 부릅니다
UI 디자인
과학적 근거에 따른 컴포넌트들의
레이아웃 고려
GUI 디자인
감성적이고 미적인 스타일링의 영역
GUI 또한 과학적이고 인지적인 이유가 있다!!!
GUI
<GUI Graphic User Interface를 도입한 Apple Lisa>
<물리 UI의 진화>
현재의 GUI 기원
1970년 설립된 제록스 팔로 알토 연구센터
(복사기 전문 제조업체)의 제록스에 의해 선보임.
이 연구소는 오늘날 우리가 사용하고 있는
첨단 테스크탑 컴퓨팅 기술의 거의 모든 것을 20년이나
앞서 개발해 낸 것으로 유명함.
어플리케이션의 부재로 시장에서 사라짐.
이후 우리가 알고 있는 스티브잡스의 애플 리사 등장.
GUI 진화와 정체
스큐어모피즘에 기반한 감성적이고 미적인 스타일영역으로만 발전하고 정체되었음.
스큐어모피즘
(SKEUOMORPHISM)
SKEOUS(도구) + MOPHISM(형태)
“원래의 도구 형태를 따라가는 방식” 이라는 뜻의 그리스어
고대 중세 현대
인간본능 – 익숙함에 대한 심리적 안정감
아이폰의 등장, 물리적 UI의 변화
GUI에 대한 과학적이고 인지적인 고민이 본격적으로 대두
마우스 손가락
아이폰의 GUI
스큐어모피즘 장점을 극대화
실제와 유사한 디자인 스타일은 형태만으로
“이렇게 생긴 물건을 쓸때와 똑같은 방법으로
쓰는거야” 라는 메세지를 전달 할 수 있다.
커스터마이징
맥과 같은 OS를 사용하지만
모바일 디바이스에 특화된 커스터마이징을 통해
이전의 구겨넣는 방식의 GUI가 가진 문제점
(가독성 및 조작)의 대안을 제시
플랫 GUI 디자인
미니멀리즘
미니멀리즘 디자인 스타일이 나타나면서 스큐어모피즘은 메인 디자인 스타일에서 배제
• 스큐어모피즘의 형태적인 특성이 너무 강해서 디자인적인 통일감을 주기가 어렵다.
• 생산성이 떨어진다.
• 인간의 정보 처리 능력을 많이 잡아 먹는다.
잠깐! 인간의 뇌 ARABOZA
뇌는 인간 에너지의 20%를 사용하며 에너지 소모를 죽이기 위해 익숙한 정보는 건너띄는 특성이 있음
10%90%
모션
스큐어모피즘의 빈자리
디바이스의 성능 발전으로 이전엔 구현하기 어려웠던 Motion이라는 요소가 인터페이스에 적극 적용되기 시작
material 디자인은 사물을 그대로 리얼한 방식으로 그리는 것에서 발전하여
리얼한 속성을 인터페이스에 부여하는 새로운 디자인 양식을 만들어냅니다."
GUI의 진화
플랫UI + 모션
컬러 3D요소
애니메이션
유행은 돌고 돈다.
트렌드는 히스토리에 기반하여 만들어집니다.
새롭게 등장하는 기술과 디바이스와 함께 화학적인 융합을 통해 새롭게 변해갑니다.
모바일
Thank you

More Related Content

More from Wonjun Hwang

Grid Layout (Kitworks Team Study 장현정 발표자료)
Grid Layout (Kitworks Team Study 장현정 발표자료)Grid Layout (Kitworks Team Study 장현정 발표자료)
Grid Layout (Kitworks Team Study 장현정 발표자료)Wonjun Hwang
 
Console API (Kitworks Team Study 백혜인 발표자료)
Console API (Kitworks Team Study 백혜인 발표자료)Console API (Kitworks Team Study 백혜인 발표자료)
Console API (Kitworks Team Study 백혜인 발표자료)Wonjun Hwang
 
Merge (Kitworks Team Study 이성수 발표자료 240426)
Merge (Kitworks Team Study 이성수 발표자료 240426)Merge (Kitworks Team Study 이성수 발표자료 240426)
Merge (Kitworks Team Study 이성수 발표자료 240426)Wonjun Hwang
 
This (Kitworks Team Study 김한솔 발표자료 2024.4.22)
This (Kitworks Team Study 김한솔 발표자료 2024.4.22)This (Kitworks Team Study 김한솔 발표자료 2024.4.22)
This (Kitworks Team Study 김한솔 발표자료 2024.4.22)Wonjun Hwang
 
Bun (KitWorks Team Study 노별마루 발표 2024.4.22)
Bun (KitWorks Team Study 노별마루 발표 2024.4.22)Bun (KitWorks Team Study 노별마루 발표 2024.4.22)
Bun (KitWorks Team Study 노별마루 발표 2024.4.22)Wonjun Hwang
 
스토리북(Storybook, Kitworks Team Study 우아라 발표)
스토리북(Storybook, Kitworks Team Study 우아라 발표)스토리북(Storybook, Kitworks Team Study 우아라 발표)
스토리북(Storybook, Kitworks Team Study 우아라 발표)Wonjun Hwang
 
mysql8 전환기 (Kitworks Team Study 김천규 발표자료)
mysql8 전환기 (Kitworks Team Study 김천규 발표자료)mysql8 전환기 (Kitworks Team Study 김천규 발표자료)
mysql8 전환기 (Kitworks Team Study 김천규 발표자료)Wonjun Hwang
 
Open AI SORA (키트웍스 팀스터디 발표자료 박준기 240315)
Open AI SORA  (키트웍스 팀스터디 발표자료 박준기 240315)Open AI SORA  (키트웍스 팀스터디 발표자료 박준기 240315)
Open AI SORA (키트웍스 팀스터디 발표자료 박준기 240315)Wonjun Hwang
 
Nest JS (Kitworks Team Study 이본훈 발표 240315)
Nest JS (Kitworks Team Study 이본훈 발표 240315)Nest JS (Kitworks Team Study 이본훈 발표 240315)
Nest JS (Kitworks Team Study 이본훈 발표 240315)Wonjun Hwang
 
JS Event Loop (Kitworks Team Study 김동현 발표)
JS Event Loop (Kitworks Team Study 김동현 발표)JS Event Loop (Kitworks Team Study 김동현 발표)
JS Event Loop (Kitworks Team Study 김동현 발표)Wonjun Hwang
 
Java Optional (Kitworks Team Study 김성호 발표)
Java Optional (Kitworks Team Study 김성호 발표)Java Optional (Kitworks Team Study 김성호 발표)
Java Optional (Kitworks Team Study 김성호 발표)Wonjun Hwang
 
XSS(Cross site scripting) - Kitworks Team Study
XSS(Cross site scripting) - Kitworks Team StudyXSS(Cross site scripting) - Kitworks Team Study
XSS(Cross site scripting) - Kitworks Team StudyWonjun Hwang
 
Flutter & Firebase (2) Kitworks Team Study
Flutter & Firebase (2) Kitworks Team StudyFlutter & Firebase (2) Kitworks Team Study
Flutter & Firebase (2) Kitworks Team StudyWonjun Hwang
 
얕은복사,깊은복사
얕은복사,깊은복사얕은복사,깊은복사
얕은복사,깊은복사Wonjun Hwang
 
Go언어로 디스코드 봇 만들기
Go언어로 디스코드 봇 만들기Go언어로 디스코드 봇 만들기
Go언어로 디스코드 봇 만들기Wonjun Hwang
 
완전 유용한 CSS 모음
완전 유용한 CSS 모음완전 유용한 CSS 모음
완전 유용한 CSS 모음Wonjun Hwang
 
2024 개발 트렌드
2024 개발 트렌드2024 개발 트렌드
2024 개발 트렌드Wonjun Hwang
 
디바운싱과 쓰로틀링
디바운싱과 쓰로틀링디바운싱과 쓰로틀링
디바운싱과 쓰로틀링Wonjun Hwang
 

More from Wonjun Hwang (20)

Grid Layout (Kitworks Team Study 장현정 발표자료)
Grid Layout (Kitworks Team Study 장현정 발표자료)Grid Layout (Kitworks Team Study 장현정 발표자료)
Grid Layout (Kitworks Team Study 장현정 발표자료)
 
Console API (Kitworks Team Study 백혜인 발표자료)
Console API (Kitworks Team Study 백혜인 발표자료)Console API (Kitworks Team Study 백혜인 발표자료)
Console API (Kitworks Team Study 백혜인 발표자료)
 
Merge (Kitworks Team Study 이성수 발표자료 240426)
Merge (Kitworks Team Study 이성수 발표자료 240426)Merge (Kitworks Team Study 이성수 발표자료 240426)
Merge (Kitworks Team Study 이성수 발표자료 240426)
 
This (Kitworks Team Study 김한솔 발표자료 2024.4.22)
This (Kitworks Team Study 김한솔 발표자료 2024.4.22)This (Kitworks Team Study 김한솔 발표자료 2024.4.22)
This (Kitworks Team Study 김한솔 발표자료 2024.4.22)
 
Bun (KitWorks Team Study 노별마루 발표 2024.4.22)
Bun (KitWorks Team Study 노별마루 발표 2024.4.22)Bun (KitWorks Team Study 노별마루 발표 2024.4.22)
Bun (KitWorks Team Study 노별마루 발표 2024.4.22)
 
스토리북(Storybook, Kitworks Team Study 우아라 발표)
스토리북(Storybook, Kitworks Team Study 우아라 발표)스토리북(Storybook, Kitworks Team Study 우아라 발표)
스토리북(Storybook, Kitworks Team Study 우아라 발표)
 
mysql8 전환기 (Kitworks Team Study 김천규 발표자료)
mysql8 전환기 (Kitworks Team Study 김천규 발표자료)mysql8 전환기 (Kitworks Team Study 김천규 발표자료)
mysql8 전환기 (Kitworks Team Study 김천규 발표자료)
 
Open AI SORA (키트웍스 팀스터디 발표자료 박준기 240315)
Open AI SORA  (키트웍스 팀스터디 발표자료 박준기 240315)Open AI SORA  (키트웍스 팀스터디 발표자료 박준기 240315)
Open AI SORA (키트웍스 팀스터디 발표자료 박준기 240315)
 
Nest JS (Kitworks Team Study 이본훈 발표 240315)
Nest JS (Kitworks Team Study 이본훈 발표 240315)Nest JS (Kitworks Team Study 이본훈 발표 240315)
Nest JS (Kitworks Team Study 이본훈 발표 240315)
 
JS Event Loop (Kitworks Team Study 김동현 발표)
JS Event Loop (Kitworks Team Study 김동현 발표)JS Event Loop (Kitworks Team Study 김동현 발표)
JS Event Loop (Kitworks Team Study 김동현 발표)
 
Java Optional (Kitworks Team Study 김성호 발표)
Java Optional (Kitworks Team Study 김성호 발표)Java Optional (Kitworks Team Study 김성호 발표)
Java Optional (Kitworks Team Study 김성호 발표)
 
XSS(Cross site scripting) - Kitworks Team Study
XSS(Cross site scripting) - Kitworks Team StudyXSS(Cross site scripting) - Kitworks Team Study
XSS(Cross site scripting) - Kitworks Team Study
 
Flutter & Firebase (2) Kitworks Team Study
Flutter & Firebase (2) Kitworks Team StudyFlutter & Firebase (2) Kitworks Team Study
Flutter & Firebase (2) Kitworks Team Study
 
PWA
PWAPWA
PWA
 
얕은복사,깊은복사
얕은복사,깊은복사얕은복사,깊은복사
얕은복사,깊은복사
 
Go언어로 디스코드 봇 만들기
Go언어로 디스코드 봇 만들기Go언어로 디스코드 봇 만들기
Go언어로 디스코드 봇 만들기
 
완전 유용한 CSS 모음
완전 유용한 CSS 모음완전 유용한 CSS 모음
완전 유용한 CSS 모음
 
2024 개발 트렌드
2024 개발 트렌드2024 개발 트렌드
2024 개발 트렌드
 
디바운싱과 쓰로틀링
디바운싱과 쓰로틀링디바운싱과 쓰로틀링
디바운싱과 쓰로틀링
 
Passkey
PasskeyPasskey
Passkey
 

gui history

  • 2. Interface UI 사물과 사물 또는 사물과 사람 사이에 상호 소통을 하는 접점을 우리는 인터페이스라고 부릅니다
  • 3. UI 디자인 과학적 근거에 따른 컴포넌트들의 레이아웃 고려 GUI 디자인 감성적이고 미적인 스타일링의 영역 GUI 또한 과학적이고 인지적인 이유가 있다!!! GUI
  • 4. <GUI Graphic User Interface를 도입한 Apple Lisa> <물리 UI의 진화> 현재의 GUI 기원 1970년 설립된 제록스 팔로 알토 연구센터 (복사기 전문 제조업체)의 제록스에 의해 선보임. 이 연구소는 오늘날 우리가 사용하고 있는 첨단 테스크탑 컴퓨팅 기술의 거의 모든 것을 20년이나 앞서 개발해 낸 것으로 유명함. 어플리케이션의 부재로 시장에서 사라짐. 이후 우리가 알고 있는 스티브잡스의 애플 리사 등장.
  • 5. GUI 진화와 정체 스큐어모피즘에 기반한 감성적이고 미적인 스타일영역으로만 발전하고 정체되었음.
  • 6. 스큐어모피즘 (SKEUOMORPHISM) SKEOUS(도구) + MOPHISM(형태) “원래의 도구 형태를 따라가는 방식” 이라는 뜻의 그리스어 고대 중세 현대 인간본능 – 익숙함에 대한 심리적 안정감
  • 7. 아이폰의 등장, 물리적 UI의 변화 GUI에 대한 과학적이고 인지적인 고민이 본격적으로 대두 마우스 손가락
  • 8. 아이폰의 GUI 스큐어모피즘 장점을 극대화 실제와 유사한 디자인 스타일은 형태만으로 “이렇게 생긴 물건을 쓸때와 똑같은 방법으로 쓰는거야” 라는 메세지를 전달 할 수 있다. 커스터마이징 맥과 같은 OS를 사용하지만 모바일 디바이스에 특화된 커스터마이징을 통해 이전의 구겨넣는 방식의 GUI가 가진 문제점 (가독성 및 조작)의 대안을 제시
  • 9. 플랫 GUI 디자인 미니멀리즘 미니멀리즘 디자인 스타일이 나타나면서 스큐어모피즘은 메인 디자인 스타일에서 배제 • 스큐어모피즘의 형태적인 특성이 너무 강해서 디자인적인 통일감을 주기가 어렵다. • 생산성이 떨어진다. • 인간의 정보 처리 능력을 많이 잡아 먹는다.
  • 10. 잠깐! 인간의 뇌 ARABOZA 뇌는 인간 에너지의 20%를 사용하며 에너지 소모를 죽이기 위해 익숙한 정보는 건너띄는 특성이 있음 10%90%
  • 11. 모션 스큐어모피즘의 빈자리 디바이스의 성능 발전으로 이전엔 구현하기 어려웠던 Motion이라는 요소가 인터페이스에 적극 적용되기 시작 material 디자인은 사물을 그대로 리얼한 방식으로 그리는 것에서 발전하여 리얼한 속성을 인터페이스에 부여하는 새로운 디자인 양식을 만들어냅니다."
  • 12. GUI의 진화 플랫UI + 모션 컬러 3D요소 애니메이션 유행은 돌고 돈다. 트렌드는 히스토리에 기반하여 만들어집니다. 새롭게 등장하는 기술과 디바이스와 함께 화학적인 융합을 통해 새롭게 변해갑니다. 모바일