[카테고리:] UX Design

인류가 많은 빚을 지고 있는 기술이 있습니다. 바로 원으로 회전을 하는 기술입니다. 수레의 바퀴부터 시작해, 나사, 모터, 엔진 그리고 마우스 스크롤에 이르기까지 우리가 편리하게 사는 문명에 회전 운동을 활용하고 있습니다. 회전 운동의 재미있는 점은 계속 직선으로 가는 듯 보이나 어느 센가 원점으로 돌아간다는 것입니다. 우리의 인생도 절벽이라고 생각하는 좌절의 순간들이 있습니다. 하지만 그 지점이 제가 얼마나 깊은지 가늠할 수 없으나, 여러분들이 이겨내고자 한다면 반드시 이겨낼 수 있을 것입니다.

인생은 회전목마 제가 좋아하는 음악 중에 하나입니다. 뭔가 정말 돌도 도는 느낌? 왈츠 느낌이라고 해야 하나요? 여하튼 이 노래를 들으면서 시작하고자 합니다. 회전운동 내지는 원운동을 인터페이스에서 사용하는 경우가 많습니다. 그중 가장 잘 사용했다고 생각되는 사례를 5가지 정도 설명하고자 합니다. 물론 여러분들도 다아는 것이지만 제가 선정한 이유를 한번 들어봐 주시겠어요?

---

1. 자동차 핸들

자동차 운전은 참 재미있습니다. 운전면허를 따고 운전을 하고 싶어 아버지 몰래 아버지 차를 끌고 나간 적도 있고, 연인에게 잘 보이기 위해서 차를 가져가 후진할 때 그 알죠 뭔지. 자동차는 20C 대표 산업답게 20C의 모든 것이 들어있습니다. 아니 정확하게 말해서 21C까지 개발된 모든 기술들의 집합체라고 할 수 있습니다. 기원전에 발명한 바퀴부터 지금은 컴퓨터 역할을 하는 부품까지 들어가 있으니까요. 그래서 제조업의 끝판왕이라는 별명이 괜히 붙은 산업이 아닙니다.

지금은 자율주행 시대로 가는 초입에 있습니다. 자율주행이 되면 당연히 핸들도 숨겨졌다 나왔다 하지 않을까요? 아니면 큰 방향만 설정할 수 있게 조이스틱으로 변하지 않을까요? 수동으로 운전하는 지금은 자동차 핸들을 통해 가는 방향을 정합니다. 핸들을 좌로 돌리면 좌측으로 이동할 수 있고, 우로 돌리면 우측으로 이동할 수 있습니다.

이렇게 직관적일 수 있을까요 왼쪽으로 가고 싶으면 왼쪽 오른쪽으로 가고 싶으면 오른쪽, 회전의 정도에 따라 회전 반경이 정해지는 이런 환상적인 직관성 때문에 자동차 핸들을 회전 모티브 인터페이스에 뽑았습니다.

---

2. 나사선

나사선이라고 하는 것은 회전 운동을 수직운동으로 바꿔주는 기술입니다. 공구함에서 가장 많이 쓰는 장비 중 하나인 것이 +자 드라이버인 것을 보면 범용성에서도 높은 점수를 줄 수 있습니다. 나사선은 나사에서만 쓰이는 것은 아닙니다.

여기에서만 쓰이는 것이 아닙니다. 만년필에 잉크를 채워보신 적이 있으신가요? 만년필 컨버터에 잉크를 채울 때 피스톤 운동을 하게 하는 것이 나사선입니다. 돌리면 위아래로 움직이는, 다소 직관적이지는 않지만 일상생활에 많이 침투해 있고, 인터페이스로서의 가치도 높다고 판단해서 나사선을 회전 모티브 인터페이스에 뽑았습니다.

---

3. 손목시계의 용두(Crown)

아날로그시계를 차 보셨나요? 이제는 남성들의 재력을 나타내는 상징이 된 손목시계 말입니다. 하지만 손목시계는 애플 워치 혹은 갤럭시 기어처럼 웨어러블 디바이스의 한 축을 담당하는 스마트워치의 마더 모델입니다. 여기서 과거 손목시계에서는 용두가 중요한 역할을 했습니다. 전기를 사용해 모터로 무브먼트가 돌아가지 않을 때 더더욱 중요한 역할을 했습니다. 시간을 맞추는 역할을 용두가 했기 때문입니다.

