공부/잡학

    [UI/UX] UI, UX의 정의와 프로젝트 간 느낀 점

    안녕하세요, 기계과 감성쟁이입니다. 시험기간이 끝나고 일주일 뒤에서야 돌아왔습니다. 휴식도 필요하고, 몰아칠 프로젝트를 대비한다고 포스팅 주기가 점점 늦어지네요. 마침 5개월 간 이어져온 프로젝트의 완성이 1달 앞으로 다가온 겸, UI/UX 디자인에 대해 소개하고 느낀 점에 대해 말해보려고 합니다. 1. UI (User Interface) UI는 User Interface 의 약자로써, 사용자가 제품/서비스를 사용할 때 마주하는 모든 것들을 말합니다. 아이콘, 버튼, 레이아웃, 디자인, 액션, 상호작용을 포함하죠. 중요한 것은 액션과 상호작용을 포함한다는 것입니다. 즉, 버튼을 클릭했을 때, 어떤 액션이 취해지는 지도 UI의 한 부분이라는 말이죠. UI 를 디자인하는 경우에 대해 생각해봅시다. 여러분이 ..

    [정보] 와이어프레임(Wireframe)와 제플린(Zeplin)에 대해 알아보았다

    안녕하세요. 기계과 감성쟁이입니다. 한자 자격증 딴다고 못왔는데... 이제야... 다시 블로그로... 디자인 외주를 맡기는 일이 생겨 와이어프레임에 대해서 알아보았습니다. 1. 와이어프레임(Wireframe)이란? 와이어프레임은 '앱 또는 웹사이트의 화면을 간단히 시각화한 것'이라고 할 수 있겠는데요, 그림을 그리기 전에 밑그림을 그리듯이, 건물을 짓기 전에 청사진을 그리듯이 앱 또는 웹사이트를 제작하기 전에는 와이어프레임을 그립니다. 이라고도 얘기할 수 있겠습니다. 실제 예시를 보는게 이해하기 더 쉬울 것 같아요. 이건 디자인 툴을 이용해서 제작한 와이어프레임입니다. 사용하는 툴로는 대표적으로 '어도비 XD'와 'Sketch'가 있습니다. 당연히 포토샵이나 일러스트레이터 같은 툴도 상관없어요. 이렇게 ..

    [기획] 플로우차트(Flow Chart)에 대하여

    안녕하세요. 기계과 감성쟁이입니다. 최근 한 프로젝트를 진행하며 프로그램 기획을 하게 되었습니다. 그래서, 오늘은 플로우차트에 대해 적어볼까합니다. 1. 플로우차트(Flow Chart)란? 플로우차트는 흔히 '순서도'라고 불리기도 합니다. 프로그램의 진행 순서를 나타낸다는 뜻이죠. 위 사진을 보면 이해가 더 잘되실 겁니다. 프로세스가 어떻게 진행되는지 하나의 Diagram으로 이해할 수 있습니다. 프로젝트의 밑그림이자, 팀원들과 자신의 생각을 공유하기 위함이며, 기획자가 디자이너와 개발자에게 기획을 전달하기 위하여 만든다. 2. 정말 필요한가요? 본인은 프로그램 기획을 해본 적이 없다. 그래서 이 프로젝트를 맨땅에 헤딩하듯 이곳 저곳 물어가면서 팀원들과 해나가는 중이다. 기능명세서를 작성하고, 디자인가이..

    [디자인] 카드뉴스 템플릿을 만들어 봄.

    * 사진 속 모든 로고는 저작권법에 의하여 보호받는 저작물이므로, 무단 사용을 금합니다. 카드뉴스 만들 일이 생겨서 제작해봤다. 컨셉은 깔끔, 무난. 사진 속 컬러들은 기존의 키 컬러에서 톤을 적당량 변경하여 이용하였다. 두 번 째 사진, 내용 부분 행렬 안맞는 건 귀찮아서 그냥 한 텍스트 상자로 썼기 때문이다... 그리고 저 행사들은 그냥 넣어본거다. 이 시국에 무슨 풋살이며 행사며...