UI/UX디자인 채널을 시작하게 된 계기 Introduction to JOOD's UI/UX design channel (With sub)

Hello, Nice to meet you guys I have just done my laundry and sweat a lot now

This is my first youtube video I'm little nervous now I have always wanted to start a youtube blog about UI/UX design since I started living in the US Recently, I have been working on the side project with another UX designer who lives in Utah

We had a conversation about the designer career From the conversation, I knew many folks in Korea are interested in UI/UX design However, I found that they are struggling to access information and resources about it I decided to share the UI/UX design information and resources that I have learned and refined in the US

with those in Korea to help them choose and develop their design careers Thereby, this channel has been started Introducing myself, I go by Joo It derived from my Korean name, Jooyoung Joung I'm currently working as a product designer at Wondersauce (Design Agency)

I have been working within a variety of clients, such as Chick-Fil-A, Loreal Lancome, Scotts and Huntington Bank My main role is to create design interfaces, visual content, and build maintain design system libraries From now on, I would like to share not only the UI/UX resources But also my point of view as foreigner about living in the US and my career transition from non-designer to designer

and some tips for UI/UX design career development I look forward to seeing you with good contents soon Thank you See you guys again!

Wix.com | 웹 접근성이 좋은 홈페이지 만들기

웹 접근성은 개인 장애와 상관없이 모든 이가 보조 장치 또는 키보드만으로 웹 콘텐츠를 이용할 수 있어야 한다는 개념입니다 Wix에서는 간단한 설정만으로 웹 접근성을 향상시킬 수 있습니다

지금부터 보조 장치가 텍스트 및 이미지를 이해할 수 있도록 사이트를 설정하는 법을 알려드리겠습니다 텍스트부터 시작해볼까요? 사이트 텍스트는 헤더, 서브헤더, 단락으로 구성됩니다 눈에 띄게 표시되어 있지는 않지만 H1은 사이트 제목, H2는 페이지 제목, P는 단락 등 텍스트는 자동으로 헤더 태그가 지정되어 있습니다 헤더 태그가 시작부터 끝까지 체계적으로 지정되어 있어야 보조 장치가 내 웹 콘텐츠의 구조를 파악할 수 있습니다 이제 하나씩 살펴보겠습니다

먼저 에디터로 이동하세요 사이트 제목을 선택한 후 텍스트 편집을 클릭합니다 텍스트 설정 맨 아래에서 헤더 태그를 선택하세요 여기에서 해당 텍스트의 해더 태그를 확인할 수 있습니다 사이트 제목이라면 H1으로 지정되어 있겠죠? 검색엔진 최적화를 위해서 사이트 제목이 H1으로 지정되어 있는 것은 매우 중요합니다

페이지 제목은 H2, 단락은 P로 지정할 수 있습니다 모든 사이트 텍스트의 헤더 태그를 확인하세요 이제 이미지를 살펴보겠습니다 각 이미지에 대체 텍스트로 불리는 짤막한 설명을 추가하세요 이를 통해 검색엔진 및 보조 장치가 이미지를 인식할 수 있습니다

사이트 이미지를 클릭하여 설정창으로 이동합니다 설정창 하단으로 내려가면 "이미지 설명"란에서 대체 텍스트를 입력할 수 있습니다 이번에는 색상 대비율을 통한 콘텐츠 접근성 향상 방법을 알아보겠습니다 전경과 배경의 권장 색 대비율은 45:1입니다

각 색상에는 지정된 코드가 있어 에디터에서 올바른 대비율을 찾아낼 수 있습니다 예시를 통해 텍스트 색상 코드 확인 방법을 보여드리겠습니다 텍스트 상자를 선택하고 텍스트 편집창에서 색상 아이콘을 클릭하세요 각 색상에 마우스를 가져다 대면 우측 하단에 각 색상 고유의 코드가 표시됩니다 이와 같은 작업을 반복하여 배경 색상 코드를 찾아냅니다

전경 및 배경 코드를 찾았다면 Wix 도움말 페이지의 예제 사이트를 방문하여 색상 대비율을 확인합니다 해당 도움말 페이지 링크는 동영상 끝에 제공됩니다 모든 단계를 완료했다면 왼쪽 상단의 사이트 메뉴를 클릭하세요 접근성 탭을 선택하여 슬라이드 형식의 파란색 버튼을 켜고 비주얼 표시기 기능을 활성화합니다 이제 사이트를 게시하면 보조 장치 또는 키보드만으로 사이트를 이용하는 방문자도 손쉽게 사이트 구조를 파악하고 콘텐츠에 접근할 수 있습니다

조금 이해가 되셨나요? 보다 자세한 내용을 확인하려면 도움말 페이지를 확인하세요

UI디자이너의 2차전직, 두가지 전문화 방법 ( UI Designer's Specialization Skill Tree )

안녕하세요 리플러스입니다 오늘은 5년차 이상의 UI디자이너들이 스스로의 영역을 전문화할 수 있는 두가지 방식에 대해서 이야기를 해보려합니다 IT 업계는 계속해서 빠르게 변화하고있는 상태입니다 그렇기 때문에 단순히 디자인의 영역을 넘어서 서비스를 성공시킬 수 있는 방법을 공부해야합니다 이런 상황에서 자신의 적성이 어느쪽에 더 잘 맞는지 그리고 앞으로의 생존전략을 위해 어떤 방식으로 전문성을 강화할 것인지 이런 방법에 대해서 계속 고민해볼 필요가 있습니다 일반적으로 5년차 이상의 디자이너라면 일반적인 디자인 업무를 넘어서서 점차 팀장이나, 리더의 역할을 기대받는 때가 다가오게됩니다 그렇기에 – 신입 디자이너와는 전혀 다른 상황에 놓이게되죠 사실 UI 디자인도 좀 더 깊게 파고들어가면 일반적인 디자이너는 파고들 수 없는 전문영역이 있습니다 오늘은 미래에도 살아남기위한 방식으로 5년차 이상의 UI 디자이너들이 선택할 수 있는 2차전직 방법에 대해 이야기해보겠습니다

1 자바스크립트 프레임워크를 다루는 UI 디자이너 일단 UI 디자이너가 가장 손쉽게 전직할 수 있는 형태는 웹 디자인을 넘어서서 자바스크스립트 프레임워크를 다루는 것입니다 현재 해외와 국내 IT 업계에서 가장 연봉이 높은 직군 중 하나는 바로 이 자바스크립트 프레임워크를 다루는 웹 개발자들입니다 처음부터 개발적인 역량을 갖고 웹개발을 시작한 분들이라면 모두 알고 계시겠지만 자바스크립트 프레임워크는 결코 쉽지 않은 기술입니다 기본적으로 HTML과 CSS에대한 이해를 필요로하고 여기에 추가로 자바스크립트에 대한 이해도가 충분해야하죠 여기에 다시 Nodejs와 NPM을 통해 자바스크립트 프레임워크를 설치하여 사용해야합니다

자바스크립트 프레임워크의 종류로는 대표적으로 Vuesjs / Reactjs / Angularjs 등이 있는데요 해외에서는 해당 기술의 숙련자를 기준으로, 9만달러에서 13만 달러의 연봉을 받고있는데 한화로 약 1억 5천만원 정도의 높은 연봉을 받고있습니다 국내에서도 상황은 비슷한데요 네이버나 카카오 등 – IT업게에서 잘나가는 회사들은 자바스크립트 프레임워크를 다룰 줄 아는 개발자들이 없어서 애를 먹고있는 상황입니다 한국의 경우, 해외에 비해 IT 기술의 발전이나 전파가 늦은 편이기 때문에 해외에서는 이미 3~4년전부터 자바스크립트 프레임워크가 유행하고있었습니다

자바스크립트 프레임워크를 다루게되면, 일단 가장 좋은점은 현재 IT 웹 서비스 제작을 위한 SPA나, PWA, 자바스크립트를 통한 서버와의 데이터 연결 등 핫한 서비스들의 핵심이되는 규격을 사용할 수 있다는 것입니다 게다가 본인이 디자인도 잡을 줄 안다면 사실상 자바스크립트 프레임워크를 통해 개발을 하고 디자인과 기획까지 도맡아하는 팀장이나 리더급의 업무가 가능해집니다 이런 사람이라면 디자이너들을 이끌어나가거나 기획자나 추가적인 개발자들과의 소통에도 문제가 없겠죠 그렇기에 UI 디자이너들이 추구할 수 있는 2차전직들 중에 가장 안정적인 형태라고 할 수 있겠습니다 물론 이 길이 결코 쉬운것은 아닙니다 자바스크립트의 ES6 문법을 기반으로 기본적인 데이터 전달 그리고 안정적인 데이터 불러오기

적정 수준의 보안화도 공부해야합니다 게다가 개별 프레임워크가 업데이트될 때마다 추가적인 공부가 필요하며 Nodejs와 NPM의 버전별 관리 유지보수에대한 부분도 계속해서 배워나가야하죠 HTML과 CSS만 하더라도 머리가 아파서 무리인 분들에게는 사실상 불가능한 길이기는 합니다 그러나 미래를 위해 투자할 수 있는 여력이 있는 분이라면 HTML와 CSS를 넘어, 자바스크립트의 기본적인 문법과 기능들을 익힌 후 Vue

js와 같이 – 진입장벽이 상대적으로 낮은 규격을 공부해보시는것을 추천합니다 만약 본인이 완벽하게 이 길을 가게되진 못하는 경우가 있다 해도 그 공부를 통해 배운 것들만으로도 미래의 생존확률은 확실하게 올라가시게 될겁니다 2 빅데이터와 그로스해킹을 다루는 UI 디자이너 제가 처음 소개한 방식은 웹 서비스의 프론트엔드 단을 다루는 데에 좀 더 집중된 방식이었는데요 두번째 방식은 빅데이터와 그로스해킹이라는 개념에 특화된 방식입니다

머신러닝과 빅데이터는 현재 IT업계의 가장 뜨거운 화두 중 하나입니다 빅데이터를 다루기위해서는 데이터를 정리하고, 규격화하며 이를 시각화하기위한 D3js 라이브러리나 태블로 등의 서비스를 다루는 것은 물론이고 실제 기업에 필요한 통계와 정보들 속에서 비즈니스 인사이트를 찾아내는 능력이 필요합니다 또한 그 내용을 실제 웹규격으로 옮겨놓는 설계능력까지 갖고있다면 더욱 좋겠죠? 현재 많은 데이터 시각화도구와 방법론들이 제시되곤 있지만 실제 웹서비스에 적용된 사례나 그 확장성에 있어서는 D3js나 tableau와 같은 서비스를 따라오는 곳이 많지 않습니다 또한 이 데이터들을 다시 처리하고, 자동화하여 다른 실무자들에게 유용한 정보값을 도출해내는 – 데이터 과학자들 역시 웹 규격을 알지못해서 고생하는 경우가 많죠 그렇기에 역으로 UI 설계에 익숙한 디자이너들이 데이터에대한 이해도와, 파이썬과같은 언어를 통해 장기적으로는 텐서플로우를 직접 사용할 수 있는 레벨로 넘어가는 과정이 이어집니다 실무에서 일하고있는 마케터들이나, 데이터과학자들 역시도 UI 디자인에 대한 설계나, 디자인에 대한 요구가 조금씩 늘어나고있는 상황입니다 그렇기에 역으로 마케터들과 데이터과학자들의 역할을 조금씩 가져오는 형태인 것이죠 이 방식은 '프로그래밍처럼 머리가 아픈' 쪽은 싫다고 말하시는 분들에게는 좀 더 쉬워보일 수 있습니다

당장은 이 서비스를 성장시키기위한 설계나 더 최적화된 UI를 찾고 개별 데이터들이 어떻게 쌓이는지를 확인하는 것들이 주 업무가 될테니까요 다만 점차 SEO나, 사용성 개선을 위한 테스트들 그리고 쌓인 데이터들에서 유효한 의미나, 내용들을 찾아내는 것은 기본적인 수준이 됩니다 나중에는 데이터를 정리하여 규격화하거나 기존 서비스와 연결하기 위한 요구도 받게 될겁니다 결국에는 이 길 역시도 파이썬과 같은 개발 언어를 배워야하는 상황에 마주하게 됩니다 이 방식의 경우, CUI 대화형 UI나, ai 서비스 등 엔지니어의 길로 넘어서기에 딱 좋은 길목에 있는 기술을 배우게됩니다 그렇기에 UI 디자이너로서 남아있게 된다기보다는 데이터 과학자와 디자인 설계자로의 정체성을 모두 갖게됩니다 UI디자이너는 다양한 설계경험을 기반으로 어떤 데이터들을 어디에서 끌어와야하는지 그리고 그 데이터들이 어떤식으로 쌓아져야 – 의미가 있을지를 설계에 녹여내어서 더 높은 차원의 서비스를 만들어낼 수 있습니다 이 방식의 경우, 처음 시작은 상대적으로 더 수월해보일 수 있습니다 하지만 점차 설계를 넘어서서 데이터 기반의 UI 개선과 파이썬 언어를 기반으로 한 ai 제작 등 고난이도의 머신러닝으로 연결되는 길목을 마주하게됩니다 그렇기에 본인이 어느정도 선까지 파고들 수 있는가에 따라서 전문성이나 생존 확률 역시 크게 차이가나게 되는 방식입니다

앞서 이야기한 두개의 2차전직 방법은 사실 어느쪽이라도 그리 쉬운 방식은 아닙니다 하지만 생존확률이나, 경쟁력은 확실하게 올라가게되죠 일반적인 디자이너들은 개발에대한 거부감을 갖고있거나 논리적 데이터기반의 사고 등이 힘든경우가 많습니다 그렇기에 이런 방식이 의미가 있는 것이고 남들에 비해 확실하게 경쟁력을 만들 수 있는 좋은 방법이기도 합니다 IT 업계는 타 업계에 비해서 기술의 변화 속도가 빠르고 신규 기술의 습득 요구치가 매우 높은 편입니다 그렇기에 UI 디자이너 역시, 5년차 이후에는 또다른 방식을 고민하지않으면 생존확률이 낮아질 수 밖에 없습니다 기업들 역시도 이런 새로운 기술에대해서 배우는것을 멈춰버리거나 혹은 기존의 기술에 집착하면서 가격경쟁만을 고집하는 곳이 있을겁니다 하지만 그런 기업들은 앞으로 오랫동안 살아남기는 불가능합니다 스스로 물연차로서 하루하루 지내고싶지 않은 분이라면 항상 그 다음을 생각하고 부하직원이아니라, 한명의 리더로서, 어떤 방식으로 미래 사업을 주도할것인지를 고민해야합니다 제가 소개드린 두가지방식이 아니더라도 분명 또다른 방식은 존재할 수 있습니다 그러니 이 두가지 방법 이외에 여러분의 적성에 맞는 방식이 있다면 꾸준히 공부하면서 미래를 준비할 수 있기를 기원합니다 자, 오늘은 여기까지입니다 다음 시간에 만나요!

웹디자인 & 웹개발 – 그렇게 어렵지 않아요! ( Let's play with Web design & Web development )

안녕하세요, 리플러스입니다 오늘은 UI 디자이너가 웹 디자인과 웹 개발을 배웠을 때 어떤 점이 편리한지를 이야기해보려합니다 사실 웹개발이라는게 엄청 어려워보이는데 간단하게 말하면, 조립식 주택을 짓는 것과 비슷하다고 말할 수 있습니다 이미 만들어진 블럭식 요소들을 이용해 내용을 바꾸거나, 커스터마이징을 해주기만 하면 되기 때문입니다 HTML과 CSS라는 말만 들어도 치를 떠시는 분들이 많으실텐데요 실제로 공부를 해보면 이런 내용이 그렇게 어렵지 않다는 걸 알 수 있습니다 물론, 지금 당장 공부를 고민하고계신 분들이 많으실거라고 생각합니다

개발과 디자인의 영역은 엄연히 난이도가 다른 영역이니까요 제로 대부분의 디자이너들은 개발 공부를 해야한다고 했을때 당장 눈앞에서 개발의 난이도 때문에 의욕을 잃는 경우가 많습니다 그러나 정작 그 개발 도구를 배웠을 때 어떤 세상을 바라보게되는지를 알지 못하는 경우가 많죠 저 역시도 그런 고민을 하던 때가 있었습니다 하지만 정작 정리를 하고, 배워나가는 과정에서 새로운 기술들을 너무 많이 알게됐어요 일단 탬플릿 구조를 다루게되면서부터는 모든 디자인을 굳이 직접 디자인할 필요가 없어지더라구요 마치 조립식 주택을 짓듯이 이미 만들어진 UI 블럭들을 차근차근 쌓아올리고, 연결해주기만 하면 되더군요 실제로 인터넷 상에 널려있는 HTML 탬플릿이나 Codepen 같은 서비스들이 튜토리얼이 굉장히 잘 되어있어요 그래서 이런것들을 금방 따라하실 수가 있습니다 게다가 이런 자료들이 수준이 매우 높은 편이라 따로 수정을 가하지 않고- 그대로 사용해도 좋을만한 규격들이 많이 있습니다 만약 본인이 포트폴리오를 만들거나 습작을 만들 때에도 시안 한두장을 만드는 수준이 아니라

전체 사이트의 탬플릿을 다운받아서 내용을 바꾸고 그 안에서 자신이 원하는 내용을 수정하고, 추가해주기만 하면 사이트 하나가 뚝딱 만들어집니다 작업하다가 모르는 내용이 있다면, MDN (모질라 재단) 공식 튜토리얼을 참고하거나 Codepen같은 HTML / CSS 소스가 그대로 노출되는 사이트들이 많기 때문에 – 이걸 그대로 참고하면 됩니다 게다가 HTML 탬플릿을 어떻게 사용해야할지를 고민하실 필요도 없는게 boiler plate 같은 기본 규격들도 요즘은 쉽게 구할 수 있으니 – 그대로 사용하시면 됩니다 이렇게 오픈되어있는 자료들은 – 반응형 웹 처리도 잘 되어있고 심지어는 간단하게나마 애니메이팅이 들어가있거나 실제 상용화 버전으로 사용할 수 있을만한 퀄리티인 것들이 많습니다 그러니 모든걸 본인이 모든걸 처음부터 만들어야한다는 생각을 버리게 됩니다 탬플릿들을 연결시키고, 짜집기만 해도 아, 이거 상업용으로 쓰거나 내 작업용으로 다른 사람들에게 자랑할 수 있겠다는걸 체감하게됩니다 그렇기때문에 웹개발을 배우는 순간부터 UI 디자이너로서 바라볼 수 있는 눈의 범위가 매우 넓어지게됩니다 자바스크립트같이 어려운 내용은 당장 다루지 못해도 괜찮습니다 HTML과 CSS같은 기초적인 내용을 공부하면서 실제 내 포트폴리오 사이트를 만들어보거나 자신이 공부하고있는 내용 활동하고있는 동아리 외부활동 등을 소개해보는 거 이런것만으로도 충분히 좋은 경험이 되어줍니다 여기서 우리가 해야할 내용은 웹상에서 적당한 HTML 탬플릿을 하나 잡아다가 필요없는 부분은 삭제해버리고 기존 소스코드에서 필요한 내용만 복사 붙여넣기 하거나 – 수정을 해주하면 원하는 내용이 금방 완성됩니다 우리가 복잡하다고 생각하는 사이트들도 CSS를 뜯어내고나면 , 이런 시안처럼 정말 단순한 텍스트들과, 목록 규격들의 반복일 뿐입니다 그러니 고민하지말고, 자신이 만들고싶은 사이트에대한 기획서를 하나 만들어보세요 그리고 그 내용대로 웹사이트를 하나 만들어보면, 그것만으로도 충분합니다 우리가 UI 디자인을 접할 때 다뤘던 APP 디자인은 시안을 만드는 데에서 끝나는 경우가 많죠? 그러나 웹디자인의 경우에는 이 영역을 넘어서서 우리 맘대로, 원하는 내용을 만들 수 있고 완성품을 실제로 다른사람에게 구현해 보여줄 수가 있어요 이렇게, 모든걸 새롭게 만들려고 하기보다 이미 오픈되어있는 자료들을 통해 본인이 원하는 구조를 만들어보고 여기에 약간의 수정을 가해서 – 나만의 디자인을 적용하기도 쉽습니다 저도 직접 웹개발을 공부해보면서, 여러가지 어려움을 겪었는데요 이런 어려움들은 대부분 실제 배우는게 어려워서라기보다 지식 규격이 복잡해서 생긴, 불필요한 – 지식 습득을 방해하는 어려움이 있었어요 대부분의 지식들이 – 개발자 기준으로 정리되어있다보니 디자이너들이 봤을땐 이게 대체 무슨 내용인지 실제로 이게 어떤 맥락을 갖고있고, 이걸 왜써야하는건지 체계적으로 정리된 지식들이 별로 없는거에요 하지만 이걸 직접 정리를 해놓고 보니까 이해하기 어려운 내용도 아니었고 오히려 어떤 자료들이 왜 필요한지 그리고 어떤 것들을 단계별 / 상황별로 써야하는지를 아는것 이 부분만 알아도 작업에 전혀 문제가 없었다는 거죠 결국, 웹디자인과 웹개발을 배우는데 중요했던 내용은 그때그때, 문제를 해결하기위한 키워드를 어떻게 찾아낼 것이고, 어떻게 알고있는가 – 이게 가장 중요했던 겁니다 이건 웹개발을 1도 모르던 제가 직접 체험한 내용이구요 실제로 그 과정을 겪으면서 정리한 게시글들이 있습니다 그래서 그 부분만 쭉 따라오셔도 – 금방 웹개발을 배우실 수 있을겁니다 만약 본인이 웹개발을 고민하고게신 분이라면 해당 내용에 대한 영상 목록도 있고 게시글 링크들을 정리해둘테니

한번 꼭 확인해보시길 바랄게요 실제로 IT 업계에서는 일정 연차가 채워지고나면 UI 디자이너가 앱만 디자인해서는 먹고살기가 힘들어요 하지만 웹개발을 꼭 해야하는 상황이니까 – 라는걸 넘어서서 웹 개발을 배웠을 때 UI 디자이너로서 할 수 있는 규격이나, 웹 구조 설계, UI요소 변경이나 내용 바꿔치기만으로도 굉장히 다양한 구조를 만들어낼 수 있다는거 전 이게 더 중요한 내용이 아닌가 싶어요 앞으로도 리플러스 채널에서는 여러 웹 관련 기술이나 실제 작업방법, 신규 기술등을 소개해드릴 예정입니다 그러니 어렵다고 무조건 덮어두기보다는 알기쉽게 이해할 수 있는 생활코딩의 웹 어플리케이션 만들기 – 같은 영상을 꼭 한번 보시길 추천드립니다 이 내용도 영상 설명 부분에 링크로 정리를 해두겠습니다 제가 꼭 필요한 부분만 간추려서 정리를 해뒀으니 꼭 한번, 확인해보세요 ! 자, 오늘은 여기까지 하겠습니다 다음에 만나요 !

Beginning Graphic Design: Images

'이미지' 주제가 무엇이든 간에, 우리는 자연스럽게 이미지에 이끌립니다

고화질의 아름다운 사진부터 꼼꼼하게 제작된 일러스트레이션까지요 – 로고나 아이콘과 같은 심플한 이미지에도 마찬가지죠

이미지는 단순한 장식이 아닙니다 디자인에 있어서, 이미지는 사용자를 끌어들이는 미끼입니다 눈에 띄는 시각 자료는 당신이 고객과 연결되고, 고객에게 강력한 인상을 주는데 도움이 됩니다 그들이 단 한 마디도 읽지 않았다고 해도요 당신의 작업물에 이미지를 쓰고 싶다고 해서 예술가가 될 필요는 없습니다

약간의 창의성과 틀을 깨보려는 의지면 충분합니다 적절한 자원만 있다면, 당신의 디자인을 돋보이게 만들 수 있습니다 첫째: 어떤 프로젝트를 하든 고화질의 이미지를 찾으세요 어쩌면 당신이 카메라를 잘 다루거나 그래픽 디자인을 해본 경험이 있을지도 모르겠네요 아주 좋아요! 그렇지 않으면

좌절하지 마세요 인터넷에는 디자인 목적으로 쓰이는 이미지를 제공하는 곳이 수없이 많습니다 진실은, 대부분의 사람들(전문가를 포함해서)은 Stock(스톡)이라는 무료 또는 저가의 이미지를 많이 사용합니다

구체적인 이미지가 필요할 때, -예를 들어 티컵에 들어가 있는 조그만 강아지의 사진이라든가- 혹은 스스로 만들 시간이나 자원이 없을 때는 스톡 만한 것이 없습니다 스톡 이미지 사이트는 검색으로 찾을 수 있습니다 당신의 프로젝트에 적절하면서도 어떤 면으로는 특이한 이미지를 찾아보세요 사용자의 입장에서는, 사람들은 주로 진정성이 느껴지는 이미지에 이끌립니다 예를 들어 특별하지만 믿음직한 사진이나

이야기가 있는 그래픽처럼요 최고의 이미지는 어느 정도 열린 해석이 가능합니다 프로젝트의 분위기를 형성해주면서도 해석의 여지를 남겨놓는 것이죠

어떤 스톡 이미지는 영향력을 가지기에는 지나치게 일반적일 수 있습니다 예를 들면, 비즈니스 발표에서 항상 보이는 이미지가 있죠 이런 거요 더 현대적이고 전문적인 디자인을 위해서는, 설명이 부족하거나 너무 글자 그대로의 의미에 충실한 이미지는 쓰지 마세요 그보다는 당신의 작업에 더 절묘하고 타당하게 연결되는 이미지를 찾으세요

당연하지만, 내용에 한정된 이야기가 아닙니다 이미지에는 더 기술적인 측면이 있습니다 당신의 작업에 큰 영향을 미치죠 당신이 선택한 이미지가 모든 면에서 완벽하다면 상관없겠지만 만약 이미지가 흐릿하거나 화질이 나쁘다면, 잘못된 인상을 남길 수 있어요 명확하고, 깔끔하고, 왜곡되지 않는 고화질의 이미지를 찾으세요

쉽게 말하면 클수록 좋습니다 작업할 수 있는 재료가 많아지니까요 크고 해상도가 높은 이미지는 프로젝트의 필요에 맞게 자르거나 사이즈를 줄일 수 있거든요 유감이지만, 작은 이미지의 경우엔 반대입니다 작은 이미지를 확대하면, 바로 품질이 떨어져버립니다

그 이유는 대부분의 이미지가 래스터 형식으로 지원되기 때문이에요 그들은 수천 개, 심지어는 수백만 개의 작은 픽셀로 이루어져 있습니다 래스터 이미지를 원래의 사이즈로 보거나 더 작게 볼 때는, 픽셀은 보이지 않습니다 너무 작아서 보이지 않아요 하지만 확대해보면

결과는 그다지 예쁘지 않죠 벡터 그래픽은 래스터와 꽤 다릅니다 벡터 이미지는 크게 혹은 작게, 어떤 사이즈로 만들어도 품질이 떨어지지 않습니다

그들은 픽셀보다 더 복잡한 것으로 이루어져 있기 때문이죠 벡터는 특별한 기하학적 형식으로 제작됩니다 전문 디자인 영역 밖에서 벡터 그래픽을 찾기는 쉽지 않지만, 무엇인지는 알아두면 좋겠죠 어떤 스톡 이미지는 기술적으로는 높은 품질을 보여주지만 있는 그대로 완벽하지 않기도 합니다 이미지의 사이즈가 잘못되었거나, 색감을 조절할 필요가 있을지도 몰라요

다행히도, 요즘엔 아주 기본적인 프로그램으로도 간단한 조정이 가능합니다 다음에 이미지를 고치거나 개선할 일이 생기면, 이 옵션들을 찾아보세요 크로핑(다듬기)은 이미지의 크기나 형태, 초점을 바꾸는데 쓰입니다 다양한 상황에 유용하도록 말이죠 그래픽의 크기가 마음에 들지 않거나, 차라리 잘라냈으면 하는 요소가 있을 때는 크로핑 옵션을 써보세요

코스메틱(미적 효과)조정은 이미지의 품질을 개선해줍니다 밝기, 대비, 채도, 색감 등을 바꿀 수 있어요 선호하는 프로그램에 필터나 설정 기능이 있다면, 당신은 아주 적은 시간과 노력으로도 이미지를 극적으로 바꿀 수 있어요 이미지의 크기를 조절함으로써 당신의 프로젝트에 가장 적절하게 만들 수 있습니다 이것만 기억하세요: 이미지의 품질에 영향을 주지 않으면서 본래 크기보다 크게 만드는 것은 불가능합니다

작업하는 이미지가 충분히 크지 않다면, 다른 이미지로 바꾸는 것이 최선의 방법입니다 대안으로는, 당신이 가지고 있는 이미지를 창의적으로 활용할 방법을 찾을 수도 있겠죠 사진, 그래픽, 그리고 다른 시각 자료를 추가하는 것은 당신의 작업을 더 매력적으로 만들어주는 아주 좋은 방법입니다 아주 단순한 배경 이미지만으로도 당신의 작업은 특별해질 수 있어요 컨셉과 기술 면에서 이미지의 품질에 대해 배운 점만 잊지 마세요

그러면 당신의 작업은 분명히 눈에 띌 거에요 이미지의 기초에 대한 영상, 즐겁게 보셨길 바랍니다 타이포그래피, 컬러, 구성과 같은 다른 디자인 영상도 확인해보세요!

Beginning Graphic Design: Fundamentals

'디자인의 기초'는 미술부터 현대 웹 디자인까지 모든 시각 매체의 기반입니다 대부분을 차지하는 글꼴부터 아주 작은 세부사항도 예외는 없죠

이 예시들의 공통점이 보이시나요? 아주 기본적인 요소로 이루어져있죠 선, 도형, 형체, 질감, 균형 혼자 있을 때는 그 역할이 미미해보이지만 합쳐지면 우리가 보고 만들어내는 거의 모든 것에서 큰 역할을 합니다 스스로를 예술가라고 생각하지 않는 분들에게는 특히 이 기초들이 어렵게 느껴질 수 있어요 하지만 그 기초들로부터 다양한 재료를 활용하는 방법과 간단한 시각 효과를 만드는 방법에 관해 배울 수 있어요

가장 기본적인 요소부터 시작해볼까요 '선'입니다 선이란 두개 이상의 점을 연결한 형태입니다

두툼하거나 가늘기도 하고 구불거리거나 뾰족뾰족하기도 하죠 각각의 특징을 살려 조금씩 다른 느낌을 줄 수도 있고요

디자인에서 선은 굉장히 자주 등장합니다 소묘와 삽화에도 있고 그래픽 디자인 속 질감과 패턴 안에도 있죠 선은 텍스트 구성에 있어서도 많이 활용됩니다 선으로 강조를 더할 수도 있고, 내용을 나누거나 조직화할 수도 있어요 나아가 독자의 시선을 안내하는 역할도 하죠

선을 다룰 때는 무게감, 색감, 질감, 그리고 스타일에 집중하세요 디자인을 전달할 때는 이런 미묘한 자질들이 큰 효과를 내거든요 어디에 선이 숨어있는지 찾아보세요 예를 들면 글자 속에도 선이 있습니다 심지어 서체 안에서도, 다양한 선의 형태를 활용해보면 놀라울 정도로 신기한 작품을 만들 수 있어요

'도형'은 분명한 경계가 있는 임의의 2차원 위 면적입니다 원, 사각형, 삼각형, 그리고 많은 모양을 포함합니다 도형은 크게 둘로 나뉩니다 기하학적 형태 (정형正形) 이거나, 유기적 형태 (자유형自由刑) 입니다 도형은 생각을 시각화하는 것에 있어 필수적인 요소입니다

이미지의 영향력을 키우고 눈에 띄게 만들죠 우리가 도로 표지판과 상징, 나아가 추상미술을 이해할 수 있는 것은 도형 덕분입니다 도형은 일상 속에서 놀라울 정도로 많이 사용됩니다 도형은 내용을 구성하거나 분리하는 것을 도와줍니다 그 외에도 간단한 삽화를 만들거나, 그저 작업물에 재미를 더할 때에도 활용되죠

도형은 너무나 많은 것들의 바탕이기 때문에 중요하다고 말할 수밖에 없어요 디자인 속 도형을 찾아보세요 없는 곳이 없다는 걸 금방 눈치채실 거에요 도형이 3D가 되면, '형체'라고 부릅니다 형체는 3차원으로 현실에 존재할 수도 있고, 함축적으로 표현될 수도 있습니다

이런 경우 빛과 그림자, 그리고 시점으로 깊이를 표현합니다 형체는 2차원의 디자인에 사실성을 더해줍니다 형체가 없다면, 통통 튀는 고무공은 그저 빨간 원에 불과하겠죠 3D 건축물은 직사각형의 연속에 불과하고요 심지어 플랫 디자인에서도 형체와 깊이를 표현하기 위해 미묘한 기술을 활용한답니다

(역자 주: 플랫 디자인, 입체감을 없애고 평면에 붙은 듯한 디자인 기법) 일상 속 형체는 같은 역할을 하지만 규모가 작아집니다 예를 들어 단순한 그림자를 층이 있는 것 같이 보이게 만들거나 대상에 공간감을 부여하는 데 쓰이죠 기본 형체를 활용하면 사실성이 커질 거에요 적절히 활용하면 정말 강력한 도구가 되죠

'질감'은 표면의 물리적인 특징입니다 형체와 마찬가지로, 3차원 – 즉 보고 만질 수 있는 – 이거나 함축적으로 표현될 수 있습니다 현실에 존재했다면 이러한 질감이 있었을 것이다, 고 제시하는 거죠 디자인에서 질감은 평평해 보이는 이미지에 깊이감과 감촉을 더합니다 활용된 요소에 따라 부드럽거나, 거칠거나, 단단하거나 부드럽게 보이게 됩니다

초심자라면 배경이미지에서 질감을 활용해 보세요 그리고 작업물이 얼마나 흥미로워지는지 경험해 보세요 자세히 살펴보면 전혀 예상치 못한 곳에서 질감을 찾아낼 수 있을 거에요 낡아보이는 글꼴이나 반질반질한 아이콘에도 있죠 너무 멀리 가지 않도록 주의하세요

한 디자인 안에서 질감 표현을 과하게 사용하면 디자인이 쉽게 망가집니다 '균형'은 시각적 무게의 균등한 분배입니다 다시 말해서, 독자의 눈을 사로잡는 요소가 무엇인지와 그들이 가지는 무게감을 말하죠 균형은 색감, 크기, 개수, 그리고 여백에 쉽게 영향을 받습니다 초심자라면 균형을 다루는 것이 조금 어려울 수 있습니다

일종의 직관이 필요하거든요 다행히도, 디자인 세계에는 균형의 수많은 변이형을 쉽게 이해하도록 도와주는 예시가 아주 많습니다 대칭형 디자인은 축의 양쪽이 같거나 비슷합니다 양쪽이 같거나 충분히 비슷하게 구성되어서 균형있다는 느낌을 주죠 비대칭형 디자인은 다릅니다

그러나 무게감은 여전히 균등하게 분배되어 있죠 중요한 것들에 강조점을 주었을 뿐, 이 역시 균형있다고 할 수 있습니다 주로 '3분할 원칙'이라는 전략이 활용됩니다 작업 공간이 3×3 그리드로 나뉘어져 있다고 상상하는 거에요 이미지의 중심이 이 선들의 위에 있거나 혹은 가까이 있어야 나머지 공간과 시각적인 균형을 이룬다는 겁니다

이러한 구성이 효과적인 이유는, 연구에 의하면 인간의 눈이 디자인을 스캔할 때 자연스럽게 위와 같은 순서를 따르기 때문이라고 해요 '디자인의 기초'는 결국 큰그림에 관한 이야기입니다 다시 말해 모든 작업물의 작은 세부사항들까지 감상하는 법을 배우는 것이죠 이런 통찰은 거의 모든 프로젝트에 적용할 수 있어요 자신만의 그래픽을 만들어내거나, 작품을 간단히 개선하고 싶을 때에도 쓸 수 있어요

'디자인의 기초' 영상을 즐겁게 봐주셔서 감사합니다 컬러, 타이포그래피, 그 외의 다양한 주제의 영상도 확인해보세요!

캔 목업제작 방법

미리 만들어진 모형에 적용할 상표 등을 그대로 드래그하여 가져옵니다 원본레이어를 복사하여 적용할 상품 바로위 레이어로 이동합니다

create clipping mask 를 적용합니다 처음에 가져온 레이어를 더블클릭하면 원본psd로 이동하고 이동된 psd에서 수정 후 저장합니다 다시 목업psd로 이동하시면 변경된 이미지를 확인할 수 있습니다 뒤에 있는 캔부분은 convert for smart filters 를 활용하여 Blur를 적용합니다 webtong

kr 에서 psd는 다운받을 수 있습니다 감사합니다

웹 에플리케이션 만들기 – 기획

이번 시간에는 기획에 대해서 알아보겠는데요 이 기획이라는 것은 구상 다음에 나오는 단계이지만 구상과 기획이라는 것은 칼로 물을 베는것 만큼이나 아주 밀접하게 관계가 되어있기 때문에 구분짓기는 쉽지는 않습니다 다만 우리가 굳이 절차를 구분한다면 기획이라는 절차가 따로 있는 것이겠죠 기획단계에서 주로 많이 하는것중의 하나가 UI모델링이라는 것을 합니다

UI, 모델링 둘다 익숙하지 않은 말일텐데요 UI라는 말부터 한번 살펴보죠 UI라는 것은 User Interface의 약자입니다 User Interface라는 말은 앞에 있는 User는 사용자라는 뜻이고요 Interface라는 말은 접점이라는 뜻인데 이건 다소 추상적인 표현입니다 결론적으로 말씀드리면 사용자가 시스템을 제어하는데 사용되는 조작장치들을 UI라고 불러요 UI라는 것은 아주 포괄적인 개념이라서 예를들어서 여러분들 스마트폰의 키고 끄는 버튼 또는 노트북의 켜고 끄는 그런 버튼들 그런것들도 말하자면 UI라고 할수 있고요 그리고 우리가 만드는 웹사이트에 있는 버튼 여러가지 화면에 표시되는 여러가지 정보들 이런 모든것들을 포괄적으로 UI라고 부를 수 있을거에요 어쨌든간에 UI라는 것은 결국 사용자에게 주어지는 그 기능을 조작할수 있는 것들을 포괄적으로 "UI라고 한다" 정도로 우리 생각합시다 그 다음에 모델링이라는 말은 예를들어서 이렇게 생긴 건물을 여러분들이 짓는다고 했을때 이 건물을 짓는것은 많은 비용과 자본과 위험이 따르는 일이죠 그래서 우리가 직접 건물을 짓기에 앞서서 이렇게 건물의 모양을 만들어 보는 거에요 그래서 실제로 만들어 놓고 보면 이게 괜찮은 디자인인지 아니면 동선에 문제가 없는지 또는 어떤 정도의 바람에 이 건물이 어떤 피해를 입지 않는지 그런 것들을 훨씬 더 구체적으로 파악해 볼수가 있잖아요 바로 이렇게 직접 만들기 전에 그것을 가상으로 만들어 보는 것을 우리가 건축에서는 모델링이라고 하고 그것을 컴퓨터 쪽에서 차용해서 가져온 개념이 모델링이라는 개념이겠죠 그래서 UI 모델링이라는 것은 사용자 입장에서 동작하는 기능을 실제로 만들기에 앞서서 가상으로 만들어 보는것 그것이 UI모델링 입니다 UI모델링이 중요한 이유는 일차적으로는 제가 생각하기에는 커뮤니케이션 부분에 있습니다

소통을 하는데 있어서 "뭘 만들자" 라고 했을 때 말로 표현을 하게 되면 그 말을 듣는 사람들 한명한명이 완전히 다른 생각을 할 가능성이 매우 높습니다 하지만 무언가를 실제로 만든다는 것은 많은 시간과 비용이 들어가는 일이기 때문에 그걸 만들고 부수고 만들고 부수고 할수는 없잖아요 그렇게 하다보면 기회를 잃어버리기도 하고 또 사이가 안좋아질때도 많습니다 그래서 무엇을 만들고자 하는지를 분명하게 서로가 공유하기 위한 아주 편리하고 분명한 도구로서 우리가 UI모델링을 하는 것이라고 저는 생각해요 그래서 우리가 지금 만들려고 하는 것은 이 생활코딩이라는 생활코딩의 웹사이트를 우리가 처음 만들어보려고 하는 거잖아요? 그래서 그려보면 이런 모양이 대충 될겁니다 보시는 것처럼 이렇게 수업의 제목이 나오고요 그리고 왼쪽에는 그 수업의 항목들이 나오고 그리고 오른쪽에는 이 왼쪽에 있는 항목을 선택하면 오른쪽에 자세한 내용이 보이고요 그리고 이건 나중에 자바스크립트 부분을 설명하기 위한건데요 블랙을 누르면 디자인이 검은색으로 바뀌고 화이트를 누르면 흰색으로 바뀌는 그런 기능을 가지고 있는 버튼입니다 "이런걸 만들어 보겠다"라고 기획자가 또는 실행계획을 세우는 사람이 그림을 그리는 거죠 그래서 구성원들한테 공유해서 피드백을 받고 그리고 서로가 생각하는바가 일치한다는 것을 확인한 다음에 프로젝트에 들어가는 것이죠 그렇게 하는게 기획업무의 많은 부분을 차지하는 건데요 이렇게 간단한 페이지는 사실 특별한 도구가 필요하진 않아요 간단하니까 그런데 우리가 웹사이트를 제대로 구축을한다면 그리고 기능이 많고 많은 사람들이 사용하는 경우에는 페이지만해도 1,000장 짜리 프로젝트가 있다고 들었어요 1,000장짜리 프로젝트는 대부분 실패하긴 하지만 아무튼 상당히 많은 양의 기획서들이 만들어질수 있습니다

그래서 그걸 손으로 하기에는 힘도 들지만 나중에 문제가 생겼을때 수정하려고 하면 아주 많이 힘이 들겠죠 그래서 여러가지 모델링 도구들이 있어요 그중에 첫번째는 말씀드린 것처럼 손으로 그리는 겁니다 간단한건 손으로 그리는게 제가 보기에는 최고에요 그다음에 펜슬이라고 하는 오픈소스 모델링 도구가 있습니다 이걸 이용하면 여러분이 컴퓨터로 모델링을 할수가 있어요 그래서 우리가 어떤 서비스를 구축한다고 하면 거기에서 사용되는 여러가지 공통적으로 사용되는 것들이 있는데 그런것들을 미리 준비해놨기 때문에 여러분들이 훨씬 쉽고 빠르게 모델링을 할수 있다는 장점이 있습니다 그리고 이 펜슬보다도 제가 조금더 좋아하기는 하는데 유료인것은 balsamiq이라는 툴이 있는데요 balsamiq은 사람이 손으로 그린것같은 느낌의 어떤 모델링을 할수 있도록 도와주는 도구이고 기능도 상당히 괜찮기 때문에 한번 구경삼아서 사이트에 방문해보시면 좋을것 같습니다 그리고 기획자들이 가장 많이 사용하는 도구는 파워포인트 입니다

파워포인트는 기본적으로 프리젠테이션을 위한 도구이지만 파워포인트 안에는 소프트웨어의 기획을 하는데 있어서 도움을 줄수 있는 여러가지 기능들이 많이 포함이 되어있기 때문에 파워포인트를 이용하는 경우도 많이 있습니다 이렇게 해서 우리가 이번시간에는 기획에 대해서 살펴보았는데요 사실 기획이라는것은 굉장히 중요한거에요 기획을 아주 꼼꼼하고 그리고 사려깊게하지 못하면 결국에 프로젝트는 반은 실패한거라고 볼수 있어요 기획이라는 것은 아주 심도있는 분야이기 때문에 이것은 이것대로 별도의 어떤 트레이닝이 필요할만큼 아주 중요한 부분입니다 다만 우리 수업에서는 기획이 목적이 아니라 우리수업의 목표는 결국에는 개발이기 때문에 기획에 대한 부분은 이렇게 간단하게 짚고 넘어가는것으로 마치도록 하겠습니다

Beginning Graphic Design: Color

색깔 색은 디자인과 일상에서 필수적인 역할을 합니다

이미지로 눈길을 이끌기도 하고 특정한 기분이나 감정이 들게도 하고 심지어는 단어를 일체 쓰지 않아도 의사소통을 가능하게 합니다 그렇다면 어떤 색들은 조화롭고 어떤 색들은 아닌지 어떻게 알 수 있을까요? 답은 간단합니다: 색채 이론이죠 예술가와 디자이너는 수 세기 동안 색채 이론을 지켜왔습니다 그리고 누구나 배울 수 있어요

디자인을 위해 색을 고르거나, 입을 옷을 고를 때와 같은 다양한 상황에서 색채 이론을 활용하면 자신감을 가질 수 있습니다 약간의 통찰만 있다면, 색을 완전히 새로운 방식으로 보게 될 거에요 기초부터 시작해볼까요, 아주 기초부터? 기초 교육과정을 떠올려 보세요 학교에서 원색과 동화색(2원색을 혼합한 색) 배운 거 기억하시나요? 그렇다면 이미 색채 이론에 대한 지식을 갖고 있는 거나 마찬가지에요 빨강과 노랑은 주황을 만들고, 노랑과 파랑은 초록을 만들고, 파랑과 빨강은 보라를 만들죠

이 색들을 섞으면, 중간 빛깔을 더 많이 만들 수 있어요 다홍색이나 라임색처럼요 모두 모이면, 색상환(고리 도표)을 형성합니다 (이름이 어디에서 유래되었는지 알겠죠?) 이제 한 걸음 나아가서, 색상, 채도, 명도에 관해 알아볼게요 일상에서 접할 법한 용어는 아니지만, 색의 미묘한 차이를 이해하는데 도움이 됩니다

인테리어 상점의 페인트 칩들의 색처럼 다양할 때요 색상이 가장 쉽습니다; '색'의 다른 말일 뿐이에요 채도는 강도를 의미합니다 다른 말로는 색이 얼마나 은은한지 혹은 선명한지를 말해요 명도는 색의 어두움과 밝음에 관련이 있어요

검은색과 흰색 사이에서 판단하죠 보시는 것과 같이, 명도는 다양한 빛깔을 만들어낼 수 있어요 붉은빛 도는 어두운 갈색에서부터, 밝은 파스텔 분홍색까지요 그렇다면 색을 전문적으로 사용하는 것처럼 보이기 위해서 이들을 어떻게 활용해야 할까요? 사실 색의 조화에 기초해서 만들어진 믿을 만한 공식이 이미 존재해요 큰 도움이 되죠

색상환만 있으면 된답니다 가장 쉬운 조화 공식은 단색 설계입니다 한 가지의 색만 사용하니까요 색상환에서 한 부분을 선택하고, 채도와 명도에 관한 지식으로 변화를 만들어내면 됩니다 단색 설계의 최대 장점은 조화가 보장된다는 점이죠

유사색 설계는 색상환에서 이웃한 색들을 사용합니다 빨강과 주황 혹은 파랑과 초록 같은 좀 더 차가운 색들이 있겠죠

색깔들을 가지고 실험해보는 것을 두려워 하지 말고, 자신만의 특별한 해석을 보여주세요 사실 이 공식은 단지 당신에게 영감을 주는 시작점일 뿐입니다 보색은 색상환의 정반대에 위치합니다 파랑과 주황처럼요 혹은 클래식한 빨강과 초록처럼요

지나치게 단순한 보색 설계를 벗어나고 싶다면, 더 밝거나 어둡거나 채도를 낮춘 색들로 변화를 줘 보세요 인접 보색 설계는 보색의 양 옆의 색을 활용합니다 비슷한 대비 효과를 주면서도, 더 다양한 색으로 작업할 수 있어요 (더 흥미로운 결과가 나오기도 합니다) 삼색 설계는 동일한 간격 상의 세가지 색을 활용합니다

색상환에서 완벽한 삼각형을 이루죠 이 조합은 꽤나 인상적입니다 특히 원색 혹은 동화색을 포함하면 더 그렇죠 작업에 활용할 때 염두에 두세요 사색 설계는 색상환에서 직사각형을 형성합니다

하나가 아닌 두 보색 조합을 활용하죠 이 공식은 한 가지 색을 주색으로 삼고 다른 색들을 강조용으로 활용할 때 가장 조화롭습니다 색에 있어서는 몇 가지 고전적인 '할 일과 말 일'이 존재합니다 예를 들면, 같이 쓰였을 때 확 튀어버리는 색들을 본 적이 있나요? (이렇게!)(미안해요) 해결책은 완화시키는 것입니다

말 그대로에요 아주 간단한 방법이 있죠 한 가지 색으로 시작해서 그 색의 밝기, 어둡기, 혹은 채도를 조정해보세요 가끔은 지나친 대비가 독이 될 때도 있답니다 가독성은 모든 디자인에서 중요한 요소입니다

당신이 쓰는 색들은 또렷하면서도 눈에 쉽게 들어와야 합니다 때때로 색을 사용하지 않는 방법도 있죠 아니면 적어도 모든 디테일에 쓰지는 않는다거나 검은색, 흰색, 회색과 같은 무채색은 디자인의 균형을 맞춰줍니다 당신이 색을 실제로 사용할 때, 아주 유용하죠

모든 색은 메세지를 담고 있습니다 프로젝트의 분위기를 고려해서 적절한 색을 선택하는 것이 중요해요 예를 들어, 밝은 색들은 재미있고 현대적인 분위기를 연출합니다 채도가 낮은 색들은 좀 더 형식적인 느낌을 줍니다 내용에 따라 달라지기도 해요

색이라는 것이 얼마나 유연한지 놀랍지 않나요? 색감 설계에 관한 아이디어는 모든 곳에서 얻을 수 있어요 광고, 브랜딩, 유명한 예술 작품에서도 아니면 웹에서 컬러 팔레트를 검색하거나 직접 만들 수도 있어요 경력 많은 디자이너들도 그들 주변에서 영감을 얻는답니다 자신이 좋아하는 걸 찾아서 자기 것으로 만드는 데에는 아무 잘못도 없어요

어디를 보아도 색, 색, 더 많은 색이 있습니다 당신의 작업에 활용하는게 겁이 날 수도 있지만, 그럴 필요 없어요 오늘 색채 이론에 대해 배운 것을 기억하면서 계속 실험해보세요 머지않아 조화로운 색을 선택하는게 천성이었던 것처럼 쉬워질 거에요! 색의 기초에 관한 영상, 즐겁게 보셨길 바랍니다 타이포그래피, 이미지, 구성과 같은 다른 디자인 영상도 확인해보세요!

이것저것 다 하는 인하우스 디자이너~ 약간은 기분이 좋아지는 작업 영상?

거지 패션으로 하루를 시작합니다 토마토와 두유를 챙겨가고 있어요

아침 식사 대용 이 이미지 괜찮나? 아 이걸 어떻게 딸 것인가 고민중 구름을 따자! 펜툴로 한번 따보자! 핵 노가다

음 이건 아닌거 같아 패스 없앰 어떡하징? 지우개로 지우자 그냥~ 속이 다 시원ㅋ 기분 좋아~~~ 지우개는 블러가 들어있는 브러쉬로 선택해서 구름이 자연스럽게 분리될 수 있도록 카카오 채팅 무엇? 세심하게~ 그래도 나름 세심해야 돼요 구름 모양 몽실몽실 초 힘듬 구름이 왜이렇게 많은지 그리는게 더 빠를 뻔ㅋ 내가 원하는 톤으로 보정도~ 약간 그린 빛이 좋군 이미지 사이즈 살짝 줄이고~ 일러스트레이터에 가져옴 점심시간! 뭐 먹을지 메뉴 고심해서 선택중 먹는 것도 고민 선택 완료 자 다시 시작해볼까? 이번엔 보트를 따겠음 올가미 선택 툴로 대충 붙여넣기! 적당한 크기로 줄이기 어디다 둘까? 회전도 시키고 여기가 좋겠군 다시 지우개 툴로 지워준다 자연스럽게 이미지에 흡수되도록 배경에 비해 너무 밝은 것 같군 보트 뒤에 물이 넘 밝은듯 그 부분만 선택해서 어둡게 처리 살짝만~ 좋아 이정도면 됐어 자, 이제 패키지 디자인을 시작하자 이제껏 해놨던 디자인에서 소스 찾는 중 카페인도 섭취하고 택배 박스 디자인 하는 중 먹색만 가능하다고 함

칼 선에 맞춰서 상상하며 디자인 중 택배 박스에 취급 주의가 빠지면 안되지 여기저기 넘나들며 디자인 바닥면은 사선으로 열지 못하게 표시 제품 사이즈를 기재하기로 함 몇 mm냐? 음 지름은? 이런 씰링 테이프 장식도 넣기로 함 얘도 블랙으로 처리

C 0, M 0, Y 0, K 100으로 하면 블랙임 위치를 예쁘게 세심 그 자체 가로 선도 넣고 씰링 테이프 장식 넣으니까 옆에 로고랑 부딪치는 느낌 빼버리자 단위 변환 찾아보기 제품 사이즈를 기재중 펌프까지의 길이는? 원하는 폰트 찾기 이런 사이즈 기재도 디자인 요소로 활용될 수 있음 크기 비례 잘 봐야겠죠? 지름은 파이(Ø)도 기재하자! 부피도 쓰고~ 웰-메이드 로고~ 이게 낫나 저게 낫나 여긴 두 줄이 낫겠군 우리 브랜드의 메인 슬로건

Full of Goodness 지그재그 문양 추가 디자인은 이런 디테일이 중요하다 바쁨 바쁨~~~~ 한쪽 면은 이런걸 넣어볼까? 로고도 크게 넣어줘야지 슬로건도 크게 넣어줘야지 슬로건 서브 문구 기재중 디자이너는 영어도 잘해야 하나? 가끔은 궁금함

ㅋ 메인 슬로건 가로 길이에 딱 맞게 셋팅 갑자기 그림을 위에서 아래로 투시 있게 해달라는 요청 너무행 다했는뎅ㅠㅠ

하면 되지 뭐 ㅠㅠ 디자이너는 원래 이런 것임 하고, 엎고, 하고, 엎고 반복임 그래도 괜찮아 난 그림에 특화된 디자이너니까 뚝딱 뚝딱! 대고 그리세요 펌프 생성 완료 이제 몸통 까짓거 금방해 ㅋㅋㅋㅋㅋㅋ 테두리 블랙 로고도 넣어주고 세제가 담긴 경계선도 그려주기 펌프 장식 투시에 맞게 넣어줘야겠죠? 끝 이렇게 됐어요! 그럴듯합니까? 바뀐 부분이 조금 있음 이번엔 섬이다! 일을 아주 사서해요 ㅋㅋㅋ 교회 십자가 없애고 로고 넣기 입체여야겠죠? 흠 놀이동산으로 꾸미고 싶어서 서치 이게 좋겠군 예시로 한 번 넣어보기 괜찮나? 반전도 시켜보고 오케이, 이제 따자

핵 복잡하네? 펜툴로 하나하나 누끼 따는 중 노가다 뭐이리 많이 달렸어? 관람차 하하 내가 왜 이걸 선택했지? 시작했으면 끝을 봐야지 땄는데

안쪽이 문제로다 색깔 선택으로 지워봤지만 지저분하게 누끼가 따지는 상황

에라이 펜툴 들었다 까짓거 하면 돼

개고생중 와 이걸 언제 다 따나

? 절반 했음 그와중에 스티커 작업 들어옴 군대 무늬? 넣어달라는 요청 마구마구 그리기 흠

아닌 것 같아 무늬 다시 그려보기 색깔의 흐름도 생각하기 강약 조절은 색깔로부터 모양 다듬기 완성한 택배 박스 시안 디자인 괜찮나요? 관람차 다 따서 섬 하나 예쁘게 꾸밈 아르 랜드~~ 자동차도 있음 ㅋㅋㅋ 귀엽죠? 비행기가 날라다니고 간판?에 새도 앉아있음 아르랜드 섬