용두는 돌리는 방향에 따라 분침이 움직이거나 기능이 많은 모델에서는 시침 혹은 다른 나라의 시계들까지 만질 수 있게 되어 있습니다. 그야말로 미세 공업의 끝판왕입니다. 시계를 맞출 때 전문가를 제외하고 내가 돌리는 방향이 어디로 갈지 몰라 항상 위로 돌렸다 아래로 돌리고 아래로 돌렸다 위로 돌리곤 합니다. 이것이 조금 불편한 지점이긴 하지만 용두를 위아래로 돌리면 분침이 회전을 하게 됩니다. 돌아가는 회전운동의 맥락은 유지했지만, 직관적이지 않아 오류를 많이 일으킵니다.

이 용두를 적용한 스마트 워치가 있으니 바로 애플 워치입니다. 실제로 이것은 시간을 맞추는 데 사용되지 않습니다. 마우스 휠과 같이 UI를 위아래로 움직이게 하거나, 줌인 줌 아웃하는 기능을 합니다. 아날로그시계의 용두보다 애플 워치의 용두가 더 직관적인 이유는 용두를 움직이는 방향대로 UI가 따라오기 때문입니다.

여기서 힌트를 얻을 수 있습니다. 사람이 생각하는 멘털 모델대로 UI 혹은 기계적 장치가 움직여야 한다는 교훈을 주는 것 같아 회전 모티브 인터페이스에 뽑았습니다.

---

4. 마우스 휠

마우스 휠이 없는 마우스 생각만 해도 끔찍합니다. 지금 이 블로그를 보실 분들은 다 마우스 스크롤을 통해 혹은 모바일의 터치 스와이프를 통해 스크롤을 하고 계실 것입니다. 초기 컴퓨터에서는 스크롤이 없었습니다. 당연히 우측 클릭 버튼도 없었지요. 하지만 지금은 반드시 3가지의 기능은 탑재해야 합니다. 좌클릭, 우클릭 그리고 스크롤 휠.

마우스 휠에 대한 논쟁이 있습니다. 맥이 초래한 논쟁이기도 합니다. 여러분들은 스크롤 휠을 내릴 때, 손바닥 쪽으로 휠을 돌릴 때 화면이 하단 쪽이 보이도록 이동해야 한다고 생각하세요? 아니면 반대로 이동해야 한다고 생각하세요? 이거 가지고 논쟁을 벌인적이 있습니다. 물론 쓸 때 없지만 이 블로그에 쓰고 있네요…

휠은 아래로 움직일 때 하단 쪽 콘텐츠를 노출하는 게 맞다고 생각합니다. 하지만 애플에서 나온 예쁜 쓰레기인 매직 마우스는 터치 인터페이스를 적용해서 반대가 맞다고 생각합니다. 마우스는 하나이지만 두 개의 방식이 존재하는 것이 참 어설프긴 한데, 제가 보기엔 이 방안이 제일 직관적입니다. 두루마리 휴지를 바닥에 두고 위로 올라오게 해서 실험을 하면 하단의 것을 보고 싶으면 아래에서 위로 합니다. 이것은 물성을 가진 터치가 들어갈 때의 이야기라고 생각합니다. 그리고 휠은 내가 가고 싶으면 내리는 것이고 올라가고 싶으면 올리는 것이라고 생각합니다.

---

5. iPod Classic, MS Surface Dial, 색상 휠

아이팟 클래식의 충격, 제가 아이리버에서 아이팟으로 넘어갔을 때의 충격과 만족감은 이루 말할 수 없었습니다. 50G의 용량과 터치 클릭 휠 UI 그리고 플로우 커버 기능은 환상이었습니다. 그때 휠로 음량을 조절하고 좌우 버튼으로 음악을 이동했습니다. 리스트에서 하단으로 이동할 때 휠을 돌리면 움직였습니다. 다소 직관적이진 않지만 참신했습니다. 이 또한 아이폰이 잘 되면서 없어진 장비입니다.

