본문 바로가기

디자인

(25)
유니티(Unity) 알아보기 [ 유니티(Unity)란? ] 유니티(Unity)는 3D와 2D 게임의 개발 환경을 제공하는 게임 엔진으로, 3D 애니메이션이나 건축 시각화, 가상현실(VR) 등 인터랙티브 콘텐츠 제작도 가능하다. 이 게임 엔진은 장점이 꽤 여러 가지 있는데, 일단 게임 제작환경이 비교적 쉽다고 한다. 코딩도 잘 모르고 게임 개발 환경에 대해 많은 지식이 없어도, 비교적으로 수월하게 게임을 제작할 수 있다. 또한 윈도우, 맥 OS, iOS, 안드로이드, 플레이스테이션, 엑스박스, 닌텐도 스위치, 웹브라우저 등 여러 플랫폼에서 사용 가능한 콘텐츠를 만들 수 있다는 것도 유니티의 주요 장점 중 하나이다. [ 유니티 인터페이스 ] 처음 실행하면 아래와 같은 화면이 실행된다. 유니티의 인터페이스는 크게 4가지로 구분 지을 수 ..
UI/UX 디자인 툴 [ 피그마(Figma) ] UI/UX에 관심이 있다면 '피그마(Figma)'에 대해 한 번쯤 들어보았을 것이다. 피그마는 웹 기반 UI/UX 디자인 프로토타이핑 툴로, 요즘 많은 회사에서 이용 중인 툴이기도 하다. 특정한 일부 서비스를 제외하고는 무료로 거의 모든 기능을 사용할 수 있어서 (매달 몇 만 원씩 내야 하는 어도*와는 달리,,^^ ) 학생들도 마음 편하게 쓸 수 있다는 장점이 있다. 또한 웹 기반 프로그램이라 따로 저장이 필요하지 않다. 굳이 ctrl+S를 누르지 않아도 실시간으로 자동 저장이 된다. 무료 프로그램, 실시간 저장 기능 외에도 피그마의 핵심 기능은 바로 '협업'이라고 할 수 있다! 위 사진처럼 공유하고 싶은 사람의 이메일을 입력하거나, 직접 링크를 보냄으로써 현재 작업 중인 피그마 링크를 공유할 수 있다...
모각코 [ 8월 과정 UX/UI 피그마 ] 후기 # 모각코란 무엇인가요? : 모여서 각자 코딩의 줄임말로, 코딩의 습관을 만들어 주고 함께 코딩 공부할 사람들을 만들어주는 온라인 무료 코딩 스터디 과정입니다! # 모각코에 참여하게 된 계기 : 개강 전에 한 가지라도 집중해서 공부해보자! 하는 마음으로 참여하게 되었습니다. 모각코에는 다양한 커리큘럼이 있어서 그중에 원하는 커리큘럼 1개를 선택할 수 있는데요! 저는 UX/UI에 관심이 많기도 하고 피그마 사용법을 제대로 알고 싶었기에 [ UIUX 피그마 ] 과정을 신청했습니다. # 모각코로 인한 변화, 좋았던 점 : 일단 UX/UI에 대한 개념을 확실히 알고 넘어갈 수 있었습니다. 피그마라는 툴에 대해서도 기초부터(무려 피그마 설치하는 법부터..!) 하나하나 자세하게 알려주셔서 좋았어요. 피그마의 컴포넌..
모션그래픽이란? (+ 영상 유튜버 추천) 모션그래픽이란 무엇일까? 모션그래픽을 간단하게 말하자면, 움직이는 그림이라고 할 수 있다. 더 자세하게는 비디오나 애니메이션에 쓰이는 기술로, 모션 픽쳐(motion picture)라고도 한다. 주로 어도비의 After Effects 등의 프로그램을 이용하여 사진 또는 그림들을 움직이거나 효과를 주어 모션그래픽을 제작한다. 정적인 그래픽이 아니라 움직임이 들어간 그래픽이기 때문에 시각적으로 풍부함을 느낄 수 있고, CF나 영화 등 많은 방면에서 활용되어오고 있다. 나는 종종 모션그래픽을 제작하는데, 작품을 만들 때마다 유튜브로부터 도움을 많이 받는다. 모션그래픽을 공부하는 사람들을 위해, 영상 제작할 때 많은 도움을 주신 두 유튜버를 추천하려 한다. 1. 비됴클래스 첫 번째 유튜버는 '비됴클래스'이다. ..
마이크로 인터랙션이란? 스마트폰 금융 앱에서 100원이 적립된다고 가정해보자. 이때 [ '100원 적립되었습니다.'라는 문구만 띄워지는 것 ]과 [ 동전이 쌓이는 애니메이션과 함께 '100원 적립되었어요!'라는 문구가 띄워지는 것 ] 둘 중에 어느 쪽이 사용자를 더 즐겁게 만들까? 첫 번째 케이스는 단순해서 좋지만 재미가 없다. 즐거움으로만 따진다면 두 번째 케이스가 사용자에게 더 즐거운 경험으로 다가올 것이다. 마이크로 인터랙션은 두 번째 케이스처럼 '사용자를 즐겁게 하기 위한 것'으로 봐도 무방하다. 아래는 마이크로 인터랙션을 잘 설명할 수 있는 예시이다. 좋아요 버튼을 누르면 농구공이 튀어 오르는 모션과 함께 버튼에 색이 채워진다. 좋은 마이크로 인터랙션은 사용자에게 즉각적으로 시각적 피드백을 제공한다. 따로 설명하지 않..
[ Daily UI ] 002. Credit Card Checkout 디자인 Daily UI의 두 번째 미션은 바로, 신용카드 결제 화면 디자인이다. 어제(챌린지 첫날) 메인 레퍼런스 없이 무턱대고 도전했더니 어색한 결과물이 나왔었다. 아직 난 UX UI 초보이기도 하고, 아는 것보다 배울 게 훨씬 더 많으니 일단 레퍼런스를 먼저 잡고 들어가기로 했다. 오늘의 메인 레퍼런스: 카카오 T (말이 메인 레퍼런스지 그냥 모작이다..!) 위 사진은 포인트, 쿠폰 기능만 빼고 모작한 결과물이다. 카카오 T는 최종적으로 사용자가 눌러야 할 '적용하기' 버튼에 행동 유도성이 높다. 카카오 T의 '적용하기' 버튼은 누가 봐도 저게 핵심 버튼이겠구나를 알 수 있다. 또한 '취소'버튼은 고스트 버튼(얇은 선으로 테두리가 있고, 투명하거나 비어있는 버튼)을 사용하여 눈에 띄지 않게 제작했다. 실제로..
UX UI 공부 2일차 [ Affordance, Placeholder ] Affordance(행동 유도성) Affordance란 사용자의 행동을 유도하는 사물의 속성을 말한다. 디자이너가 의도한 사용자의 특정 행동을 자연스럽게 유발하는 것이다. 예를 들어 채팅창 전송 버튼을 만든다면 누구나 쉽게 클릭할 수 있도록 디자인해야 한다. 또한 입력 창에 내용이 없으면 전송 버튼이 비활성화 상태이지만 내용을 입력하면 활성화되는 것도 행동 유도성이라 할 수 있다. 좋은 디자인은 행동 유동성도 높다. 이번에는 Affordance를 고려하여 로그인 페이지를 만들어 볼 것이다. 핀터레스트에 있는 로그인 페이지를 모작하며 하나하나 뜯어보.. 기 전에 placeholder가 무엇인지 짚고 넘어가겠다. Placeholder(입력 힌트) Placeholder는 사용자가 값을 입력하기 전에 입력값이 ..
UX UI 공부 1일차 [ 그리드 시스템, 모작, 단축키 ] 디자인 계의 올라운더가 되고 싶었던 나,, 일러스트도 그리고 영상도 만들고 UX UI도 공부하자고 생각했지만, UX UI 공부는 결국 한 번도 안 했다. 그런데 이번에 동아리 선배 소개로 토이 프로젝트에 참가하게 되었다. 사실 일러스트를 그리는 줄 알고 들어갔으나 UX UI 디자이너의 역할을 맡게 되었다(?). 잘할 수 있을까 걱정되긴 하지만, 이번 기회에 UX UI를 공부해야겠다는 의지가 마구 샘솟았다. 아직 UX UI에 대해 1도 모르지만 오늘부터 열심히 공부해보려 한다. 일단 많이들 사용하는 피그마(Figma)로 시작해야겠다! [ 그리드 시스템 ] UI에서 그리드 시스템은 정말 정말 중요하다. 그리드 시스템을 먼저 잘 정리해놓아야 가이드라인 잡기도 편하고 퍼블리셔와의 소통도 원활해진다고 한다. 그리..