[작성자:] designmonster

인공지능이란

관점1: 인간의 지각, 추론, 학습 능력 등 인간의 사고 프로세스를 모방하여 컴퓨터 기술로 구현한 것

관점2: 입력이 주어지면 출력을 한다. 공학에서 이야기하는 System

관점3: 수학적으로 표현할 수 없었던 복잡한 인간의 두뇌를 데이터를 기반으로 흉내내는 것

---

알고리즘이란

입력(Input) 자료를 미리 정해둔 명백한 규칙, 일련의 절차, 명령에 따라 처리하고 결과를 출력(Output)해내는 것

입력

외부에서 제공되는 자료가 있을 수 있음

출력

적어도 한 가지 결과가 생김

정확성

각 명령은 정확하고 명백해야 함

유한성

알고리즘 명령대로 수행하면 한정된 단계를 처리한 후 종료됨

효과성

모든 명령은 명백하고 실행 가능해야 함

---

인공지능의 개념과 범위

Deep Learning 의 핵심 요소

A.I.(Artificial Intelligence)

• 인간의 사고 프로세스를 모방한 알고리즘

Machine Learning

• 데이터를 바탕으로 학습으로 학습하는 알고리즘

Deep Learning

• 심층신경망(DNN) 알고리즘 활용

---

A.I. 의 대표적 활용 예

• 분류(Classification)
• 회기 분석(Regression)
• 추천(Recommendation)
• 군집 분류(Clustering)
• 이상 감지(Anormaly Detection)
• 연관성 분석(Association Rule)

---

A.I. 가 잘하는 것

빠르게 계산한다. 쉬지 않는다. 한 번 배운 것은 잊지 않는다. Automating Repetitive Work

영상 인식/처리

• 숫자/문자 인식
• 얼굴 인식
• 사물 인식

영상 재생성

• 사진 해상도 증가
• 영상 리터칭: 컬러링, 워터마크 제거

영상 생성/처리

• 예제 기반 영상 생성
• 영상 분리
• 영상 복원 등
• 가짜 배우 얼굴 생성 및 제어

예제

• Breeding tables
• New Design Idea
• Identifying Fake
• Automated Design Using Deep Learning
• Recipe to Dishes
• Buying Experience
• Sketch to Code
• Protecting IP

ai기술이 디자인에 적용된다면 어떤 미래가 기다리고 있을까?

ai를 처음 들었을 때가 언제였을까? 분명 일본 애니메이션 K-캅스에서 말하는 데커드가 지금 생각하면 ai라고 이야기할 수 있을 것 같은데, 그런 변신하는 로봇으로 세계를 구하는 것이 어릴 때의 꿈이었다. 정확하게 AI를 인지한 것은 중학교 1학년 도덕 시간에 스티븐 스필버스의 영화 AI 영화였다. 이때는 인공지능이 감정을 가지고 사람이 되고 싶어 한다는 정도의 느낌을 받았던 거 같다.

우리의 삶에 들어올 수 있다라는 생각을 하게 된 것은, Alpha Go의 등장이었다. 이때까지만 해도 나는 바둑만은 인간의 직관이 지배한다고 생각했다. 많은 경우의 수를 생각해야 하고 그중 결단과 상대를 읽는 능력이 필요하다고 생각했었지만, Alpha Go는 바둑도 결국 경우의 수라는 것을 가르쳐주었다. 그리고 많은 학습을 한 인공지능은 정직한 인간을 이길 수 있다는 것을 알게 해 준 순간이었다.

이런 과정을 격으면서 인공지능을 공부하지 않으면 안 되겠다는 생각이 들었다. 사실 Adobe에서 서비스하는 Photoshop둘의 배경 인식 기능이 좋아진 것을 보고 감탄하고 있다. 그리고 더 발전해서 디자인할 때 시간을 좀 더 빨라지기를 바랄 뿐 더 이상 바라는 게 없어졌다. 기술이 디자이너를 자유롭게 만들기를 바라면서 좀 더 내용과 생각 그리고 사람을 위해 디자인하기를 바란다. 그런 과정에서 AI는 반드시 필요한 요소이며 대학원에서 공부를 시작하고자 한다.

우리의 생명이 유한하니까, 아직 우리에게는 시간이 너무나 소중한 자원이기에… 불필요한 작업은 기계에게 맡기며 사람이 좀 더 중요한 일을 할 수 있기를 바라면서 이 글을 마무리하고자 합니다.

---

width / height