MS Surface Dial은 이와 같은 장비이나 옛날 라디오를 조작하는 방식으로 돌려가면서 사용하는 장비이다. 돌리고 선택하는 것을 하는 장비인데, 많이 성공한지는 모르겠다. 하지만 아이팟 클래식과 같은 UI 원리를 사용하고 있어서 가지고 왔다.

마지막으로 색상 휠은 Adobe에서 선택하는 색 선택은 색상, 채도, 명도를 직관적으로 바꾸기 힘들다. 이 말은 색을 선택할 때 두세 가지 단계가 더 필요하다는 이야기이다. 반면 색상 휠 UI는 색상환을 돌면서 그 안에서 채도와 명도를 선택할 수 있는 권한을 줘 훨씬 더 직관적으로 선택할 수 있다.

---

다음번에는 눈에 띄는 모티브가 있으면 이어가도록 하겠습니다.

오락실에서 가장 재미있게한 게임은 무엇인가요? 저는 킹오프파이터즈, 철권 그리고 삼국지입니다. 이들 게임 모두다 조이스틱으로 방향을 조절해 하는 게임입니다. 조이스틱은 꽤나 직관적입니다. 직관적이면 배울 필요가 없고, 기억할 필요가 없습니다. 숙련의 기간만 거치면 누구나 능숙하게 할 수 있습니다. 너무 복잡한 서비스들이 많아져 우리의 삶을 편리하게 만들고 있지만, 직관적인 인터페이스가 늘어나지는 않습니다. 직관적인 것과 아름다움 사이의 어느 지점을 찾아야한다. 하지만 직관적인 인터페이스가 줄어들고 있다.

---

조이스틱

내가 어린시절에는 이런 오락실에 앉아서 위에 동전으로 예약을 걸어두고 게임을 하곤 했다. 내 친구 장모씨는 아침에 등교길에 게임을 하다가 지각하는 사태까지 만들 수 있는 실력을 가진 친구가 있었다. 물론 나는 그렇게 게임을 잘하지 못해 뒤에서 지켜만 보는 입장이었다. 조이스틱의 사용법을 아는 것과는 별개로 화면의 움직임에 따라 내 몸을 움직여 즉각적으로 반응하게 한다는 것이 참 어려운 일이 었다. 그때 그 친구를 보면 지금도 드는 생각이지만 물아일체의 경지다. 내가 가고싶다고 생각하면 조이스틱을 움직여 움직일 수 있다. 나는 피하고 싶어도 잘 안되는데…

초기 조이스틱은 이렇게 생겼다.

손 전체로 잡는 것이다. 그리고 좌측으로 주인공을 보내고 싶으면 왼쪽으로 힘을 줘 조이스틱을 기울이면 된다. 위로 가고 싶으면 상단 방향으로 조이스틱을 기울이면된다. 너무나 직관적이다. 그리고 여기서의 제약은 좌우상하만 움직일 수 있다. z축 인풋은 받아들일 수가 없다. 이 조작법을 모바일 터치 디바이스가 들어오면서 비슷하게 구현한 것이 이런 화면 본적이 있을 것입니다.

---

가상 방향키(조이스틱) UI

브롤스타즈와 lol wildlift에서 사용하는 방향 UI입니다. 보면 동전을 넣어하는 게임기와 구성이 조금 다를뿐 원리는 같습니다. 여기서 게임기의 버튼 보다는 더 직관적이 되었습니다. 왜냐하면 어떤 버튼이 무엇을 일으키는지 시각적으로 확인할 수 있게 되어있습니다.

---

물리 버튼의 응용 사례

아래 사례들은 조이스틱과 같은 원리로 인식합니다. 하지만 상하좌우에 더해 Z축 버튼 까지 같이 있습니다.

iriver MP3

2014년도 내가 가장 가지고 싶었던 물건입니다. 휴대폰 보다 노래를 너무 듣고 싶었습니다. 그때 sg워너비 Timeless가 어떻게 그렇게 좋던지…

상하 버튼을 조작하면 음량 조절을 할 수 있었고, 좌우 버튼을 조작하면 이전곡, 다음곡으로 넘어갈 수 있었습니다. 그리고 내 기억이 맞다면 중앙 버튼은 메뉴를 호출하는 버튼이었습니다. 물리키 근처에 힌트를 다 배치해서 사용자들에게 혼란을 최소화 할 수 있는 방법을 선택했습니다. 이런 것을 사용자들은 배려라고 느낍니다.

LG Monitor

중앙 버튼으로 켜고/끄고 합니다. 그리고 메뉴는 화면에서 위와 같이 노출되며 좌측을 선택하면 입력을 고를 수 있는 구조로 되어있습니다. 모니터가 켜져있는 상태에서 중앙 버튼은 메뉴 호출/취소 기능을 한다. 여기서 재미있는 것은 화면에 노출된 모양으로 사용자에게 UI 조작의 힌트를 줬다는 것이다.

---

이상 조이스틱과 관련된 UI를 확인해보는 시간이었습니다~

항상 우리는 실수를 하면서 살고 있습니다. 실수를 안 하는 날을 찾는 것이 빠를 정도로 많은 실수를 저지릅니다. 그중 하나는 인터넷 뱅킹을 할 때 생깁니다. 돈을 잘못 보냈을 때, 돌려받기 힘들다는 점입니다. 물론 지인들이나 내 계좌로 옮길 때는 문제가 발생해도 수습할 수 있습니다. 하지만 내가 모르는 사람에게 보낼 때 일은 점점 커집니다. 그리고 착오 송금 지원제도가 실행되었지만 이는 사후적 대응입니다. UI에서 잘못 보내는 것을 방지한다면 우리 사회에 얼마나 많은 자원을 절약할 수 있을까요? 업스트림이 중요합니다. 이래서 문제가 발생한 이후 처리하는 것보다 문제가 발생하지 않도록 UX 구성하는 것이 가장 값싸고 편리한 해결책입니다.

---

돈은 많은 가능성이 있는 물건입니다. 그래서 현대 자본주의 사회에서 많은 사람들이 바라는 것 중 하나입니다. 돈은 섬유로 만든 종이에 인쇄된 형태로 만들어져 있습니다. 이는 금본위를 채택한 과거부터 금본위를 파기한 지금까지 사용된 형태입니다. 종이는 가볍고, 많은 양을 가지고 있을 수 있습니다. 하지만 현재는 모바일 뱅킹이 대세가 되면서 현금 없이 카드와 모바일만으로 자본주의 사회에서 생활할 수 있습니다. 이때 문제가 발생합니다. 그저 숫자만 왔다 갔다 하면서 정말로 숫자의 가능성을 믿고 우리는 거래를 실행합니다.

실물을 주고받을 때는 착오를 일으킬 가능성이 현저히 떨어집니다. 하지만 숫자로 비대면으로 송금을 할 때는 많은 오류가 발생합니다. 이는 사람의 공통된 특징입니다. 추상화된 것에서 많은 오류를 일으킵니다.

---

KAKAO BANK와 토스 뱅크의 노력

전문 디지털 뱅크의 노력은 아래와 같습니다.

• 최근 내가 문제없이 보낸 계좌번호 리스트를 먼저 보여주며 선택할 수 있도록 합니다.
• 은행 선택 후 선택한 은행을 지속적으로 노출합니다.
• 이체 금액 입력 전에 사용자 이름을 검색해 누구에게 보내는 것인지 확인시켜줍니다.
• 보내기 전 최종 확인을 수취인 이름으로 할 수 있게 되어있습니다.
• 송금 이후 확인 및 다음 절차

밑에 글을 읽기 전 여러분이 이체를 한다고 생각하고 해당 글을 보시면 많은 도움이 될 것입니다. 보통 이체할 금액, 계좌번호만 머릿속에 있으면 머리가 복잡해지지 않나요?

---

1. 기존 송금 계좌 번호 노출

제 경우를 보면 특별한 경우가 아니면 대부분 송금하는 사람에게만 송금하기 때문에 송금 첫 화면에서 계좌를 선택해 이체하게 됩니다. 이 경우를 보았을 때 사용자에게 편의를 제공하고 기존에 송금한 내역이 문제가 없다면 앞으로도 문제가 없을 가능성이 높으니 해당 UX는 사용자 품도 줄이고 안전하게 만든 장치입니다. 하지만 최근에 잘못 보냈는데, 그 계좌가 계속 최근 리스트에 노출되어 있다면 착오 송금을 또 만들 수 있는 계기가 됩니다. 따라서 최근 송금리스트에 가장 필요한 기능은 삭제 기능입니다.

---

2. 은행 선택 후 선택한 은행 지속적으로 노출

송금하겠다는 마음이 급하면 계좌번호를 빨리 넣고 싶어 집니다. 하지만 순서가 있는 법. 은행을 선택하고 계좌번호를 넣을 수 있게끔 설계되어 있습니다. 하지만 이때 앞서 말한 송금하겠다는 마음이 급하면 외운 계좌번호와 돈을 입력한다고 은행을 잘 보지 못하는 경우가 있습니다. 이때 이체할 은행을 은행 BI와 함께 은행명을 상단에 지속적으로 노출하면 착오 송금을 방지할 수 있게 됩니다.

---

3. 금액 입력 전에 앞서 입력한 정보를 통해 수취인 이름 표기

은행명과 계좌 번호만 있으면 수취인의 이름을 알 수 있습니다. 금액을 입력하기 전 단계인 상태에서 상단에 받는 사람 이름을 노출시킨다면 정말 큰 오류를 방지할 수 있습니다. 하지만 정말 우연의 일치로 잘못 보냈는데 받는 사람 이름과 같다면 우리는 그것을 오류로 파악할 수 없습니다. 받아야 될 사람이 못 받았다고 이야기하기 전까지는 알 수 없습니다. 이럴 확률은 거의 없습니다. 물론 이것까지 고려하면 더욱 좋은 UX/UI가 될 것이라고 믿습니다.

---

4. 보내기 전 최종 알림

보내기 전 최종 화면에서 반드시 확인해야 하는 정보는 수취인의 이름과 보내는 금액입니다. 다른 정보들을 어떻게 노출할 것인가는 사실 지금 이 두정보에 비하면 배부른 소리입니다. 수취인의 이름과 금액을 정확하게 사용자에게 인지시키는 마지막 기회입니다. 여기서 확인 버튼을 누르면 돈은 넘어가고 그때부터 돌려받기 굉장히 까다로운 상황에 직면하게 됩니다. 따라서 여기서 중요한 두 가지 정보 수취인의 이름과 송금하는 금액을 반드시 눈에 띄게 해야 하며, 이전에 이와 같은 팝업을 띄우면 절대로 안됩니다. 피로감 때문에 반사적으로 다음 혹은 완료 버튼을 누르는 순간 착오송금으로 넘어가게 하는 지름길을 만들어 놓은 것과 같으니까요.

---

5. 송금 이후 확인

송금 이후 확인 화면은 이체가 성공적으로 완료되었음을 알려주는 화면입니다. 여기에도 수취인의 이름, 금액 그리고 은행 정보 계좌번호 정보 등이 노출되면 좋습니다. 그 이후 송금을 했다는 것을 확인해달라는 차원에서 해당 메시지를 공유할 수 있는 버튼이 있으면 금상첨화입니다.

---

여러분들은 이런 오류를 범하지 않았으면 합니다. 잘못 보내면 정말 가슴 아픕니다. 그리고 돌려받기까지 얼마나 많은 시간이 걸릴지 알 수가 없습니다. 이런 중요한 문제를 사전에 방지하는 역할을 반드시 수행해야 합니다. 이것이 가장 싸게 막을 수 있는 방법입니다.

---

위의 이미지는 디자이너로서 무서워질 수도 있는 영상이다. 이것은 GPT-3*를 통해 만든 FIGMA에 플러그인을 통해 모바일 UI화면을 만들어내는 영상이다. 영상 내용을 살펴보면 자연어(우리가 사용하는 언어)를 통해 화면을 만들어내는 것을 확인할 수 있다. 그럼 여기서 2가지의 큰 질문이 생긴다. UI 디자이너의 미래는 없어지는 것인가? 그리고 이 플러그인은 어떻게 동작하는 것인가?

