brunch

You can make anything
by writing

C.S.Lewis

by 리플러스 Apr 05. 2019

영상대본 / 후기 :  2화 영상

초보 UI 디자이너를 위한 UI 스터디 방법 - 영상의 대본과 제작후기



작업방식


2회차인만큼 어떤식으로 작업을 해야할지. 감이 잡힌 상태였다. 기존에 만들었던 시각 애니메이션 릴들을 그대로 사용할 수는 없어서. 일일히 아이콘을 배치하고, 텍스트를 수정했다. 또한 대화맥락에 맞게 아이콘과 영어 문장을 끼워맞추는 형식으로 작업을 진행했다. 긴 영상인 만큼, 개별 시각물들의 완성도는 많이 낮은 편이다. 하지만 목소리를 베이스로하는 영상이고, 맥락의 이해를 돕는다는 점에서, 상당히 좋은 방식인듯 하다.




영상 완성본

https://youtu.be/VYNLZr4JS-s




소개 게시글

https://brunch.co.kr/@clay1987/118







글자수 : 1900자 / 음원 길이 : 6분



안녕하세요 리플러스입니다. 오늘은 UI 디자인을 공부하기위한 방법에 대해서 이야기를 해보겠습니다.


대부분의 경우 초심자들은 UI 디자인을 공부하기위해서, 자료를 찾을때. 보기에만 예쁜 컨셉형 이미지들을 찾게되는 경우가 많습니다. 하지만 정작 실무에서 필요한 규격들이 무엇인지를 알지 못한 상태로 공부를 시작합니다. 그리고 포트폴리오를 만들건, 무얼 만들건 간에. 비례가 삐뚤빼뚤한 경우가 많죠. 색상은 화려하고, 이미지가 잔뜩 들어간 시각물들. 그러나 모바일 OS나 , 웹 규격에 맞지않는 규격들이 많습니다. 그렇기에 실무자들이나, 면접자들은 결코 선호하지 않죠.



놀라운 사실을 하나 말씀드릴까요? 많은 초심자들이 기본적인 모바일 OS와 디자인 규격을 무시한채, '자신의 감각'만을 믿고 디자인을 하는 경우가 많습니다. 정말 당연한 이야기지만. 기본적인 규격도 알지 못한 상태로, 일단 예쁜걸 만들려고하는건 정말 잘못된 행동입니다. 실력이 느는데에도 오랜 시간이 걸릴 뿐더러, 무엇이 왜 중요한지를 알 수가 없거든요.



심지어 디자인 실무에 있어서도 마찬가지입니다. 대부분의 경우 웹이나 앱은 - 기본적으로 OS나, 웹브라우저가 지원하는 UI 규격들이 있습니다. 개발자들은 그걸 꺼내다가 실제 앱이나, 웹을 구성하는데 사용하죠. 그렇기 때문에 모든걸 새로 디자인할 필요가 없습니다. 오히려 기존의 요소들을 그때그때 맞는 방법으로 활용할 줄 알아야하죠. 그러나 이런 부분에 대해서 전혀 공부를 하지 않는 초심자들은 - 개발자와의 소통에서 문제가 생길 수 밖에 없습니다. 



물론, 이건 초심자들의 잘못인것만은 아닙니다. 브라우저나, 모바일 OS에서 기본적으로 지원하는 UI 규격에 대해서 제대로 알려주지않는 학교나, 학원들. 그리고 실무에 있어서 개발자나 기획자의 사고를 그대로 따라가야하는 상황을 겪어보지 않았기 때문입니다. 그리고 이런 '현실적인 기반조건'을 알아나가는 것이야말로 - UI 디자이너가 꼭 갖추어야할, 설계자의 역할이기도 합니다.



초심자들은 인터넷에 널려있는 예뻐보이는 시각물들을 그대로 따라하면 안됩니다. 대부분 OS 규격이나 웹 브라우저의 기본 규격들을 무시한 시안들이 많습니다. 그렇기에 해당 규격물에 익숙해져버리면. 기본 규격이나 비례에 대한 훈련도 되지 않은 채로. 자기 멋대로 디자인하는 방식에 익숙해져버립니다. 그러니 기본기부터 닦는것이 가장 중요하겠죠?