뷰포트의 너비와 높이. 뷰포트의 크기는 HTML body 콘텐츠를 표시하는 영역으로 실제 스크린의 크기와는 다르다. 반응형 웹 구현시 가장 일반적으로 사용하는 조건이 된다.

Value:

Applies to: visual and tactile media types

Accepts min/max prefixes: yes

@media all and (min-width:768px) and (max-width:1024px) { … } // 뷰포트 너비가 768px 이상 ‘그리고’ 1024px 이하이면 실행

@media all and (width:768px), (width:1024px) { … } // 뷰포트 너비가 768px 이거나 ‘또는’ 1024px 이면 실행

@media not all and (min-width:768px) and (max-width:1024px) { … } // 뷰포트 너비가 768px 이상 ‘그리고’ 1024px 이하가 ‘아니면’ 실행

---

device-width / device-height

스크린의 너비와 높이. 스크린은 출력 장치가 픽셀을 표시할 수 있는 모든 영역으로 일반적으로 HTML body 콘텐츠를 표시하는 뷰포트 보다 크다.

Value:

Applies to: visual and tactile media types

Accepts min/max prefixes: yes

@media all and (device-width:320px) and (device-height:480px) { … } // 스크린 너비가 320px ‘그리고’ 높이가 480px 이면 실행

@media all and (min-device-width:320px) and (min-device-height:480px) { … } // 스크린 너비가 최소 320px 이상 ‘그리고’ 높이가 최소 480px 이상이면 실행

---

orientation

뷰포트의 너비와 높이 비율을 이용하여 세로 모드인지 가로 모드인지를 판단한다.

Value: portrait | landscape

Applies to: bitmap media types

Accepts min/max prefixes: no

@media all and (orientation:portrait) { … } // 세로 모드. 뷰포트의 높이가 너비에 비해 상대적으로 크면 실행

@media all and (orientation:landscape) { … } // 가로 모드. 뷰포트의 너비가 높이에 비해 상대적으로 크면 실행

---

aspect-ratio

뷰포트의 너비와 높이에 대한 비율. ‘너비/높이’ 순으로 조건을 작성한다. min/max 접두사를 사용하면 너비 값의 최소/최대 비율을 정할 수 있다.

Value:

Applies to: bitmat media types

Accepts min/max prefixes: yes

@media all and (aspect-ratio:5/4) { … } // 뷰포트 너비가 5, 높이가 4 비율이면 실행

@media all and (min-aspect-ratio:5/4) { … } // 뷰포트 너비가 5/4 비율 이상이면 실행

@media all and (max-aspect-ratio:5/4) { … } // 뷰포트 너비가 5/4 비율 이하면 실행

---

device-aspect-ratio

스크린의 너비와 높이에 대한 비율. ‘너비/높이’ 순으로 조건을 작성한다. min/max 접두사를 사용하면 너비 값의 최소/대최 비율을 정할 수 있다.

Value:

Applies to: bitmap media types

Accepts min/max prefixes: yes

@media all and (device-aspect-ratio:5/4) { … } // 스크린 너비가 5, 높이가 4 비율이면 실행

@media all and (min-device-aspect-ratio:5/4) { … } // 스크린 너비가 5/4 비율 이상이면 실행

@media all and (max-device-aspect-ratio:5/4) { … } // 스크린 너비가 5/4 비율 이하면 실행

color

출력 장치의 색상에 대한 비트 수. 출력 장치가 컬러가 아닌 경우 0의 값에 대응한다.

Value:

Applies to: visual media types

Accepts min/max prefixes: yes

@media all and (color) { … } // 출력 장치가 컬러를 지원하면 실행

@media all and (color:0) { … } // 출력 장치가 컬러가 아니면 실행

@media all and (color:8) { … } // 출력 장치가 8비트 색상이면 실행

@media all and (min-color:8) { … } // 출력 장치가 8비트 이상 색상이면 실행

@media all and (max-color:8) { … } // 출력 장치가 8비트 이하 색상이면 실행

---

color-index

출력 장치가 색상 색인 테이블을 사용하는 경우 표현할 수 있는 색의 수. 출력 장치가 색상 색인 테이블을 사용하지 않으면 0의 값에 대응한다. 현재 제대로 지원하는 브라우저가 없다.

Value:

Applies to: visual media types

Accepts min/max prefixes: yes

@media all and (color-index) { … } // 출력 장치가 색상 색인 테이블을 사용하면 실행