---

1. UI 디자이너의 미래

UI 디자이너의 수요는 줄어들 수 있지만, 인사이트가 있는 UI 디자이너는 걱정 말자.

나는 Photoshop으로 UI를 친 마지막 세대의 디자이너가 될 것이다. 그때는 Pixel 베이스로 화면을 쳤고, Adobe CS6는 가혹하리 만치 현재의 기본적인 기능이라고 할 수 있는 간격을 재주는 기능이 없어 가이드 플러그인을 새로써야 했다. 그리고 가이드 PSD를 만들어야 했다. 그래서 메인 디자이너들은 화면을 치고 가이드를 치는 디자이너가 있었다. 하지만 Sketch의 등장으로 가이드를 치는 작업자는 없어졌다. 그 역할을 Sketch가 했고, 더 나아가 Zeplin이 그 역할을 대체했다. 지금은 가이드를 쳐야 하는 이유는 거의 없어진 상황이다.

Sketch는 Mac OS 전용 프로그램이라 지금은 Web을 기반으로 한 FIGMA로 지각변동이 일어나고 있는 중이다. 물론 XD도 있지만 Sketch를 대응하고자 나온 것이며, 큰 틀에서 봤을 때, Adobe 프로그램과의 호환을 제외하면 차이가 없다. 근데 이렇게 툴의 상황이 변할 때 주변의 변화는 무엇이 있었나. 그것을 살펴보면 주변에 디자이너가 적어도 프로젝트를 진행하는데 무리가 없었다는 것이다.

위의 영상은 그를 시사하는 바이다. 요소를 얹어 놓으면 그 다음 화면의 규칙과 요소를 조작하는 것은 디자이너의 일이 되는 것이다. 툴이 변화되어도 콘텐츠를 올려놓고 전체적인 균형을 보고 결정하는 것은 결국 디자이너의 몫이다. 아니 디자인적 안목이 있는 사람의 것이다. 그래서 내가 기획자로 이직한 첫 번째 이유이다. 툴이 발달할수록 그에 상응해 디자이너는 줄어든다. 하지만 A.I. 가 아무리 발전한다고 해도, 기능을 정의하고 전략적 결정을 내리는 것은 사람이 될 것이라는 확신에서 기획자로 전향하게 되었다. 물론 디자인이 지치기도 해서 포기했다.

디자이너는 역사적으로 봤을 때, 기술의 발전을 주도하기 보다는 주어진 기술을 활용해 사람과의 커뮤니케이션을 원활하게 만드는 역할을 했다. 지금 절체절명의 위기이자 기회가 될 수 있다. A.I. 는 툴이다. 이 툴을 활용해 어떻게 효율적인 결과물을 낼 것인가? 그리고 그 이후에 결과물에 핵심적인 것은 무엇인가? 그리고 시각적 인사이트를 통해 사람과 소통하는데 어떤 역할을 할 것인가? 다가올 시대에 디자이너에게 물어야 할 질문이다.

답은 스스로 내길 바란다.

---

2. 해당 GPT-3 의 만들어 내는 방식

모든 웹 상에 있는 UI디자인 데이터 혹은 UI 디자인 잘하는 법 그리고 가이드라인을 통해 학습하고 있다.

대학원 수업에서 배운 내용을 인용한 것이라 약간의 오차는 있을 수 있습니다.

디자이너는 사람마다 차이가 있을 수 있으나, 능력이 가장 신장되는 기간은 학교에서 이고 대리 혹은 선임의 기간에 디자이너로서의 발전을 많이 하는 것 같다. 그것을 경험을 축적하는 방식으로 좋고, 나쁨, 옳고, 그름을 판단할 수 있게 된다. 그리고 디자인을 함에 있어 숙련도도 올라간다. 하지만 디자이너는 사람의 한계를 뛰어넘을 수 없다. 물론 타고난 사람은 학습이 없어도 대단한 성과를 낸다. 하지만 본인이 평범하다고 판단된다면, 경험이 절대적인 지표이다.