제가 추천드리는 방식은. 아주 기초적인 규격들을 그대로 따라만들어보는 겁니다. 모바일 OS라면 안드로이드가 있을 거구요. iOS도 있겠네요. 사실 여기에서도 이렇게 생각하는 분들이 많더군요. 



"둘중에 하나만 만들어보면 되는거 아닌가요? 모바일 OS는 거기서 거기잖아요."

"iOS가 더 예쁜데. iOS만 따라 만들면 안되나요?"



사실상 OS마다 특징이 있고. 각각의 기본 모듈. 디자인 스타일이 있습니다. 게다가 안드로이드의 경우. 구글의 마테리얼 디자인 규격을 채택하고서. 웹과 모바일 OS간의 스타일적 특징이 매우 비슷합니다. 게다가 모바일웹. 반응형웹의 영역에 이르러서는 - 구글의 안드로이드 OS가 마테리얼 디자인과 큰 연결고리를 갖고있어요. 그래서 더욱더 안드로이드와 iOS. 두 OS를 각각 따라만들어보시기를 추천하는 겁니다.



OS를 따라만드는데에 있어서. 가장 중요한건. '기본앱들'과 기본적인 팝업. 조작 방식을 들여다보는 거에요. 기존에 제가 이야기했듯이. 실제로 개발자들은 모든 기능과 화면들을 새로 만드는것이 아닙니다. 그렇기 때문에 OS에서 기본적으로 불러올 수 있는 모듈들을 사용하는 경우가 많죠. 혹은 UI 요소들을 불러다가 수정하거나, 조합해서 새로운 화면을 만들어내기도합니다. 그렇기에 UI 디자이너가 OS들이 갖고있는 기본 요소들에 대해 알지 못하면. 절대로 설계를 할 수가 없어요.



게다가 기본 앱들이 이미 갖고있는 디자인 스타일들이 있어요. OS 제조사인 구글과 애플 쪽에서 - 우리 기기에는 이런 스타일과 비례의 앱들이 들어오면좋겠어. 라고 생각하고 만든게 기본 앱들이에요. 메모장, 계산기, 설정창, 기본 웹 브라우저, 사진 갤러리 등등 - 기본 앱들을 들여다보지않는다는건. 기본적인 상식도 알지 못한채, 천재가 되려는 사람과 똑같은거죠. 그렇기 때문에 초보 디자이너들은 UI를 들여다볼 때. 기본앱과 OS의 시안, 목업 파일을 구하거나. 혹은 직접 스크린샷을 찍어서 똑같이 따라만들어보기를 추천드려요.



이렇게 만들어진 시안들은, 나중에 수정해서 포트폴리오로도 사용할 수 있고. 나중에 새로운 작업을 할 때에도. 기본적인 비례나, 형식에 있어서 좋은 참고자료가 되거든요. 그러니 본인이 초심자라면. UI 디자인을 제대로 배워보고싶다면. 절대로 - 웹상에서 예뻐보이는 시안을 그대로 따라만들어서는 안됩니다. 기본 OS부터 차근차근 배워나가지 않고서는 - 좋지않은 버릇이 만들어져버려요. 그리고 그게 포트폴리오나, 시각물에서도 그대로 드러나게됩니다. 그러니 앞으로 더 탄탄한 기반을 만들고싶다면. 기본 OS부터 만들어보기. 기억하세요!











후기


영상규격의 장점이자 단점을 확실히 느끼게됐다. 말하듯이 이야기를 해야하다보니, 영상 길이가 생각보다 길어지기쉽다. 게다가 이걸 다시 시각화해야하는데. 정작 담고있는 내용은 세네줄 정도로 압축정리가된다는거. 화려해보이지만 정보성이 없는 영상들과 비교했을 때. 내가 제작한 그나마 내용을 많이 압축한 편이다. 그럼에도 불구하고 여전히 정보성이 부족하다고 느껴지는건 왜일까. 일단, 이런 수준의 규격을 유지하면서 - 추후에는 초심자를 위한 UI 공부법을 시리즈물로 차례로 제작할 생각이다. 



작가의 이전글 영상대본 / 후기 :  1화 영상
작품 선택
키워드 선택 0 / 3 0
댓글여부
afliean
브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari