[강의] 원티드 프리온보딩 디자인 챌린지 8월 후기 - 1회차

원티드에서 주최하는 프리온보딩 디자인 챌린지 강의 후기를 작성해보려고 한다.
오늘부터 4회까지 디자인 챌린지 강의를 수강하게 되었는데, 기억할만한 주요 내용들을 짧게나마 기록해봐야지!

---

Figma AI, UI/UX에도 이제 AI 시대가

최근 피그마 Config 2024에 대해 아주 이곳저곳에서 이야기가 많은데, 강의에서는 전반적으로 그 때의 가장 핵심적인 내용들을 요약해서 설명해주셨다.
AI가 가장 범접할 수 없을 것이라 예상했던 예술 분야부터 AI가 침투하더니 이제는 UI/UX 디자인까지 기어코 진입해왔다.
AI로 인해 디자이너가 대체될 것이냐 말 것이냐, 전부터 이야기가 많이 나왔었는데 나도 이 부분이 긴가민가했었다.
'논리적인 디자인'이 대세인 가운데, 이제 차별화된 비주얼라이징이 다시 주요해질까? 하는 생각도 들었다. (인간만이 할 수 있는 게 무엇일까 생각하다보니)

AI는 천장을 높이고 바닥을 낮춘다.

'10x 개발자'라는 밈이 있다고 한다. 1/10의 코드로 1/10의 시간 만에 문제를 해결하는 개발자를 말한다.
AI로 인해 이러한 분위기는 사라질 것으로 전망된다. 이제 5초면 엄청난 양의 코드를 작성해주는 AI가 있기 때문에.
또한 디자인에 대한 진입장벽이 낮아지면서 '디자이너'라고 불릴 수 있는 기준이 낮아질 것이라고 한다.
이제는 누구나 디자이너, 누구나 개발자인 시대가 찾아오는 것일지도 모른다.
이제는 정말 10%의 차이가 경쟁력을 만드는 세상이 된 것 같다. 나의 10%는 과연 무엇일까? 고민이 된다.

저는 ChatGPT를 시도하는 것을 꺼려왔습니다.
오늘 드디어 그 망설임을 극복했죠. 이제 제가 왜 망설였는지 이해가 됩니다.
제 기술의 90%의 가치가 0달러로 떨어졌거든요.
그런데 나머지 10%에 대한 레버리지는 1000배로 올라갔습니다.
제가 가진 것들에 대한 재교정이 필요하다는 것을 느낀 순간이었죠.
- Kent Beck (미국의 소프트웨어 엔지니어, 애자일 선언문의 17명의 오리지널 서명인 가운데 한 명)

 

디자이너를 AI가 대체할 수 있나

예측 가능한 프로세스와 맥락을 만드는 역할은 여전히 인간이 우세다.

강의에서는 보편적으로 디자이너를 채용하는 이유를 결원 보충, 업무 분담, 디자인팀 확장, 프로젝트 수행 네가지로 설명했다. 이 중 결원 보충, 업무 분담, 디자인팀 확장 이 세가지는 AI로 대체적으로 전환할 수 있을 것이라 설명했다. 부족한 일손은 누구보다도 빠른 AI로 효율적으로 처리하는 게 유리할 것이고, 단순 문서 작업 업무는 AI에게 맡겨 프로세스를 간소화할 수 있을 것이다. 또 새로운 디자인적 시도는 다양한 AI 신규 기능을 통해 일부 수행해볼 수 있을 것이다. 유일하게 대체할 수 없는 부분이 '프로젝트 수행'이었다.
바로 아직까지 AI는 일관성을 확보하는 작업을 하기 어려워하기 때문이다. 집중력과 실행 능력, 예측 가능한 프로세스와 맥락을 만드는 역할은 '인간' 디자이너가 더 훌륭하게 해낼 수 있을 것이라 생각한다.
실제로 회사 업무에서도 생성형 AI를 이용해보려고 했으나, 베리에이션 작업을 생각하면 그냥 말고는 했다. 컨셉, 분위기, 톤앤매너, 공통된 핵심 요소들을 일관성있게 유지하면서 여러 장의 결과물을 만드는 것은 AI에게 어려운 것 같다.
'주니어 디자이너들이 1장은 잘 그려도 2장, 3장 더 그려보라고 하면 어려워하는 것과 같은 맥락이다.' 라고 말씀하신 강사님의 말이 인상이 깊었다.
 

하지만 디자이너 간의 격차가 더 커질 수 있다.

간단한 사용은 더 쉬워지지만, 복잡한 사용은 더 어려워진다. 실제로 단순 작업들은 AI로 대체가 쉽기 때문에 비교적 낮은 진입 장벽으로 AI를 업무에 활용할 수 있는 반면, 고난도의 작업을 AI로 수행하는 것은 어렵다. 따라서 이를 알고 있느냐 모르느냐로 디자이너 간의 격차가 생길 수 있다고 한다.
또 단순한 작업의 중요도는 줄어들지만 각 작업에 대한 이해는 높아야 한다며, 디자인 용어에 대한 이야기도 나왔다. 프롬포트에 자세한 설명을 입력할 수록 더 좋은 결과물이 나오는 것은 모두가 알고 있는 사실이다. 용어를 모르면 프롬포트에 구구절절 모호하게 설명을 적게 된다. 스큐어모피즘, 플랫 디자인, 글래스모피즘... 다양한 디자인 용어들을 알아두는 것이 생각보다 중요할 것 같다.
 

UI/UX AI 툴 소개

UX pilot

• 사용자가 메모지를 통해 아이데이션하면, 이 내용들을 짧게 요약하거나 주요 내용을 뽑아내 UX 원칙 수립에 도움을 준다.
• 프롬포트 작성으로 와이어프레임을 제작해 준다.
• Hi-fi UI 디자인을 제작해 준다. (아직까지는 웹 위주이지만, 반응형 코드를 받아볼 수 있다.)

https://uxpilot.ai

UX Pilot - Your AI-UX Assistant

 

Config 2024는 어땠나

Config 2024를 세 줄 요약하면 이 것이라고 한다.

• Reducing complexity
• Better developer experience
• Al for Figma Design

1) 복잡성을 줄이는 것
UI3이 엄청나게 욕을 먹고 있는 가운데(...) 피그마가 왜 그렇게 UI를 대대적으로 바꾸었는지 알 수 있었다. 바로 Figma의 하위 제품들의 UI를 통일시키려는 시도였던 것. 한꺼번에 관리를 하기 쉽도록 하기 위해서인가, 제품들 간의 일관된 경험을 위해서인가.. 아무튼 모두 다일 것 같다. 기존에 잘 쓰던 기능들이 다 안에 숨어버려서 많은 사람들이 불편을 호소하고 있지만 그래도 피그마를 사용하지 않을 수는 없으니 익숙해지는 수밖에 없는 것 같다. (나도 아직 UI3을 써본 적이 없다.) 강의에서 포토샵이나 다른 툴들의 인터페이스와 이번 피그마의 인터페이스를 비교해줬는데, 겉보기에는 진짜 훨씬 깔끔하긴 하다. 인정함.
 
2) 더 나은 개발자 경험
얘는 개발자가 편해야 그들이 돈을 벌 수 있어서라고 하셨다.(ㅋㅋ) 실제로 피그마는 유료 기능이 여러모로 많은 것 같다. 처음 피그마가 상용화됐을 때는 '와 이렇게 편한데 무료라고?' 라는 이야기를 많이 했었는데, 이젠 기능들을 제대로 이용하려면 돈을 내야되는 게 어쩔 수 없게 된다. 이 때 강의실 채팅방에서는 '구독 거지'라는 말도 나왔다. 세상에 구독해야 할 서비스가 너무 많아...
 
3) 피그마 AI
이게 이번 컨피그의 가장 자랑과 같은 내용이라고 했는데, 얼마 전 피그마AI의 표절 논란으로 지금은 잠시 Make Design이 문을 닫았다. 좀 웃기긴 한데, AI는 어쨌든 정보를 대량 학습해서 새로운 것을 생성해내는 역할을 하는 것이고 UI라는 건 저작권과 표절에 있어서 되게 애매한 포지션이라고 생각하는데 UI와 표절 시비의 중간에서 어떻게 살아남을지가 궁금하다. 이번 피그마 사태(?) 뿐만 아니라 그냥 UI와 저작권에 대해 앞으로의 귀추가 궁금할 따름..
 
https://www.digitaltoday.co.kr/news/articleView.html?idxno=523736

피그마, AI 디자인 툴 '메이크 디자인' 서비스 중단…표절 의혹 - 디지털투데이 (DigitalToday)

 
최근 이슈가 됐던 삼성화재의 카카오페이 UI 표절 논란도 생각이 났다.. 개인적으로 이거는 좀 너무했다고 생각하기는 한다.
물론 UI는 패턴이고 경험이기 때문에 공식적으로 저작권이 적용되지도 않고, 카카오페이가 분노하긴 했지만 법적으로 무언가 제재를 주지는 못할 것 같기는 하다.
근데 삼성화재의 입장에서는 '보험 가입 프로세스는 원래 다 비슷해' 였는데, 개인적으로 이 입장이 좀 더 표절했다는 느낌을 강화했던 것 같다.
프로세스가 비슷한게 팩트라면, '우리 서비스만의 차별점을 주기 위해 기존안에서 현재안으로 어떻게 바꾸었다.'라고 이야기 해야 그나마 납득이 되었을 것 같다. 근데 원래 다 비슷해~라고 해버리니까 뭔가 좀 더 좋은 예시 따라한 것 같은 느낌...?
프로세스는 비슷해도 UI는 정답이 없기에 무궁무진한 표현 방법이 있지 않을까하는 생각.
https://designcompass.org/2024/07/01/kakaopay-samsung-plagiarism/

분노의 카카오페이: 삼성화재가 UI 표절?

 

아무튼 Figma UI3

의식하지 못했었는데, 제작 툴들의 툴바가 'ㄷ'자를 뒤집어놓은 모양으로 많이 배치가 되어 있다는 것을 알았다. 이번 피그마 UI3은 이것을 과감하게 버리고 주요 툴바를 가운데 하단에 심지어 둥둥 띄워놨던데, 아직 써보지는 않았지만 과연 편할까 하는 생각이 들기는 한다.

출처 - Figma

UI3의 장점은 기존에 비해 클릭 영역 히트맵이 겹치는 부분이 좁아졌다. 왼쪽에는 파일 정보, 레이어들이 있고 오른쪽에는 베리언츠, 스타일 등 다양한 요소들, 중앙 하단에는 툴바와 ai, 플러그인 등이 모여있다. 각각을 양 옆, 아래로 찢어놔서 겹치는 영역이 줄어들었다.
다만 기능들을 한 데 묶어 숨겨놓는 바람에 이전에 비해서 같은 곳을 여러 번 클릭해야 기능을 이용할 수 있다는 점이 단점이 된다. 장단점이 뚜렷해서 일단 써보고 익숙해져야 할 것 같다. (피그마도 어차피 쓸거잖아 하는 마인드로 바꾼 것만 같은 느낌)
아직은 어색하지만 너무나도 강력한 툴임은 확실한 피그마... 강의에서는 피그마를 꼭 써야 하는 환경도 소개해주었다.

• 빠르게 결과물을 만들어야 하는 경우
• 개발자와 협업이 필요한 경우
• 5~10명 정도의 서로 다른 직군이 협업해야 하는 경우

 

디자인 꿀팁

네이밍의 중요성

사실 전부터 많이 들었던 이야기인데 솔직히 왜 중요한지 몰랐었다. 왜냐면 보이는 화면에서 클릭하면 요소를 누를 수 있으니까..!
근데 예시로 포토샵으로 ui만들던 시절 이야기를 해주셨는데, 들으니까 좀 이해가 갔다. 디자인만 생각할 게 아니라 핸드오프할 거를 생각하면 네이밍은 센스고 매너인 것 같다.
물론 작업하는 데 있어서도 네이밍을 잘 짓는 것은 중요하다는 것을 다시금 생각하게 됐다. 특히 피그마에는 Select matching layers라는 기가 막힌 기능이 있기 때문에, 네이밍을 잘 맞춰놔야 수정에 용이한 것 같다. 또 프로토타입할 때도! 네이밍 때문에 넘 불편했던 기억이...
'네이밍을 잘 해야 해요~'라고만 말을 하는 게 아니라 '그냥 요소를 만들 때 레이어 네이밍부터 하고 만들기 시작해라' 라고 말해주시니 좀 와닿았던 것 같다. 잘 해야 하는 건 나도 아는데 너무 귀찮았던 것인데... 그냥 애초에 만들기 시작할 때부터 '아 이건 text야.'라고 생각하고 네이밍부터 하고 시작하라고 하니까 좀 더 실천하기 쉽게 느껴졌다.
아, 또 꿀팁. 프레임 안에 들어있는 텍스트 레이어도 거기에 실제로 적힌 글이 레이어명으로 자동 설정되는데, 얘도 통일하는 게 좋다고 하셨다.

말도 안되던 레이어명을 갖고 있던 기존의 작업 파일을 이번 기회에 한 번 바꿔보았다.

 

UI Practice

그래, 이 정도는 노력하고 디자인 잘하고 싶다는 소리를 해야지. 라는 생각을 들게 했던 강사님의 작업들...
수많은 UI Practice가 아주 인상깊었다.
현재 화면을 스켈레톤처럼 분리해보고, 사용된 색상의 비율을 적어보고, 전체 레이아웃의 비율이 어떤지 파악해보고, 시선의 흐름을 시각화해보고, 비슷한 성격의 다른 앱의 UI style로 해당 화면을 바꿔보기도 하고...
언뜻 보면 이런 연습을 왜 하나 싶지만 이게 기초인 것 같다. 비율이 어떻게 바뀌면 어떤 느낌이 들고, 다른 앱의 스타일대로 바꿔보면 어떤 느낌이 드는지 체감해보는 과정인 것 같다.
 

---

 
전반적으로 요약을 하자면
AI로 인해 생산성이 매우 높아졌으나 결국에는 기본과 개념을 아는 사람이 이를 활용할 줄 안다,
라고 생각한다.
AI가 없이도 개념과 구조를 생각하면서 짜는 사람이 AI를 어떻게 활용할지도 알게 되는 것 같다.
그렇다고 해서 '일단 개념부터 익혀야지...'하는 마음으로 AI는 나중에 써보자라고 하기 보다는 빨리 한 번 이용을 해보는 게 도움이 될 것 같기는 하다. 피그마AI가 다시 오픈이 되면 한 번 바꿔봐야겠군...
아무튼 강의에 쓰인 재밌는 짤을 마지막으로 글을 마쳐보려고 한다.
재밌었던 강의였다!

출처 - 강의 자료에서 캡쳐

---

-2회차 후기 바로보기
https://nurilee-d.tistory.com/m/14

[강의] 원티드 프리온보딩 디자인 챌린지 8월 후기 - 2회차