하지만 사람들이 블로그나 인터넷에 올라온 결과물 혹은 100가지 요령 등 경험을 정재해 올리는 모든 글 혹은 콘텐츠를 학습할 수 있다면 얼마나 큰 도움이 될까? 생각해본 적이 있는가? 그런 관점에서 봤을 때, 사람은 한계가 명확하다. 읽을 수 있는 글의 양과 조직할 수 있는 지식의 양 그리고 속도가 한계가 명확하다. 그리고 망각. 인간의 장점이자 단점인 망각이다. 하지만 A.I. 는 한번 학습을 하게 되면 망각하지 않는다는 장점이 있고, 이를 100% 활용할 수 있다. 이에서 사람보다 강점을 가지고 있다. 그리고 처음에 이야기한 정제된 정보를 활용해 디자인 툴을 만들기 시작한다.

그 과정에 있는 것이 GPT-3 FIGMA 플러그 인 이며 앞으로의 발전을 기대한다.

---

GPT-3

OpenAI사에서 만든 3세대 언어 예측 모델

Generative Pre-trained Transformer 3(GPT-3)은 딥러닝을 이용해 인간다운 텍스트를 만들어내는 자기 회귀 언어 모델이다. openAI사가 만든 GPT-n 시리즈의 3세대 언어 예측 모델이다. GPT-3의 전체 버전은 1,750억 개의 매개변수를 가지고 있어, 2020년 5월 도입된 이전 버전 GPT-2보다 2배 이상 크다. 2020년 7월 현재 베타 테스트 중에 있으며, 사전 훈련된 언어의 자연어 처리(NLP) 시스템의 일환이다. GPT-3 출시 전 가장 큰 언어 모델은 2020년 2월에 선보인 마이크로소프트의 튜링 NLG로 GPT-3보다 용량이 10배 적었다.

GPT-3가 수행가능한 작업으로는 각종 언어 관련 문제풀이, 랜덤 글짓기, 간단한 사칙연산, 번역, 주어진 문장에 따른 간단한 웹 코딩이 가능하다.

GPT-3에서 생성되는 본문의 질은 매우 높아 유익성과 위해성을 동시에 지닌 인간이 작성한 본문과 구별하기 어렵다. 31개 오픈 AI 연구진과 엔지니어들은 GPT-3을 소개하는 2020년 5월 28일 논문 원본을 발표하면서 GPT-3의 잠재적 위험을 경고하고 위험 완화를 위한 연구를 요구했다. 호주 철학자 데이비드 찰머스는 GPT-3을 “지금까지 생산한 AI 시스템 중 가장 흥미롭고 중요한 시스템 중 하나”라고 설명했다.

2020년 10월부터 openAI는 GPT-3를 마이크로소프트 애저를 통해서 독점 공급할 것이라고 밝혔다. 지금까지 openAI가 추구해왔던 비영리, 오픈소스와 반대되는 행동이라 비판이 나오고 있는데, 한 편에선 이 정도 성능의 언어 모델을 만드는데 들어간 비용을 생각해보면 어쩔 수 없었다는 의견이 나오기도 한다.

---

출처

https://prototypr.io/post/gpt-3-design-hype

https://namu.wiki/w/GPT-3

유전자 알고리즘(그네 타기)

---

머신러닝의 세 가지 타입

Supervised Learning

• 정답이 주어진다.
• 비교적 문제풀이가 쉽다.

Unsupervised Learning

• 부정 방정식 (x-1)(y-1) = 1
• 좋은 조건이 주어지거나 잘 찍는 수밖에 없다.
• 특정 조건이 있을 때만 정답이 주어질 수 있다.
• 기본적으로 문제풀이가 어렵다.
• 내 안에 정답이 있다.(문제에 정답이 있다)

Reinforcement Learning

• 정답이 아닌 Reward 가 주어진다.

---

머신러닝을 하기 위한 데이터

Paired data

• 숫자 손글씨 인식기(정답이 주어진다, 문제풀이가 쉽다, 쉬운이유는 짝을 이루는 데이터이기 때문이다.)
• Object Detection
• Image Segmentation
• Pose Estimation
• Machine Translation
• 인공지능 기술을 적용하는 것은 어떤 Paired Data를 가지고 있는지 생각해보는 것에서 출발

