반응형 컴퓨터·IT/<기초 탄탄 UXUI 디자인을 위한 Adobe XD>7 05. 영화 감상 앱 UI 디자인 따라하기 (마지막 회) 영상 스트리밍 앱 UX 분석 영화 엔터테인먼트 콘텐츠 UI는 보통 어두운 톤이며 이미지가 전체를 차지하는 인터페이스를 갖고 있습니다. 이는 의도적으로 배경을 어둡게 후퇴시켜 화면을 부각하는 전략입니다. 또한 확대된 이미지나 템플릿 요소가 나열된 형태를 지닙니다. 대표적인 OTT(over the top) 영화 스트리밍 서비스인 넷플릭스는 영상과 이미지가 강조된 UI의 좋은 사례입니다. 화면에서 영화 이미지 포스트를 구성하여 선택 시 영화 또는 드라마 콘텐츠를 자세히 볼 수 있게 하고, 보통 영화는 가로 모드를 많이 사용하므로 자동으로 화면 전환을 유도하는 어포던스를 만들어줍니다. UI 디자인 실습 이미지 소스와 텍스트는 [movie_source.xd]와 [movie_text.txt] 파일을 이용하고, 완성.. 2022. 6. 2. 05. 『삶을 바꾸는 책 읽기』 -정혜윤- (마지막 회) 누군가 제게 묻습니다. 세상에서 제일 잘하는 게 뭐냐고요. 저는 이 질문이 세상에서 제일 무겁습니다. 딱히 이뤄 놓은 성과도 없고 남들만큼 잘살고 있는 것 같지도 않습니다. 그러나 오늘도 당당한 표정을 짓고 말합니다. “글쎄, 지금까지 좋아하면서 계속해 온 건 책 읽기밖에 없네.” 뭔가 특별한 걸 기대했던 상대는 그만 힘이 빠져서 말이 없습니다. 책이 가져다준 희망과 위로는 엄청난 것이었고 지금도 책을 가장 사랑하지만 말로 설명하기는 어려운 일입니다. 그 어려운 설명을 이 책은 차분하게 설득력 있는 목소리로 전합니다. 인용되는 책의 수가 많아 좀 산만하게 느껴지기도 하지만 책에 대한 열정과 사랑이 고스란히 느껴지는 책입니다. 질문을 바꿔서 오늘 행복하냐고 묻는다면 “예스”라고 말할 수 있습니다. 작은 것.. 2022. 5. 31. 04. 반응형 웹/앱 UI 디자인 따라하기 반응형 웹이란 데스크탑, 태블릿 PC, 모바일 모두에 최적화된 웹사이트 화면을 구현하는 기법입니다. 이번 예제는 반응형 앱을 다룹니다. 반응형 웹은 언제든지 모형을 변형하고 템플릿을 자유자재로 좌우 양쪽 끝의 최소 크기와 최대 크기를 고려해서 UI를 만들어야 합니다. 반응형 웹은 다음과 같은 장점이 있습니다. 간편한 유지보수: 모바일 버전과 데스크탑 버전의 형태를 함께 고려해서 최적화된 UI를 만들면 HTML/CSS 작업도 수월하고 유지보수를 할 때 하나만 수정하면 자동적으로 모바일, 태블릿, 데스크탑에 맞게 수정됩니다. 모바일 점유율 증가: 사용자가 스마트폰으로 인터넷을 접속할 때 반응형 웹은 기기 종류와 상관 없이 편리한 접근성을 보장합니다. 마케팅 이점: 웹과 앱에서 서비스를 좀 더 원활하게 보여줄.. 2022. 5. 31. 03. SNS 앱 UI 디자인 따라하기 SNS 바이럴 서비스 디자인 UX 분석 실생활에서 많이 쓰이는 SNS(social network service) 앱은 웹상에서 사용자 간 인적 네트워크를 형성할 수 있게 해주는 서비스를 말합니다. SNS는 페이스북, 인스타그램, 트위터, 네이버 블로그처럼 공개형과, 카카오톡, 라인, 텔레그램, 위챗 같은 메신저형으로 구분됩니다. 다수의 참여자가 접속해 사용하는 SNS 앱은 글자의 가독성과 빠른 접근성이 UX 측면에서 가장 중요합니다. 페이스북과 인스타그램은 같은 회사에서 서비스되고 있으며, 필드에 글과 사진을 올려서 사람들과 소통할 수 있습니다. 사용자는 주로 자신의 일상 생활, 취미 등 다양한 콘텐츠를 사람들과 공유하거나 전하고 싶은 메시지를 업로드할 수 있습니다. UI 디자인을 살펴보면 페이스북은 글.. 2022. 5. 30. 02. 디자인에 움직이는 애니메이션 적용하기 디자인에 움직이는 애니메이션 적용하기 디자인 작업이 완료되면 Adobe XD에서 강력한 기능인 프로토타입을 제작할 수 있습니다. 인터랙션을 지정한 모션 및 실제 제어할 수 있는 화면 전환 요소를 다룹니다. [프로토타입] 탭의 화면은 다음과 같습니다. ① 디바이스 미리보기: Adobe XD 모바일 미리보기 앱을 다운로드하고 이를 모바일 화면에서 공유할 수 있습니다. ② 데스크탑 미리보기: 프로토타입에서 만들었던 인터랙션 디자인을 재생할 수 있습니다. ③ 화면 인터페이스를 확대/축소할 수 있습니다. ④ 트리거: [탭], [드래그], [키 및 게임 패드], [음성] 등 프로토타입 인터랙션을 개시하는 요소를 선택합니다. ⑤ 유형: [전환], [자동 애니메이트], [오버레이], [다음으로 스크롤], [이전 아트보.. 2022. 5. 29. 01. HTML+CSS를 고려한 UX/UI 디자인 웹 디자인의 기본 요소 웹 디자인을 설계할 때 모든 요소는 100% 화면 크기를 기준으로 고려해야 합니다. 특히 기본 요소는 포토샵 기준으로 해상도가 72 ppi가 된다는 점을 숙지해야 하며, 이미지 확장자도 그 특성에 맞게 선택해야 합니다. 가령 앞에서 설명된 JPG, GIF에서 사진처럼 색상이 많이 사용된 이미지라면 JPG를 사용해야 하고, 그렇지 않고 몇 가지 단색이 사용된 이미지라면 GIF로 사용하기를 권합니다. 모바일 인터페이스에서는 JPG보다 화질이 더 좋고 투명도 표현을 지원하는 PNG 파일로 저장할 때도 많습니다. 또한 웹상에서 그래픽 해상도가 높으면서도 용량이 최저인 SVG도 많이 사용합니다. 다음으로 웹에서 HTML, CSS로 코딩하는 색상은 빛의 3원색인 빨간색, 초록색, 파란색을 조.. 2022. 5. 27. 00. <기초 탄탄 UX/UI 디자인을 위한 Adobe XD> 연재 예고 웹 & 앱 디자인 기초부터 UI 디자인, 프로토타입 제작까지! 새로운 디바이스가 나타나고 디자인 트렌드가 바뀌는 시장에서 새로운 콘텐츠를 만들기 위해 늘 새롭게 작업해야 하는 고충을 저는 누구보다 잘 알고 있습니다. 이러한 변화에도 불구하고 쉽게 변하지 않는 부분이 있습니다. 보통 우리는 “기본기가 탄탄하다”라는 말을 하는데요. UX/UI 디자인 역시 탄탄한 기초 이론을 바탕으로 실습한다면 어떤 어려움이라도 극복할 수 있습니다. 물론 디자인 트렌드나 브랜드 변화를 열린 마음으로 탐색하고 디자인 감각을 키우는 노력까지 한다면 더할 나위 없겠지요. IT 분야에서는 새로운 스마트폰의 출시뿐 아니라 다양한 웨어러블 디바이스가 나타나고, 이제는 메타버스라는 새로운 가상 공간이 대두되고 있습니다. 그러나 사용자를 .. 2022. 5. 26. 이전 1 다음 반응형