@media all and (color-index:0) { … } // 출력 장치가 색상 색인 테이블을 사용하지 않으면 실행

@media all and (color-index:256) { … } // 출력 장치가 256 색을 지원하면 실행

@media all and (min-color-index:256) { … } // 출력 장치가 256 이상 색을 지원하면 실행

@media all and (max-color-index:256) { … } // 출력 장치가 256 이하 색을 지원하면 실행

---

monochrome

출력 장치가 흑백인 경우 픽셀당 비트 수. 출력 장치가 흑백이 아니라면 0의 값에 대응한다.

Value:

Applies to: visual media types

Accepts min/max prefixes: yes

@media all and (monochrome) { … } // 출력 장치가 흑백이면 실행

@media all and (monochrome:0) { … } // 출력 장치가 흑백이 아니면 실행

@media all and (min-monochrome:2) { … } // 출력 장치가 흑백이고 2비트 이상이면 실행

@media all and (max-monochrome:2) { … } // 출력 장치가 흑백이고 2비트 이하이면 실행

---

resolution

출력 장치의 해상력에 대응한다. min/max 접두사는 사각형 아닌 픽셀(인쇄 장치)에도 대응하지만 접두사 없는 resolution 조건은 사각형 픽셀에만 대응한다. 조건의 값으로 dpi와 dpcm 단위를 사용할 수 있다.

Value:

Applies to: bitmap media types

Accepts min/max prefixes: yes

@media all and (resolution:96dpi) { … } // 1인치당 96개의 사각형 화소를 제공하면 실행

@media all and (min-resolution:96dpi) { … } // 1인치당 96개 이상의 화소를 제공하면 실행

@media all and (max-resolution:96dpi) { … } // 1인치당 96개 이하의 화소를 제공하면 실행

---

scan

TV의 스캔 방식에 따라 대응한다. progressive 값은 초당 60회 수준의 고화질 스캔에 대응하고 interlace 값은 초당 30회 수준의 일반 스캔에 대응한다. 대부분의 HDTV는 progressive와 interlace 방식을 모두 지원하고 있다.

Value: progressive | interlace

Applies to: “tv” media types

Accepts min/max prefixes: no

@media tv and (scan:progressive) { … } // 초당 60회 수준의 고화질 스캔 방식 TV에 대응한다

@media tv and (scan:interlace) { … } // 초당 30회 수준의 일반 스캔 방식 TV에 대응한다

grid

출력 장치가 그리드 방식이면 대응한다. 그리드 방식은 타자기와 같이 고정된 글꼴만 사용하는 장치이다. 통상 출력 장치는 비트맵이 아니면 그리드 방식이다. 값은 정수 0과 1 뿐이고 0의 값은 비트맵 방식에 대응한다.

Value: 0 | 1

Applies to: visual and tactile media types

Accepts min/max prefixes: no

@media all and (grid) { … } // 출력 장치가 그리드 방식이면 실행

@media all and (grid:0) { … } // 출력 장치가 그리드 방식이 아니면 실행

@media all and (grid:1) { … } // 출력 장치가 그리드 방식이면 실행

---

출처: https://naradesign.github.io/article/media-query.html

디자인 사고 모든 무엇을 과 모든 어떻게를 의심하고 관찰한다. 그리고 결론을 도출한다. 다른 표현으로 하면 무엇을 어떻게가 고정되어 있는 것이 아무것도 없다는 생각. 마치 유체역학처럼.

그리고 선택과 포기를 통해 배우는 것 그것이 디자이너가 사용하는 사고의 수단이다.

---

예술가와 디자이너의 생각과 소통

생각의 방법들

• 연역: 수학공식으로 문제 풀기
• 귀납: 실험과 관찰로 수학공식 만들기
• 귀추: 가설과 추론으로 적절한 판단과 선택

가설

예술과 디자인의 개념이 다르다면 예술과 디자인의 사고 구조도 다르다.

도식

정보 그래픽 디자이너로서 도식화에 의한 접근. 도식으로 단순화되어 개념이 좁아지는 상황을 양해.

개념

현실에서 예술과 디자인은 각기 삶과 문화 전반을 포함. 하지만 둘이 대비될 경우 개념적 구분은 불가피.

1966년 사이버네틱스에 관한 학회에서 발표한 글에서 아렌트는 사이버네틱스의 도래로 인하여 인간의 정신적 활동에 대한 재평가가 이루어져야 한다고 말한다.

“사이버 네이션은 새로운 현상이다. 그것은 과거의 산업혁명과 구별되어야만 한다. 산업혁명은 뇌력이 아니라 근력을 대체한 것으로 이루어졌다. 오늘날 기계들은 우리가 언제나 인간 정신의 활동과 동일시해왔던 인간 활동의 일정한 양을 인수할 수 있다…. 이는 정신 활동의 재평가를 요청한다…. 지성적 활동 그 자체는 무엇인가?”

인간의 정신적 활동에 대한 재평가는 <정신의 삶> 제1권에서 지성과 이성의 구분을 통해 이루어진다. 아렌트는 그 구분을 철학자 칸트에게서 발견한다. 그리고 이 구분을 생각하기와 인식하기의 구분으로 재해석한다. “이성과 지성이라는 두 능력을 구별하는 것은 전적으로 다른 두 정신적 활동인 생각하기와 인식하기의 구분과 일치한다.” 그리고 “이성의 필요는 진리에 대한 추구가 아니라 의미에 대한 추구에 의해 고무된다. 그리고 진리와 의미는 같은 것이 아니다.”

디자인을 인간 “지능”의 최고 형태 중 하나로 보았을 때, 크로스 역시 생각하기와 인식하기를 혼동하는 오랜 관행을 따르고 있는 셈이다. 디자이너에게 어떤 지식이 필요하다는 데는 아무런 특별할 것도 없다. 최근 인공지능의 도래 이후에도 사라지지 않은 직업으로 디자이너가 꼽혔다. 왜일까? 아마 디자이너에게 특별한 것은 지능이 아니기 때문일 것이다. 오늘날 우리는 디자이너를 디자이너로 만드는 그것을 “디자인 사고”라고 부른다.

앎 = 지성 인식 이론

삶 = 이성 생각 실천

여기서부터 나는 도저히 이해가 되지 않는다. 인간은 감각 기관과 육체를 통해 세상과 교감하고 느낀다. 그러고 나서 생각이 발생한다. 이런 관점에서 봤을 때, 삶과 이성이 연결된다는 도식에는 나는 동의할 수 없다. 삶은 선택과 직관 그리고 더 나아가 타자와의 관계에서 발현된다고 생각한다. 이성이 우리의 삶에 미치는 영향은 극히 드물다. 하루에 우리는 이성적인 판단을 얼마나 하는가? 이성적인 판단으로 점철된 세상을 사는 사람이 있다면 그 사람의 내적 세계와 외적 세계의 통일성이 해쳐지는 과정이 얼마나 괴로울지를 판단할 수 있다면 이 소리가 얼마나 허왕되고 헛은 개념 혹은 말 놀인지를 알 수 있을 것이다.

---

이성에 있어 연역과 귀납

귀납은 과학의 절차를 뒤바꿈으로써 그것의 공허한 합리주의를 뜯어고치고, 새롭게 출발할 것이다. 베이컨에 따르면 스콜라 학파의 학문은 원리에서 출발하여 결론을 연역한다. 베이컨은 개별 사실에서 출발하여 모든 관련 사실들을 망라해서 차츰차츰 일반적인 원리로 높여 간다.

객관성의 칼란, 찰스 길리스피

이제 가추법(귀추 법)은 연구의 방법을 고안하는 기술로서 ‘방법에 대한 방법’이 되었다. 말하자면 ;무엇을 생각하는가(What to think)’가 아리 날 ‘어떻게 생각하는가(How to think)’에 관련된 방법이 된 것이다. 가추법이 추리의 개념에서 방법론적 과정으로 바뀌면서 일어난 가장 큰 변화는 가추적 가설이 귀납적 추리에서 독립하게된 것이다. 말하자면 가추법은 섬광과 같은 능적 측면만이 아니라 현상에 대한 지각 판단을 토앻 가설을 선택하고 그 가설을 설명하는 논리적 측면도 동시에 가지고 있다고 판단한 것이다. 가추법이 결과에서 원인을 추론하는 것이라면, 귀납법은 샘플에서 전체를 추론하는 과정이다.

이윤희, 찰스 샌더스 퍼스

연역

• 주석과 해석 – 번역
• 무엇을 + 어떻게 = [ ]

귀추

• 가설과 추론
• [] + 어떻게 = 결과(귀추)
• [] + [ ] = 결과(디자인 귀추)

미래가 불확실한 이성의 시대, 예술은 문제를 제기하고 디자인은 문제를 해결한다.

귀납

실험과 관찰 – 검증

무엇을 + [ ] = 결과