Unpaired Data

• 말과 얼룩말이 있을 때
• 정답은 없지만, 정답 그룹의 데이터는 있다. 할 때 Unpaired Data
• Deep Fake
• 얼굴 특징 바꾸기
• Universal Music Translation
• tictoc의 코믹필터

Data 가 없다면(강화학습)

• 모르는 상황에서 사용하는 전략
• 깨지면서 배우는 전략이다.
• 개발자가 똑똑하면 똑똑한 AI가 나온다.
• State, Action, Reward
• 차량

내 안에 Paired Data가 있다.

• 그냥 데이터일 때
• generated photo
• 소설을 추리할 수 있다.→랭귀지 모델
• Everybody Dance Now(소스오브젝트를 타겟 오브젝트로 치환하는 것, 타겟 영상에서 같은 오브젝트 x 값을 치환한다면)

A.I. 적용 확대가 가져온 이슈들

A.I. 가 사람을 대체할 것 인가?

Stereotypes in Search Engine Results

검색 엔진 역시 사람의 편견에 기반해 검색 결과를 노출하게 된다.

---

디자이너가 A.I. 를 사용하게 된다면

• 디자이너가 주도권을 쥐고 있는 디자인
• 사용자의 목표를 성취하게 하는 디자인
• 윤리학(목표로하는목표로 하는 사용자를 목표로 하는 윤리, 인류를 위한 윤리)

---

A.I.가 가져온 편견은?

신뢰를 위한 투명성을 만들기 위해서

• 누가 데이터를 만들어내는 것인가?
• 누가 시스템을 프로그램 혹은 훈련시킬 것인가?
• 왜 시스템에 해당 데이터를 제공해야 하는 것인가?

---

인공지능 윤리

윤리라는 것은 항상 타자와 공존하기 위한 규칙이다. 인공지능이 무섭지만 유용한 도구로서 개발됨으로써 우리는 윤리에 대한 문제를 생각해야 된다.

• A.I. 는 사람과 인류를 위해 존재해야 한다.
• A.I. 는 인간이 중심이 되어 인간의 명령에 의해 작동되어야 한다.
• A.I. 는 공평하고 특정 젠더, 인종, 연령 등에 대한 편향성이 없어야 한다.
• 인류를 위해 활용되는 A.I. 의 이점은 전 세계적으로 공유되어야 한다.
• 인류를 위해 활용되는 A.I.의 전 세계적으로 공유되어야 한다.
• A.I. 시스템 내에는 윤리적 블랙박스(Ethical Black Box)가 장착되어야 한다.
• A.I. 가 윤리적으로 활용되는지에 대한 글로벌 거버넌스 조직이 필요하다.
• 로봇은 법률과 사회적 규범을 준수하고 로봇에 책임을 전가하는 것을 금지해야 한다.
• A.I. 를 활용한 무기 개발은 금지되어야 한다.
• A.I. 는 투명해야 하며 근로자는 A.I. 에 의한 의사 결정에 대해 설명을 요구할 권리가 있다.
• A.I.로 인한 일자리 변화에 대해 근로자가 원활하게 적응할 수 있도록 해야 한다.

출처: 삼정 KPMG 경제연구원 재구성

인공지능이란

관점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)’에 관련된 방법이 된 것이다. 가추법이 추리의 개념에서 방법론적 과정으로 바뀌면서 일어난 가장 큰 변화는 가추적 가설이 귀납적 추리에서 독립하게된 것이다. 말하자면 가추법은 섬광과 같은 능적 측면만이 아니라 현상에 대한 지각 판단을 토앻 가설을 선택하고 그 가설을 설명하는 논리적 측면도 동시에 가지고 있다고 판단한 것이다. 가추법이 결과에서 원인을 추론하는 것이라면, 귀납법은 샘플에서 전체를 추론하는 과정이다.

이윤희, 찰스 샌더스 퍼스

연역

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

귀추

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

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

귀납

실험과 관찰 – 검증

무엇을 + [ ] = 결과