스토리 홈

인터뷰

피드

뉴스

조회수 2114

다함께 써봐요 Google Web Designer!

안녕하세요. 이번 기술 블로그 글을 맡은 spoqa 디자이너 Been입니다 ^^ 회사에서 그래픽디자인을 맡고 있으며 기술 블로그 글을 쓰는 건 처음입니다.회사 프로젝트를 진행하며 접하게 된 Google Web Designer 베타버전에 대해 글을 쓰려 합니다. Google Web Designer로 프로젝트를 진행하며 알게 된 기능과 느낀 점에 관한 이야기입니다.먼저 Google Web Designer 는요, 근래에 구글에서 개발한 웹 디자인 프로그램입니다. 위키백과에 검색해보니 이렇게 설명이 되어있더군요.Google Web Designer is a program for Windows and Mac from Google for creating interactive HTML5 sites and ads for any device.웹 페이지를 만들거나 웹 배너를 만들기 위한 프로그램이라고 생각하시면 됩니다^^실행해보니 기능이 디자이너와 프로그래머가 협업하기 좋은 프로그램입니다. 디자인하듯 그리거나 배치한 것이 HTML/CSS 언어로 바로 변환돼 표시 됩니다. * 구글에 검색하시면 쉽게 내려받으실 수 있습니다.최근 크리스마스를 맞아 저희 SPOQA에서 이 프로그램을 활용하여 각 매장 태블릿기기에 들어갈 간단한 애니메이션을 제작했습니다. (도도 매장을 방문하시면 태블릿 기기로 감상하실 수 있습니다.) 이제부터 제작하며 프로그램에 관해 느낀 점과 그에 관련된 짤막한 기능들을 설명하겠습니다.우선 간략하게 작업 창을 설정하는 방법을 알려드리겠습니다.1. 설치한 Google Web Designer를 더블클릭하면 구글같이 생긴 아래 이미지가 뜹니다.2. 파일 - 새 파일을 누르면 작업 창 설정 창이 뜹니다.3. 플래시처럼 레이어를 생성해 소스를 하나하나 움직이기 위해서 새 파일에서 배너를 선택, 태블릿 해상도(or 원하는 크기, 저는 태블릿에 들어갈 애니메이션을 만들어야 했기에 태블릿 해상도에 맞췄습니다.) 크기에 맞춰 작업 크기를 설정해 줍니다. 파일의 이름을 지어준 후 애니메이션 모드는 고급 모드로 설정 후 확인을 누릅니다. (빠른모드에서는 레이어 생성을 할 수 없습니다.) * 파일은 html로 저장됩니다.4. 짠작업 창이 떴습니다. 이제 작업을 시작할 수 있겠죠? ^^ 저 하얀 작업 창에 소스를 집어넣고 이것저것 움직임을 주면 대강 이런 모습이 나옵니다. 평소 디자인 프로그램을 사용해보신 분들이면 그리 어렵지 않게 다루실 수 있다고 생각합니다.사용해보니 마치 일러스트레이터 + 플래시 + 드림위버 미니 버전 같습니다.다음으로 작업하며 사용했던 기능에 대해 몇 가지 말씀드리겠습니다.소스소스들은 파일 창에서 작업 창으로 드래그하셔서 쓸 수 있습니다. 소스를 옮겨놓으면 자동으로 images라는 폴더가 생성되는데 그 안에 옮겨놓은 소스가 들어있습니다. 같은 소스를 또다시 끌어다 놓으면 자동으로 복제됩니다. (작업 창과 images 폴더에) 일러스트레이터나 포토샵처럼 상단 메뉴바에서 이미지를 불러올 수는 없습니다.레이어소스가 작업 창으로 옮겨지면 레이어가 생성되는데 이 레이어의 이름을 지정하고 싶으면 오른편 속성 창에서(오른쪽이미지) 요소 밑에 있는 ID로 이름값을 지정해 주면 됩니다. HTML스럽네요. 아무리 레이어에서 더블클릭을 하고 우클릭을 해도 이름 변경이 안 됩니다. 레이어의 위아래 순서는 끌어 옮겨서 바꿀 수 있고 레이어를 선택하고 Ctrl+c, Ctrl+v 하면 선택된 레이어가 복제됩니다. 상단 메뉴바의 수정에서도 가능합니다. (타임라인 복제가 아니라< 레이어=화면의 소스>만 복제됩니다.) 각 레이어를 클릭하면 오른편 스타일 창에서 해당 코드를 보여줍니다. 레이어 오른편에 휘어진 화살표를 클릭하면 해당 레이어 재생 수를 지정할 수 있습니다. (없음/2회/무한) 세 가지 옵션입니다. 그래서 옵션을 무한으로 설정하면 해당 동작이 계속해서 반복합니다.타임라인타임라인의 시간 범위를 설정할 수 는 없습니다. 그저 원하는 마지막 시간위치에 키프레임을 놓는 것이 범위 설정 방법입니다. 원하는 위치에서 우클릭을 하면 키프레임을 삽입할 수 있습니다. 타임라인을 복사해서 다른 레이어에 붙일 수 없습니다. 타임라인 위의 키프레임들이 중복 선택이 안 될뿐더러 alt+탭을 눌러 개별 복사하는 기능도 먹히지 않습니다. 키프레임과 키프레임 사이에 마우스를 대고 우클릭을 하면 easing(이징) 기능이 있습니다. 움직임의 가속과 감속을 조절할 수 있는 기능입니다.기타기능타임라인 윗부분에 코드 보기를 누르면 디자인한 작업의 전체 코드를 작업 창에서 보실 수 있습니다. 그 옆의 미리 보기를 누르면 브라우저로 작업물을 확인할 수 있습니다. 브라우저는 크롬과 인터넷 익스플로러 두 가지입니다. 타임라인의 재생버튼을 누르면 작업창 안에서 작업물이 동작하는 모습을 볼 수 있습니다. 재생버튼 옆의 휘어진 화살표를 누르면 재생이 계속 반복해서 됩니다. 맨 오른쪽의 게시버튼은 작업물을 추출할 수 있는 버튼입니다. 이미지를 선택하시고 상단 메뉴바의 변환컨트롤이라는 부분에 체크를 하시면 해당 이미지의 크기나 각도를 조절 할 수 있습니다.그 옆은 오브젝트들을 정렬할 수 있는 기능입니다. 맨 오른쪽은 사진의 설명처럼 레이어의 순서를 바꿀 수 있는 버튼입니다. 그 외 3D기능, 간단한 오브젝트를 그리고 칠할 수 있는 기능 등이 있습니다.이제 마지막으로 작업한 결과물을 추출하는 방법을 알아보겠습니다.추출법다 만든 작업물을 추출하는 것은 미리 보기 옆의 게시 버튼을 눌러 할 수 있습니다. 추출하면 zip으로 압축되어 나오고 그 안에 Index.html과 사용한 소스파일들이 들어있습니다. 아래는 게시버튼을 누르면 나타나는 창입니다. 원하는 이름과 위치를 지정해 주고 파란 게시버튼을 누르면 끝! 이렇게 완성된 도도 크리스마스 애니메이션은 곧 혹은 이미 도도 매장의 iPad로 확인하실 수 있습니다. ^^ (아쉽게도 갤럭시 노트 10.1은 프레임 문제로 지원하지 않아요.) 만약 구글 크롬이나 파이어폭스를 쓰신다면 PC에서도 확인하실 수 있습니다.이상 제가 알게 된 구글 웹디자이너 프로그램 기능에 관한 글이었습니다 ^^ 정말 필요한 기능들만 모아 간결하게 만들었네요. 복잡하게 여러 메뉴를 거치지 않고 바로 보이는 것들로 기능을 실행할 수 있는 점이 그렇게 느끼게 하지 않았나 싶습니다. 기존 디자인 툴과 크게 다르지 않은 배치와 생김새가 프로그램에 빠르게 익숙해지는 데 일조했습니다. 하지만 사용한 기능 중 가장 아쉬웠던 부분은 타임라인 조작인데요, 타임라인 선택복사가 되고 복수선택이 되어 전체복사가 되면 좀 더 편리하고 참 좋지 않았을까 싶네요.처음 접하시는 분들께 도움이 되었으면 좋겠습니다. 혹시 기능 설명에 잘못된 부분이 있다면 알려주세요. ^^ 미흡한 글 읽어주셔서 감사합니다. ^^참고위키 백과공식 사이트#스포카 #디자인 #디자인팀 #디자이너 #구글 #웹디자이너 #구글웹디자이너 #꿀팁 #스킬스택 #스택소개 #인사이트 #경험공유
조회수 3731

앱(App)의 첫인상 = 홈 배너

첫인상은 한번 각인되면 쉽게 바뀌지 않는다는 말을 한 번쯤은 들어보셨을 텐데요. 표정, 옷매무새 등으로 자신을 어떻게 표현하느냐에 따라 첫인상이 좌지우지됩니다. 그렇다면 앱(App)에서의 첫인상은 어디서 결정될까요?바로 '홈 배너'입니다.'데일리호텔'앱 2.0 버전에는 기존에 없던 홈화면이 추가되면서 마케팅 성격의 배너 영역이 확대되었습니다.(이미지 참고) 해서 데일리의 첫인상을 책임질 새로운 배너 가이드의 필요성을 느끼게 됩니다.(좌)기존 앱 구동시  (우)업데이트 된 2.0 버전 앱 구동시01 무엇을 고려해야 할까?홈화면에는 '데일리호텔/데일리고메' 버튼이 새로 생성되었습니다. 사실상 두 버튼이 예약을 위한 제일 첫 단의 경로였기 때문에 이 버튼의 주목성을 방해하지 않는 선에서 레이아웃 및 톤 앤 매너를 정의해야 했어요. 또한 영역이 커진 만큼 주목도가 높아지기 때문에 유저가 지루함을 느껴서는 안 되었죠.때문에 크게 이러한 목표를 두었습니다.첫 번째. 디자인 개선두 번째. 프로덕트(UI)와의 조화위 두가지를 기반으로 데일리의 브랜드 디자인 키워드에 맞춰 아래와 같은 구체적인 방향을 설정하였습니다.02 타사 써칭 및 분석가이드를 잡기에 앞서, 타사의 경우 홈배너를 어떻게 활용하고 있는지 조사가 필요했습니다. 많은 자료들을 모아 분석해본 결과 데일리의 경우 크게 세 가지 형태로 배너를 표현할 수 있음을 도출할 수 있었죠.첫 번째. 텍스트 + 오브젝트를 함께 살리는 안두 번째. Full Image를 사용하여 하단에 텍스트 박스를 기재하는 안세 번째. 이미지에 Dim처리를 한 후 텍스트를 기재하는 안단순히 디자인의 심미성 영역을 넘어서 많이 사용되는 호텔과 레스토랑 이미지를 실제로 적용시킬 수 있는지의 판단 또한 필요했습니다. 호텔 내부 이미지의 경우 누끼(*오브젝트만 남기고 배경을 지우는 작업)를 딸 수 없는 경우가 많았기 때문이죠.03 우리와 어울리는 컬러는?배너의 레이아웃이 얼추 뼈대를 드러내는 시점에 함께 적용시킬 수 있는 컬러를 찾아야 했습니다. 앞서 말했듯이 예약 경로인 버튼의 주목성을 해치지 않는 톤 앤 매너를 유지하고, 마케팅적인 성격보다는 추천의 성격을 띠기 위해 차분한 톤이 필요했습니다.수많은 테스트 그리고 적용...또 적용04 결과최종적으로 반영된 사항은 아래와 같았습니다.1. 호텔/레스토랑 프로모션 배너 -> 누끼 혹은 그라데이션으로 이미지 처리2. 브랜드 메시지 배너 -> Full Image에 Black Dim 처리3. 누끼를 딸 수 있는 이미지 사용 권장4. 따뜻한 파스텔톤의 컬러 사용5. 워딩 Black/White Color로 통일(좌)구 배너  (우)개선된 배너해서 위와 같은 결과물을 얻을 수 있었습니다. 전과 후 배너 비교를 해보니 새삼 구 배너가 너무 많은 메시지 전달을 하려는 성향이 있었음을 느끼게 되었어요.(반성..) 또한, 이번 배너 개선 프로젝트를 통해 디자인 심미성뿐만이 아니라 많은 부분을 얻을 수 있었습니다.배너 개선 프로젝트로 얻은 것들마치며생각보다 길어진 프로젝트였지만 프로덕트와 마케팅적인 관점에서 많은 부분을 감안하고 작업을 진행한 만큼 모두가 만족할 수 있는 결과물이었습니다. 또한 홈화면의 홈배너 개선 후 많은 유저분들이 단순한 마케팅 메시지가 아닌 '라이프스타일 추천'을 받을 수 있어서 좋다는 피드백을 주셨습니다. 즉, 본 개선 작업으로 인해 브랜드 톤 앤 매너 또한 개선된 샘이었죠.앞으로도 데일리가 추구하는 방향을 유저에게 전달하기 위한 많은 과제가 놓여있다는 것을 알고 있습니다. 어떻게 하면 더 전달할 수 있을지, 더 가까워질 수 있을지, 더 특별한 삶을 보낼 수 있도록 도울 수 있을지 고민하는 데일리가 되도록 하겠습니다! 감사합니다.기획/진행 : Creative팀작성자 : Creative팀 Blair Ahn#데일리 #데일리호텔 #디자인 #디자이너 #인사이트 #브랜드 #앱디자인 #UI디자인
조회수 1210

부동산 서비스의 데이터 기반 UI/UX 반영하기

아래 이야기는 실제 예비 신혼부부가 오피노의 고객사 부동산플래닛의 서비스를 사용하는 과정을 조금의 각색을 더해 재구성하였으며 이미지에 첨부된 지역은 임의로(하지만 희망이 담겨...) 캡처되었음을 미리 알려드립니다. #집 검색 예랑: 내가 낮에 xx 지역에 집 보고 카톡으로 공유 해 줬거든, 그 집 한번 볼래?. 내부는 괜찮은거 같던데.우측 상단의 공유버튼신부: 잠깐만…데스크탑 좀 키고... 집 볼때 로드뷰 봤어? 주차 공간은? 예랑: 로드뷰 봤지. 아이폰으로 볼 땐 지도 위쪽에 작은 크기로 있으니까 놓치지 말고 . 보고나서 일단 관심매물 등록 해놨어.빨간맛...아니 빨간색 관심매물 버튼이  사용자를 유혹한다신부: 그래? 데스크탑에선 로드뷰 메뉴 찾기 쉽게 되어있는데. 우선 옵션이랑 쭉 살펴볼게~주변 편의시설과 로드뷰 외에도 다양한 매물 정보를 확인할 수 있다# 실거래가 검색 신부: 오빠, 이제 전세자금 대출 준비도 해야겠다. 예랑: 그러게, 요즘 xx 지역 전세자금 대출 얼마나 받을 수 있으려나.신부: 전세자금 대출도 대출인데, 건물 종류가 뭔지에 따라 전세자금 대출 조건이 달라지니까 건물 종류를 같이 따져야 돼예랑: 집 종류는 아파트 아니면 빌라 같은거 아닌가? 신부: ......예랑: 바로 알아볼게 어떤 종류가 있는지! 다양한 부동산 종류에 압도되지 말자. 각자의 목적에 맞는 종류를 선택하면 된다예랑: 아파트 오피스텔은 알겠는데 연립/다세대랑 단독/다가구는 처음보네.신부: 우선 우리가 전세 계약한 집 볼거니까 아래쪽에 상가~토지 까지 전부 해제해 봐.예랑: 그럼 주거용만 보기 누를게.신부: 그리고...우리가 전세 계약한 단독/다가구... 34억 이거 클릭해봐.예랑: 역시. 로또 된거 맞네. 34억 지금 사면 얼마나 더 오를려나??? 신부: 쓸데 없는 소리하다 혼난다. 전세자금 대출 받으려고 건물가격 확인 하는 거야~예랑: 네...신부: 우선 건물주 몇명인지 정보 볼래? 예랑: 그건 왜 보는거야? 신부: 하나의 건물이라도 소유주가 여러명일 수 있어서 이런 요소를 다 알아야 전세자금 대출을 제대로 받을 수 있어. 여기 상세 정보 있네. 아 건물 주인이 한명이네. 아...나도 건물주 하고 싶다신부: 지금 이 건물의 시세랑 소유주가 왜 중요하냐면, 만약에 이 건물 주인이 잘못되면 ~~~$%^&* ~~~먼저 빼주고 우리 보증금을 줄거란 말이야. 그래서 건물 실거래가 정보가 중요해.예랑: ......?신부: 그래...우선 이 실거래가 정보도 일단 내 카톡으로 공유해줘..익선동 맛집 추천 받습니다#부동산 인사이드예랑: 나 부동산 공부 좀 해야겠다...방금전에 설명해 준 내용 하나도 이해 못했어신부: 우선 뉴스 보면서 부동산 용어를 우선 익혀봐. 여기 부동산 인사이드 눌러봐바구독을 유도하기 위한 팝업창예랑: 오호...이 기사 좀 봐….전셋값은 하락하는데 집주인이 보증금을 안준데. 이 기사 한번 읽어볼까? 우리도 나중에 보증금 못받으면 어떡하지? 신부: 응 그 기사 클릭해봐. 오 여기 구독도 되네. 이거 구독신청하고 계속 봐 틈날때 읽어. 나중에 제대로 봤는지 안봤는지 검사한다. 예랑: Yes, Sir! 글을 읽으면서 눈치채신 분들도 계실지 모르겠으나 볼드체로 표시한 기능과 행동들은 우리 서비스에 고객들이 다시 방문하게 유도하거나(관심매물 등록, 구독하기), 다른 사람도 쉽게 서비스로 유입시키는 기능(공유하기), 그리고 사용자들이 서비스를 사용하며 기대하는 정보(로드뷰, 매물 종류, 실거래가 정보 등)들과 이로 인해 발생하는 행동들이다.관심매물 등록, 공유하기, 로드뷰, 구독하기와 같은 버튼들이 고객들이 의식적으로 찾지 않아도 쉽게 인지할 수 있는 위치에 있고 고객의 사용 과정에 자연스럽게 녹아있다면, 혹은 다른 정보들보다 한눈에 돋보이는 색상과 디자인을 가지고 있다면, 고객들이 더 오랜시간 서비스에 머무르며 중요한 기능을 사용 할 것이라 추측할 수 있다. 그렇지만 이 기능이 얼마나 유효한 기능인지, 어떻게 바꿔야 고객들의 편리를 더 증가시키는 유의미한 결과를 유도할 수 있는지는 변경하고 시도하기 전까진 아무도 모른다. 설상가상으로, 만든 사람이 중요하다고 생각하는 기능과 고객이 사용하는 기능이 일치하는지, 모바일과 웹 환경에서 사용자의 행동이 얼마나 다른지 수치적으로 확인하지 않는다면? 내가 의도한 기능을 왜 사용하지 않는지, 어떻게 행동을 변화시킬 수 있을지 고민하는 것이 애초에 불가능하지 않을까?그래서 이 글을 읽고 계시는 분들에게 감각에 기반해 의사결정을 내리기에 앞서, 나의 서비스는 제대로 측정하고 있는지 먼저 파악해 보시기를 추천드립니다.퍼포먼스 마케팅 에이전시, 오피노 바로가기부동산 투자의 시작과 끝, 부동산플래닛 바로가기
조회수 1737

이제는 必환경시대에 맞는 친환경 패션이 대세!

안녕하세요! 패션 블로그 웹뜰입니다.혹시 2019년 이슈중에 하나인 必환경시대라는 말을 아시나요?바로 편의성과 간편함으로 사용해온 일회용품, 비닐, 플라스틱으로 만들어진 제품들이 환경 오염을 유발하고 있다는 사실이 사회적으로 큰 이슈가 되면서 환경을 반드시 지켜야한다는 시대라는 뜻입니다. 그에 맞게 여러 산업군에서도 지속가능성있는 제품에 대한 연구가 활발해지고 있는 데요.패션산업 군에서도 버려지는 헌 옷과 쓰레기의 환경 오염을 예방하고자지속가능성이있는 친환경패션에 대해 주목하기 지삭했습니다.그러다면 必환경시대에 필수가 되어진 친환경패션이란 무엇일까요?에코라는 의미는 사전적으로 생태학을 의미하며 즉 생물과 환경의 관계를 연구한다는 뜻으로에코패션은 패션에서는 환경과 생명체의 공존을 위한 패션입니다.일반적으로는 친환경적인 원단인 린넨이나 헴프등의 마나 유기농 원단을 이용해 만들어진 친환경적인 의류들을 말하고 있지만최근에는 재활용을 이용한 업사이클링 패션, 에코퍼(페이크퍼), 혹은 환경에 대한 메시지를 담는 등 여러 형태의 에코패션이 주목을 받고 있습니다.특히 2019년에는 EARTHY LOOK부터 NEUTRAL 컬러까지 다양한 지구 환경에 대한컬렉션들이 나오고 있으며 친환경패션이 트렌드로 자리잡고 있는 데요.키즈 브랜드부터 액세서리 까지 다양한 브랜드에서도 친환경 패션을 선보이고 있습니다.지속가능한 패션을 꿈꾸는 스텔라맥카트니친환경 패션기업의 대표로 손꼽히는 스텔라맥카트니는 혁신적인 친환경 소재와패션을 끊임없이 보여주는 패션 브랜드 중에 하나입니다.2013년에 앙고라 토끼의 학대 문제 캠페인에 참여한 이후 스텔라맥카트니는 앙고라, 가죽, 모피 그리고 깃털까지동물과 관련된 소재를 사용하지 않고 있으며 의류 제작에 사용되어지는 접착제 역시 동물성 원료 사용을 지양하고 있습니다.또한 다양한 친환경적인 소재 개발을 통해 재활용 플라스틱을 이용한 원단과 *섀기 디어 패브릭과 나무를 이용한 플랫폼 웨지힐등동물성 원료가 없이도 럭셔리브랜드가 완성되어 질 수있다는 걸 증명했습니다.*섀기 디어 패브릭: 가죽을 대신해 만들어진 스웨이드 느낌의 원단으로 스텔라맥카트니가 개발한 친환경 원단이다.재사용 소재의 새로운 발견, 릴라 고릴라아이들을 위한 가방이나 액세서리를 만드는 네덜란드의 브랜드입니다.그 중 릴라고릴라의 가방들의 경우에는 버려진 플라스틱과 패브릭을 재사용해 만들어져환경과 패션을 동시에 잡은 것으로 알려져 이미 해외에서도 친환경 키즈 패션을선도하고 있는 것으로 알려져있습니다.환경을 위한 끊임없는 사랑, 아시아나런던영국의 핸드메이드 액세서리 브랜드 중 하나인 한국에는 아직 잘 알려져 있지는 않지만 친환경 소재를 이용하는 브랜드입니다.특히 가방의 경우에는 식물섬유인 황마를 이용하였고 패스트 패션으로 인해 일자리를 잃게 될위기에 처한 수공예업자들에게 일자리를 제공하는 등 다양한 공존을 추구하는 브랜드입니다.운동과 환경을 동시에 잡은 아디다스세계적인 스포츠브랜드 중에 하나인 아디다스 또한 다양한 친환경 소재를 개발하고 있습니다.그 중 버려진 해양쓰레기들을 재활용 실을 이용하여 전 세계에 환경에 대한 중요성을 알리고 있습니다.특히 다양한 환경관련 캠페인을 진행하는 것은 물론 이번 SS19제품의 41%가 재활용 폴리에스테르를사용하고 있으며 아디다스는 2024년까지 모든 순수 폴리에스테르를 사용하지 않는 것을목표로 하여 친환경 패션을 선두하고 있는 브랜드입니다.이렇게 댜양한 브랜드들에서 환경을 위해 다양한 방법으로 환경 보존을 실천하고 있는데요.그렇다면 과연 옷을 입는 우리가 할 수 있는 일은 무엇이 있는지 지금 알려드리겠습니다. 2019년 생존을 위해 반드시 환경을 생각하는 必환경시대에 지속가능성이 있는 패션을선호하는 이들이 많아지면서 다양한 브랜드에서도 환경을 위한 끊임없는 시도가 이루어지고 있습니다.이제 저희도 환경을 위한 착한 소비와 가치 소비 함께하는건 어떤가요?여러분의 작은 행동이 큰 행복이 되길 빌며 더 좋은 이야기로 찾아 오겠습니다!#필환경시대 #친환경 #친환경패션 #에코패션 #패션 #지속가능성 #스텔라맥카트니 #릴라고릴라 #아디다스 #아디다스y3 #아시아나런던 #업사이클링 #리사이클링 #린넨
조회수 1147

[인터뷰] Humans of MEME, 그 다섯 번째 주인공을 만나다. - 순간을 행복하게 살아가는 졔졔의 이야기

안녕ㅎr세요 !멋진 미미박서의 이야기를 담아오는 MOTH 입니다 !이번 주에는미미박스 사이트, 상품 페이지나 프로모션 등미미박스를 더욱 아름답게 만들어주시는 디자이너 분을 만나보았어요 !오늘의 주인공 jyejye 를 만나러 가볼까용?Q. 졔졔! 안녕하세요. 졔졔는 그렇다면 전공이 디자인 계열이신가요?A. 아니요. 저는 미생물학과였어요. 제 전공으로 학위를 받고 직업군을 가지게 된다면, 보통 제약회사 아니면 화장품 R&D 에서 제품을 연구하는 일을 하게 되는 전공이에요.( Moth : 와우! 그러면 어떻게 디자인을 하고 계신거에요? )저는 어렸을 때부터 미술에 관심이 많았어요. 교과목 수업 중 미술 시간이 사실 제일 행복했었거든요. 근데 그 당시 스스로 생각해봤을 때, 중학생 때부터 미술을 시작하는 것이 늦었다고 생각했었던 것 같아요. 당시 미술 학원을 다니고 벌써부터 예중∙예고의 과정을 밟고 있는 친구들도 많았구요. 근데 사실 생각해보면 ‘나는 늦었다, 힘들 것 같다, 안될 것 같다’ 이런 것이 다 핑계 같고 또 그만큼 하고 싶은 용기가 없었던 것 같아요. 그런데 어른이 되어서도 디자인 하는 것이 굉장히 즐겁고 재밌다는 것을 점점 스스로 느끼는 것 같았어요. 대학생 때에도 당시 전공 교수님께서도 전공을 살려서 일하라고 하시는데 제가 스스로 생각했을 때 대학교 이후의 제 삶에서도 이렇게 보내게 된다면, 굉장히 후회할 것 같은 거예요. 부모님도 사실 그 방향으로 가시면 좋아하셨거든요. 그랬는데 그 때, 제가 용기를 가졌던 것 같아요. 이과에 가고 대학교에 진학하고, 그런 것이 어떻게 보면 부모님이 원하시는 안정적인 방향의 삶 쪽으로 간 것이었는데, 제가 결국에도 직업을 그렇게 선택한다면 정말 후회할 것 같았고 제 삶이 즐겁지 않을 것 같았어요. 그래서 결국 졸업 한 후, 약 1~2년정도 무작정 배워야겠다는 결심으로 웹디자인 학원도 다니면서 이것 저것 만들어보며 다시 새롭게 디자인을 시작했어요.    Q. 정말 용기 있는 선택이셨네요. 다시 새로운 길을 가기 정말 어렵잖아요. 지금은 어떠세요, 용기 낸 선택에 만족하시나요?A. 네. 사실 제 대학교 생활만 봐도, 이미 디자인으로 마음이 기울어져 있었을지도 몰라요. 대학생 때 발표하며 PPT를 만들잖아요. 저는 내용도 내용이지만, 그것을 더 잘 보이고 집중되게 만들고 싶었어요. 발표 시간에 대부분 딴짓을 하는 경우도 많지만 집중을 하게 만드는 요소로 비주얼적인 것이 크잖아요. 그렇게 이 발표를 집중하게 만들고 싶었어요. PPT의 내용도 내용이지만, 어떻게 구성하고 내용을 풀어나가는 것이 중요한 것을 느껴서 그 당시에도 디자인 측면에서 많이 집중했었어요. 주변 사람들도 제가 평소에 디자인하는 것을 좋아하는 것을 아셔서 학회활동에서도 과티를 만드는 것도 저에게 맡겨서 디자인 해보라고도 하시는 등요.학교생활만 돌아봐도 항상 제 일상엔 그런 것이 많이 있었던 것 같아요. 그래서 결국에는 평소에도 제가 좋아하는 것들을 항상 느끼고 있었기 때문에, 졸업 후에도 직업을 선택할 수 있는 지표가 되어줬던 것 같아요. Q. 그렇다면 어떻게 미미박스에 오시게 되셨어요?A. 사실 미미박스에 가장 끌렸던 것이 기업문화였어요. 저는 다른 무엇보다도 제가 일할 수 있는 환경이 중요하다고 생각해요. 좋지 않은 환경에서 제가 제 일만 하여 높은 보수를 받는 것이 아니라, 지금 이 순간을 즐겁고 행복하게 보내는 것이 결국에는 나중에도 행복할 수 있는 것 같아요. 그래서 순간 순간을 즐겁게 일할 수 있게 만드는 기업문화가 제일 매력있게 느껴졌던 것 같아요. 그렇게 미미박스에 들어오게 되었고, 자연스레 화장품에도 관심이 생겼어요. 기업문화 때문에 회사에 들어왔는데 화장품에도 관심이 생겼고, 화장품에 관심이 생기다보니 이 화장품을 더 잘 보이게 하는 콘텐츠를 만들어야겠다는 열정으로 자연스럽게 이어졌네요(웃음).  저는 제가 걸어왔던 발자취와 경험들을 중요하게 생각해요. 결국 지금을 기준으로 했을 때는 모든 것이 다 경험이잖아요. 나중에 어떻게 쓰이는지 모르는 거더라고요. 힘들 때도 정말 많았어요. 버티고 버티면서, 그렇게 버텼던 순간들이 나중에는 도움이 많이 되더라구요. 그 시간들이 우리가 인지하지 못한 채로 잘 흘러가잖아요. 그 흘러가는 순간에도 최선을 다하면, 그게 허투루 쓰이는 경우는 없는 것 같아요. 대학교 4년 동안 배웠던 전공을 직업으로 선택한 것도 아니니 그 시간도, 등록금도 아깝다고 생각했어요. 그런데 제가 배우고 경험했던 순간들이 항상은 아니더라도 생각보다 디자인을 할 때도 응용할 수 있는 부분이 생기며 ‘내가 한 모든 경험들이 다 쓸모 없는 것은 아니구나’라는 생각이 들더라구요. 예를 들면, 연예인 이성경씨도 피아노를 전공했지만 모델이 됬는데, 모델 일을 하기도 연기도 하면서 기회가 생겨서 피아노를 연주하기도 하더라고요. 그런 것처럼 지금 하고 있는 일이 옳다, 그르다 라고 판단하기 보다 그저 긍정적으로 받아들이면 좋을 것 같아요. 언제 어떤 순간들이 일어날지 모르니까요.저는 부끄럼도 많고 두려움도 많으면서도 도전정신도 있거든요. 상반적인 것을 같이 가지고 있고 해보고 싶은 것도 많아요. 이것 저것 해보고싶고.. 등 그런 것들이 결국 모여서 제가 되기도 하니깐요(웃음).그래서 제가 아직도 쓰는 슬로건이 manymuch 이에요. 뭐든지 많이 경험해보는 것이 중요한 것 같아요.저는 강박관념을 가지고 주말에 나가는 경우도 꽤 있어요. 정말 피곤해서 쉬고 싶은데 ‘그래 쉬자’ 라고 생각하면 또 몸이 근지러운 성향이기도 하고요. 피곤해도 나갔다 오면 ‘역시 나오길 잘했네.’ 라는 생각이 들어서 가능하면 주말에 새로운 곳에 많이 가보려고 해요. 전시가 있으면 보러가고 새로운 공간에 계속 찾아가보는 것도 디자이너한테는 감각을 키울 수 있어요. 제가 생각하기에 디자인은 아무것도 없는 것에서 완전한 창조가 일어날 수는 없다고 생각해요. 이것 저것 많이 보면서 응용하고 다양하게 생각할 수 있는 스펙트럼이 넓어지는 것 같아요. 사람들이 어떠한 분위기를 원하는지, 요즘 트렌디한게 무엇이며 제가 디자인을 하고 싶은 욕심이 있으니깐 더 찾아보려고 하는 것 같아요.Q.  졔제는 어떤 목표가 있으신가요?A. 졔졔가 바꾼 한정특가 이벤트 가이드 변경기본적인 한정특가 이벤트 가이드가 있어요. 한정특가 작업물을 만들어야 할 때, 그 이벤트가 디자인적으로 고객이 느낄 수 있을만큼 후킹하게 느껴져야 하잖아요. 그래서 이벤트 가이드 자체를 바꾸었어요. 누군가 저한테 시켜서가 아니라 이렇게 디자인을 하면 고객들의 눈에 확 들어오지 않을까? 라는 생각으로 기본 가이드 룰에 어긋나지 않으면서 좀 더 눈에 띄게 바꾸었어요. 그렇게 제가 만든 것이 또 자연스레 가이드가 되었어요. MD분들도 제가 만든 방식으로 제작을 해달라고 요청해주신다던지, 그런 것이 가장 많이 뿌듯했던 것 같아요. 기존의 것을 개선하는 것도 일의 일부며 딱 주어진 일만은 하고 싶지는 않아요. 앞으로도 좀 더 고객의 눈을 사로잡을 수 있게 개선하고 싶은 마음이 커요.어느 정도 퍼포먼스를 내고 있지만 완전히 퍼포먼스를 냈다고 생각은 안해요. 제가 하는 업무에서 스스로 만족할 때까지 그리고 사람들이 어느 정도 인정할 수 있을 정도의 퍼포먼스를 내고 싶고, 그게 또 제 목표에요. 앞으로 우린 어디에 있던 간에 계속 나아갈 사람이잖아요(웃음).졔졔와 이야기를 나누며저는 개인적으로는 삶의 방향과업무를 하는 마음가짐 등 배울 수 있었던 것 같아요 !사실 이번 주의 이야기는 인터뷰라기보다 졔제가 저의 고민도 많이 들어주시고격려도 많이 해주시며 이야기 하면서 정말 시간 가는 줄 몰랐답니다..맛있는 코~퓌~도 사주신 졔졔 흑흑흐그흑 ㅠㅠㅠㅠ항상 쉬운 것에 안주하지 않고더 나은 것을 만들어내기 위해 노력하시는 졔졔이런 멋진 미미박서분이 계셔서미미박스가 더욱! 멋진 회사로 성장할 것 같아요 !다음에는 더욱 알찬 이야기로 찾아오도록 하겠습니다 :  )그럼 이 10000 안녕히계세요!
조회수 1668

스푼 라디오 콘텐츠 디자이너 Henie를 만나보세요!

타인 기준의 삶이 아닌, 제 기준의 삶을 살기 시작했어요.사내 인터뷰를 진행하면서, 본인 스스로의 취향, 선호도를 이만큼 확고하게 아는 사람은 아마 'Henie'뿐이라고 생각했다. 어떠한 질문도 한치의 망설임 없이 대답하던 해니에게 물었다.Q. "해니는 대체 어떻게 그렇게 스스로를 잘 알아요?"해니의 노트"예전엔 주로 타인의 취향과 성향에 맞춰서 살았던 것 같아요. 그래서 제가 무엇을 좋아하는지 어떤 사람인지 저만의 기호를 모르고 살고 있더라고요. 그리고 1년 전부터 노트에 모든 걸 적기 시작했어요. 제가 좋아하는 색깔, 좋아하는 성향의 사람들, 영화 등 모든 것을 쭉쭉 적어가면서 스스로를 알려고 노력하게 되었어요. 그러다 보니 사소한 거 하나까지 제가 무엇을 좋아하는지, 싫어하는지를 알게 되더라고요! 남에게 맞추고 의지하는 생활을 버리고 제 스스로가 좋아하는 것들을 스스로에게 해주려고 하다 보니 가장 저 다운 모습이 되었어요."(개인적으로 정말 좋은 습관이자 배울 점이라고 생각합니다! 멋있어요)헤니 아니고 해니!"헤니라고 하면 너무 연예인 다니엘 헤니 같잖아요. 그리고 해니가 훨씬 더 예뻐요. 그리고 혜니는 너무 본명 하고 비슷해서요 해니가 좋아요 저는! 호주 워킹홀리데이에 갔을 때 지은 이름이에요. 원래 Henney라고 이름을 지으려고 했는데 뜻이 아기 암탉이라고 하더라고요. 그래서 Henny 대신 Henie가 되었어요. 앞으로 '헤니' 말고 'ㅎH니'라고 불러주셔야 해요 알았죠?"점심시간 자고 있는 Neil(대표)과 셀카 찍는 해니와 체리 씨*Neil과 Cherish의 동의하에 올리는 사진입니다.듣고 싶은 당신의 스푼 라이프최연소 감독에서 콘텐츠 디자이너로"저는 원래 방송국 출신이에요. 4년 반 정도 방송국에서 일을 했었어요. 저는 초등학교 5학년 때부터 피디가 꿈이었어요. 그때부터 그냥 영상이 좋았거든요. 좋아하는 언니들이 영화 동아리 멤버여서 따라다니면서 프리미어를 배우기 시작했어요. 초등학교 5학년 때 청소년 영화제 최연소 수상을 하기도 했었고요. 중고등학교 내 내도 방송부 소속이었어요. 커서 피디가 될 줄 알았는데,  막상 앞에 다가가니 너무 문 턱이 너무 높다고 느꼈어요. 그래서 독립 기술을 배워서 편집 전문가가 되기로 마음먹고, 대학교 때 CG아르바이트를 시작으로 SBS 궁금한 이야기Y에 데뷔를 했어요. 24살 땐 KBS 최연소 CG 감독이 되어보기도 했고요. 방송국 편집일이 너무 재미있고 행복했지만, 뭔가 모를 붕 떠있는 기분이랄까요? 안정감과 소속감을 느끼고 싶단 생각을 많이 하게 되었던 것 같아요. 그때 선배들이 제게 취업을 제안해주시더라고요. 어딘가에 속해 보는 것도 굉장히 좋은 경험이라고 해주셔서 취업을 준비하게 되었고 그때 스푼이 콘텐츠 디자이너를 모집 중이라는 것을 알게 되었어요. 원래 스푼 라디오를 잘 알고 있었고 공고에 복지 및 회사에 대한 설명을 읽어보고 마이쿤(스푼 라디오)에 호감을 가지게 되어 지원을 하게 되었어요. 그리고 현재는 무한 소속감을 느끼며 스푼 라디오 한국 마케팅팀에서 콘텐츠 디자이너로서 스푼 라디오 광고를 제작하는 업무를 맡고 있습니다!"스푼에서 일하는 거 어때요?"저의 첫 회사생활, 너~무 좋아요! 제가 상상했던 그대로예요 이곳은. 아니 어쩌면 상상 이상 인 곳인 것 같아요.  저의 작업 스타일을 많이 존중해주시고, 제가 생각했던 '회사'라는 곳보다 훨씬 유연한 것 같아요. 그래서 일하러 오는 게 행복해요. 처음엔 영어 호칭에 대해서 별 다른 생각을 해본 적이 없는데, 막상 사용해보니까 이게 정말 좋더라고요. C-level분들과 말을 더 편하게 할 수 있는 것 같아요. 만약 대표님, 이사님, 부대표님 이런 식으로 호칭을 불러야 한다면 이만큼 편하게 커뮤니케이션하기 쉽진 않았을 것 같아요. 저는 스푼에 대한 애정, 스푼 사람들과 하고 싶은 것들이 많아요. 수평적인 문화뿐만 아니라, 디자이너를 존중해주시는 작업 분위기 때문인 것 같아요.그리고 저는 사내 브런치가 제겐 너무 도움이 되었어요. 브런치를 읽게 되면서 다른 부서 구성원분들에게 더 편하게 다가갈 수 있게 되었어요. 무슨 업무를 하시는지 알 수 있고, 관심사는 무엇인지 교류가 쉬워졌거든요. 특히 저는 Hugh의 대해서 되게 궁금했는데, 브런치를 읽고 어떤 사람인지 미리 알게 되었고 인터뷰가 정말 인상 깊었어요! 그 후 휴와 대화하는 데도 정말 편해졌어요. 마이쿤에는 정말 다양하고 멋진 사람들이 많다는 걸 글로 알게 되었어요"우리와 함께 일해요저는 한국 마케팅팀 분위기가 정말 좋아요.현재 분위기에 자연스럽게 잘 스며들 수 있는 사람과 함께 일하고 싶어요.첫째도 소통, 두 번째도 소통! 소통이 잘 되는 사람이요!해니를 잘 표현하는 야구장과 향수알고 싶은 Henie의 이야기야구 덕후! 향수 덕후 해니"맞아요. 저는 스포츠 중에 야구를 제일 좋아하고 NC Dinos 덕후예요! 그래서 직관은 최대한 많이 가려고 해요. 근데 시즌의 반이 여름이다 보니까 봄, 가을에만 직관을 가는 편이에요. 제가 더위를 조금 많이 타서 여름엔 휴대폰으로 본답니다! 야구 덕후가 된 이유요? 재미있잖아요! 보고 있으면 엔도르핀이 돌아요. 사람들과 다 같이 함께 소리를 지르고 응원하는 그 순간이 너무 좋아요. 그 쫀~쫀한 긴장감 있잖아요!제가 NC 팬인 이유는, 제가 마산 사람이거든요. NC Dinos 연고지가 마산이랍니다! 그래서 그때부터 좋아하게 된 것 같아요. 한참 야구에 빠졌을 땐 친구들도 만나지 않고 야구를 보러 갔던 것 같아요. 제 삶의 낙이에요 야구는!그리고, 저는 향수를 굉장히 좋아하는데요. 특히 조 말론 향수를 좋아해서 집 진열장에 쫙 나열되어 있어요. 제가 후각이 되게 발달되어 있어서 사람을 향으로 기억할 정도로 향을 좋아해요. 기분이 좋지 않은 날엔 향수를 뿌리고 잘 정도로 향을 좋아하다 보니 향수 수집가가 되었어요"나를 표현하는 한마디 스펀지 - "어디서든지 잘 적응하고 밝은 저를 나타내는 단어인 것 같아요. 중학교 1학년 때 담임 선생님이 저의 롤링페이퍼에 적어주신 별명인데 아직도 기억이 나고, 마음에 드는 단어예요"해니의 끼와 텐션의 비밀"저의 끼는 아마 부모님으로부터 물려받은 것이 아닐까 싶어요. 엄마 아빠가 두 분 다 실용음악을 하셨던 밴드 출신이세요. 엄마는 기타리스트이자 보컬이셨고, 아빠는 키보드 담당이셨어요. 집안 자체가 흥이 많다 보니 가족들끼리 명절에 노래방을 가면 3시간 내내 춤추고 노래를 부를 정도로 텐션이 높아요. 저는 아마 방송국에서 감독생활 아니었으면 음악 쪽으로 진로를 선택하지 않았을까 싶어요. 제18번이요? 사실 매번 바뀌긴 하지만, 어디 가서 든 잘 부를 수 있는 노래들이 있어요. '1. 박기영 - 나비 2. 박효신 - 그곳에서 서서'이 두곡은 언제 어디서나 불러도 잘 부를 수 있어요. 저는 일하다가도 꽂히는 노래가 생기면 점심시간이나 퇴근 후에 꼭 코노(코인 노래방)에 가야 해요. 스푼 멤버들 중 코노 좋아하시는 분들 많은데 같이 가면 좋겠어요 (스푼 라디오 내, 발라드파들 모이세요)그리고, 저의 높은 텐션은 사실 제가 스스로 만들어내는 것이기도 해요. 사실 보기보다 저는 덜 가벼운 사람이거든요. 사람을 너무 좋아해서 생각도 많고, 걱정도 많은 사람이에요. 기분 나쁜 일이 있어도 회사 올 때는 그런 모습을 보이고 싶지 않아서 고민과 걱정을 집에 놓고 출근을 하는 편이에요. 그리고 퇴근 후 한강을 걸으면서 잡생각을 버리려고 노력하기도 하고요."Henie는,1. '오이를 싫어하는 모임'에 가입되어 있을 정도로 오이를 싫어합니다.(오이, 토마토, 수박, 참외, 멜론을 못 먹는데요!)2. 찜닭, 들깨칼국수, 일식을 사랑합니다3. 스푼 라디오가 들으면 누구나 아는 서비스, 마이쿤이 누구나 입사하고 싶은 회사가 되었으면 합니다.4. 새로 입사하신 Ethan의 이야기가 궁금하다고 합니다. (조만간 인터뷰 요청드려야 할 것 같아요)팀원들이 Henie를 한마디로 표현한다면?Jay 曰: 김삿갓 - "그녀의 자유로운 영혼과 예술 감각 때문"Ted 曰: 보석 - "반짝반짝 빛이 나는 강한 존재감, 분위기 또한 반짝임"Sunny 曰: 거울 - "나와 비슷한 점이 많은 친구라서 보면 정감 가면서 동시에 걱정(?)도 되는 많은 것들이 고마운 친구"Summer 曰:  PO붙임성 WER -"붙임성의 끝판왕!"Chloe 曰: 수원 갈비 통닭 - "지금까지 이런 캐릭터는 없었다. 아이인가 어른인가! 마케팅 팀의 독보적인 캐릭터! 어린아이 같은 해맑음과 때론 진지한 두 가지 매력을 가졌다!"William 曰: 미뇽 - "미뇽처럼 귀여운 외모와 부드러운 성격의 소유자, 닐까지 녹이는 능력을 지닌 포켓몬"Cherish 曰: 도라에몽 - "처음 봤을 때 주먹이 동그랗고, 하얀 사람이었다. 도라에몽 주머니에서 뭐 나오듯이 자꾸 가방에서 뭘 꺼내서 준다."Ceci 曰: 비타민 - "밝고 상큼한 그녀의 목소리가 들리면 자동으로 기분이 좋아진다"
조회수 7395

Adobe XD로 페이퍼 UI 디자인하기

Adobe XD(이하, XD)는 Sketch, Balsamiq 등의 프로토타이핑/와이어프레임 툴에 대항하기 위해, Comet이라는 프로젝트 이름으로 시작된 Adobe의 프로토타이핑 툴입니다.그동안 그래픽 디자인 툴에서 Adobe의 영향력은 절대적이었습니다. 하지만 UI 디자인에 특화된 툴들이 등장하기 시작하면서 Adobe의 입지는 좁아졌고, 이런 상황을 극복하기 위해 출시된 툴이 바로 XD입니다. 저는 페이퍼 UI 작업을 하면서 8개월 동안 XD를 사용해왔습니다. XD를 실무에서 사용하며 느낀 점과 어떤 기능을 사용해 UI 디자인을 진행했는지 이야기해 보려고 합니다.XD를 도입하게 된 배경현재 UI 디자인 영역에서 가장 높은 점유율을 보이는 툴은 스케치일 것입니다. 빠르고, 편리하며, 다양한 익스텐션으로 UI 디자인에 최적화된 모습을 보여주고 있습니다. 이렇게 많이 사용되고 있는 스케치에 비하면 출시 된 지 얼마 되지 않은 XD는 아직 부족한 점이 많습니다. 그런데도 불구하고 현재 XD를 이용해 페이퍼 UI 디자인하는 것에 대해 만족하고 있는데요, 그 이유는 다음과 같습니다.UI 디자인에 제약이 많은 PAPER리디북스에서 판매하고 있는 PAPER와 PAPER Lite(이하 페이퍼)는 2015년 10월에 출시한 리디북스 전용 전자책 단말기입니다. 일반적인 LCD와 달리 EPD(Electrophoretic Display)를 사용한 제품입니다.EPD 패널은흑백만 표현 가능하다는 점흑백도 (실질적으로) 16단계만 표현할 수 있다는 점반응 속도가 느리다는 점특징이 있습니다. 이러한 특징 때문에 일반적인 모바일 디바이스와는 다른 방향으로 UI를 디자인해야 합니다.빠르게 작업하고, 쉽게 공유할 수 있는 XD하지만, 그러한 제약 덕분에 XD를 사용해보는데 더 좋은 환경이 되었습니다. 디테일한 패스 제작이 불가능한 점이나 UI 요소에 필요한 스타일을 완전히 표현할 수 없다는 XD의 단점은 페이퍼 UI 디자인을 하는 데 큰 문제가 되지 않았습니다. 오히려 빠르게 프로토타입을 진행하고 바로 공유할 수 있는 점이 다양한 팀과 함께 진행해야만 하는 페이퍼 UI 디자인에 큰 장점으로 다가왔습니다.XD의 강점올해 초부터 지금까지 XD를 통해 페이퍼 UI 작업을 진행했고, 기능이 부족했음에도 계속 사용해온 이유는 크게 세 가지였습니다.1. 기존 Adobe 툴 사용자에게 익숙한 UIXD를 사용하기 시작하면서 처음 느낀 장점은 기존 Adobe 툴과 UI가 비슷해 적응하기 쉽다는 점이었습니다. 이는 새로운 툴임에도 불구하고 사용성의 진입 장벽을 낮춰주는 역할을 합니다. 스케치를 처음 시작했을 때 느꼈던 낯선 작업 환경과 적응하는데 걸렸던 시간을 생각한다면 오랫동안 써왔던 툴과 비슷한 경험을 제공하는 XD의 장점이 드러납니다. 스케치 또한 적응하면 능수능란하게 사용할 수 있겠지만 당장 입문자에게 편리한 쪽은 XD라 생각합니다.2. 빠른 플로우 제작 시간/과정다른 툴들과 다르게 XD는 디자인 화면과 프로토타입 화면을 유연하게 왔다 갔다 할 수 있습니다. ‘디자인’ 탭에서 각 화면 디자인을 끝낸 후 바로 ‘프로토타입’ 탭으로 전환해 플로우를 구성할 수 있습니다. 프로토타입을 제작하는 방법도 UI 요소와 각 화면 사이를 노드로 연결하는 방식이라 쉽고 빠르게 플로우를 검증할 수 있습니다. 일반적인 LCD 기반 기계와 달리 페이퍼는 디스플레이의 한계가 많아서 UI 테스트가 많이 필요합니다. 이럴 때, 유용합니다.3. 쉬운 공유 기능이렇게 만들어진 플로우를 다른 팀과 손쉽게 공유할 수 있다는 것도 큰 장점입니다. 프로토타입을 제작하고 버튼 몇 번만 눌러주면 Adobe 서버에 업로드되고 공유 링크가 만들어지는데 이 링크를 전달해 다른 팀의 의견을 받을 수 있습니다.XD를 이용해 페이퍼 UI 디자인해보기그럼, 실무에서 어떻게 XD를 사용하고 있는지 간단히 소개해보려고 합니다. 보여드릴 예시는 암호를 입력해 구매목록에 접근하는 기능입니다.디자인 : 기본 UI 디자인벡터/텍스트 툴을 이용 기본 UI 디자인기본 UI 요소들은 XD에서 충분히 표현할 수 있으므로 버튼, 토글스위치, 프로그레스 바, 텍스트 등의 UI 요소는 XD에서 바로 작업합니다. EPD의 특성상 컬러를 다양하게 사용할 수 없으므로 검은색(#000000), 회색(#333333, #666666, #999999), 흰색(#FFFFFF)만 컬러 셋에 등록해두고 사용합니다. XD에서 작업하기 힘든 복잡한 모양의 아이콘은 일러스트레이터에서 작업한 후 패스를 복사해 붙여넣기 합니다.디자인 : 반복 그리드XD에서 호평을 받는 그리드 기능을 이용해 책 목록을 만들어 보겠습니다. 리디북스 서점이나 뷰어에서 가장 많이 보이는 레이아웃이 ‘책 목록’인데 이러한 그리드 구조를 XD에서는 손쉽게 만들 수 있습니다. 책 커버 이미지, 제목, 저자 등 개별 항목을 선택한 후 ‘반복 그리드’를 적용해줍니다. 그리고 그리드 전체 크기와 각 항목 사이의 간격을 드래그로 조절해주면 책 목록을 쉽게 만들어낼 수 있습니다. 스케치에서는 Craft 같은 플러그인을 이용해야 하는 기능이지만 XD에서는 별도의 플러그인 없이 구현할 수 있습니다.디자인 : 프로토타이핑각 화면이 완성되었다면 프로토타이핑을 진행합니다. 이번 예시에서는 ‘내 서재에서 구매목록 탭’ → ‘암호 확인’ → ‘구매목록’으로 이동하는 프로세스를 구현합니다. XD의 프로토타입 탭으로 이동한 후 ‘구매목록’ 텍스트를 선택하고 노드를 ‘암호 입력’ 페이지로 연결해줍니다. ‘암호 입력’ 페이지에서는 아트보드 전체를 ‘구매목록’ 아트보드로 연결합니다.온라인 공유프로토타입 확인을 위한 공유 링크 만들기프로토타입을 완료했다면 오른쪽 위의 ‘미리 보기’ 버튼을 눌러 이상이 없는지 확인해보고, 타 팀에 공유할 링크를 만듭니다. 오른쪽 위의 ‘온라인 공유’를 클릭하면 제목, 섬네일 이미지를 지정할 수 있고 링크 업데이트나 새 링크를 눌러 웹에서 확인할 수 있는 링크를 복사할 수 있습니다. 이제 이 링크를 타 팀에 전달하고 피드백을 받으면 디자인 과정이 완료됩니다.XD에 바라는 기능제가 담당하고 있는 페이퍼 UI 디자인을 할 때는 XD의 불편함이 그리 크지 않습니다. 페이퍼 UI 특성상 세밀한 디자인이 필요하다기보다 전체 흐름을 점검하며 사용자 경험의 단계를 줄이는 것이 더 유용한 경우가 많기 때문입니다. 하지만 이러한 상황에서도 XD에 아쉬운 점이 있는데 몇 가지 부족한 점을 꼽아보겠습니다.1. Photoshop/Illustrator 파일 호환Adobe에서 출시한 툴답게 단축키와 인터페이스가 포토샵/일러스트레이터를 많이 닮아있습니다. 하지만 파일 호환성은 만족스럽지 않은데요, 일러스트레이터 파일이나 포토샵 파일을 불러오는 것이 불가능합니다. 가져올 수 있는 파일은 SVG와 JPG, PNG 등의 비트맵 이미지뿐입니다. 저는 따로 파일을 가져오지 않고 일러스트레이터에서 패스를 복사 → XD에 붙여넣는 방식으로 작업하고 있습니다. 포토샵 파일은 어렵더라도 일러스트레이터 파일은 손쉽게 들고 올 수 있으면 좋겠습니다.2. 가이드 추출 및 공유스케치는 Zeplin, Sketch-measure 같은 훌륭한 가이드 익스텐션이 존재합니다. 각 오브젝트의 위치와 크기, 코멘트를 공유할 수 있는 툴인데요, 아쉽게도 XD에서는 가이드를 생성하고, 전달하기가 마땅치 않습니다. 별도로 이미지를 제작하거나 문서로 전달해야 한다는 게 아쉽네요.3. 레이어XD에는 레이어 패널이 없습니다. 일러스트레이터처럼 ‘앞으로 가져오기/뒤로 보내기’ 등의 높낮이 개념은 존재하지만, 포토샵에서 볼 수 있는 레이어 패널은 없습니다. 그래서 오브젝트를 레이어 별로 정리하거나 조절할 방법이 없는데요, 차후 지원되면 좋겠습니다.4. 심볼스케치에는 UI 요소나 반복적으로 사용할 요소를 만들어두고 재사용할 수 있는 심볼 기능이 있습니다. 포토샵의 스마트 오브젝트와 비슷한 개념인데요, 대표 심볼을 수정하면 모든 심볼에 반영이 되어 편리하게 사용할 수 있다는 점이 좋은데, 아직 XD에는 이런 심볼 기능이 없습니다. 그래서 거의 비슷한 요소들을 복사 → 붙여넣기 해야 한다는 단점이 있습니다. 반드시 추가되면 좋겠습니다.5. 컬러 관리마지막으로 컬러를 관리할 수 있는 기능이 없습니다. 포토샵에서는 Swatch를 통해 컬러 세트를 관리할 수 있는데 XD에서는 자주 사용하는 컬러를 등록할 수는 있어도 별도의 파일로 추출 → 공유하는 것이 불가능합니다. 특히, 리디북스에서는 RSG(Ridibooks Style Guide)를 통해 컬러를 일관되게 사용하고 있는데요, XD에서는 이러한 컬러 세트를 사용할 수 없어 아쉽습니다. 미리 컬러를 등록해둔 XD 파일을 이용해 작업을 시작하고 있지만 좀 더 세심한 컬러 관리 기능이 도입되면 좋겠습니다.다음 업데이트가 기대되는 툴그동안 디자이너에게 포토샵과 일러스트레이터의 위상은 높았습니다. 하지만, 어느 순간부터 UI 디자인의 무대가 웹에서 모바일로 이동하고, 모바일 UI 디자인이 필요로 하는 다양한 기능들을 가지고 있는 툴에게 자리를 내주게 되었습니다. 하지만, Adobe도 가만있지 않고 기존의 툴에서 부족한 점이 무엇인지 정확히 파악하고, 그 부분을 쉽게 사용할 수 있는 XD를 출시하게 된 것이죠.디자이너의 입장에서는 아직 아쉬움이 많지만 간단하게 만들 수 있는 그리드, 빠르게 진행할 수 있는 프로토타이핑, 그리고 만든 프로토타입을 쉽게 공유할 수 있는 기능 등 XD만의 특별한 부분도 많아 계속 XD를 통해 작업해볼 생각입니다. 또, 정식 버전으로 출시된 후 한, 두 달에 한 번씩 업데이트되고 있는데요, 업데이트 내용을 보면 XD가 어떠한 방향으로 나아가야 할지 Adobe가 잘 알고 있음을 느낄 수 있었습니다. 앞으로도 발전할 XD를 기다리며 글을 마칩니다.맥 사용자이고 Adobe에 회원 가입이 되어있다면 무료로 XD를 사용할 수 있습니다.http://www.adobe.com/kr/products/experience-design.html#리디북스 #디자인 #디자이너 #Adobe #XD #AdobeXD #꿀팁 #디자인꿀팁 #UI #페이퍼UI #반복그리드 #프로토타이핑 #공유기능
조회수 847

사실 일은 말로 하는 게 아니니까

-오늘의 글은 매우 짧습니다.-사실 제 책은 보시다시피 커뮤니케이션에 대한 얘기입니다. 서로의 입장이 다르고 표현법이 달라서 발생하는 불필요한 힘빼기를 최소화시키자는 거죠. 다만 이런 얘기를 하기전엔 먼저 전제되어야 할 부분이 있습니다. 일단 양쪽 모두 업무의 인성과 기본기는 모두 충족이 되어있어야 하죠. 기본기란 이런거예요.-  디자이너는 상대방이 원하는 디자인을 만들어주기 위해 최선을 다해야하고 그만한 실력이 있어야 합니다. -  클라이언트는 디자이너의 작업을 위해 가능한 부분을 도와주어야 하고 업무에 필요한 자원들이 갖춰져 있어야 합니다. 예를 들어 스크립트가 필요하면 스크립트를 제작해서 줘야하는 거예요.기본이 안되어 있는데 커뮤니케이션만 잘하면 어떻게 될까요. 네 맞아요. 이빨까는거죠 그건. 커뮤니케이션은 감언이설로 상대방을 농락하는 방법이 아니예요. 잔머리나 트릭도 아니죠. 일단 질러놓고 보는 것도 아닙니다. 실체가 아직 없는 것에 대해 무작정 장담하는 건 사기예요. 말발로 없는 실력을 포장해보거나, 상대방의 심리를 교묘히 혼란스럽게 만들어서 얼렁뚱땅 넘어가는 건 보기 좋지 않아요.(많이 순화)  반면에 커뮤니케이션을 1도 못해도 일을 진짜 기똥차게 잘하시는 분도 있습니다. 딱히 말주변이 없어서 그렇지 눈치도 빠르고, 손도 빠르고, 인사이트도 있는 굉장한 분들이 꽤나 많습니다. 오히려 이런 분들과 일하는 게 훨씬 편하고 즐거울 때가 있어요.  솔직히 말이 너무 많거나 내 맘에 드는 표현을 하기 위해 노력하는 게 너무 눈에 보이면 좀 피곤하더라구요. '그냥 됬고 말씀드린 시안이나 제 때 주시면 돼요....' 라고 말하고 싶을 때가 있기도 합니다. 여러 커뮤니케이션 관련 콘텐츠에서 마치 커뮤니케이션이 기본중에 기본인 것처럼 많이들 얘기하던데.. 제 생각은 좀 다릅니다. 커뮤니케이션 스킬은 그냥 플러스알파일 뿐이예요. 좀 더 잘하기 위해 필요한 옵션이랄까요. 게다가 모든 사람들이 죄다 커뮤니케이션을 잘할 수도 없구요. 각자 다양한 자신만의 방법으로 커뮤니케이션을 하기 마련인데 굳이 이걸 꼭 입으로 통일 시킬 필요도 없다고 생각해요. 진짜 기본은 일단 본인의 일에 대한 실력과 책임감입니다. 
조회수 637

소비자 마음을 읽는 광고 디자이너, 정은송

   소비자 마음을 읽는 광고 디자이너, 정은송 믹픽인사이드는 믹스앤픽스와 함께 성장하고 있는 구성원들의 이야기를 들어보는 시리즈입니다. 다양한 분야의 사람들이 모인 만큼 풍부한 이야기가 완성되었는데요. 각각의 개성들이 꿈을 향해 달려온 시간, 믹픽과 함께 나아갈 시간에 대해 나누며 우리가 하고 싶은 일로 꾸려나가는 회사를 그려봅니다.          Q1. 간단한 자기소개 부탁드립니다.  안녕하세요. 시각디자인 전공 광고 디자이너 정은송입니다. 특히 SNS 광고에 관심이 있어요.    Q2. 디자이너가 되기까지의 과정이 궁금해요. 입시 미술을 준비하다가 20살 때부터 프리랜서로 일을 했어요. 웹툰, 편집회사, 쇼핑몰 등 다양한 분야에서 경험을 쌓을 수 있었죠.    Q3. 다양한 분야를 접해본 것이 디자이너로서 값진 경험일 것 같아요. 콘텐츠를 제작할 때는 대세 흐름이나 최신 트랜드를 파악해야 해요. 그래서 다양한 디자인을 보고 경험한 게 디자인 기초를 다지는 데 많은 도움이 되었어요.    Q4. 회사에서 하고 계신 일을 구체적으로 말씀해주세요. SNS콘텐츠를 디자인하고 있어요. 또 이번에 새로 런칭할 쇼핑몰 홈페이지도 기획하고 있고요.    Q5. 디자인 작업을 할 때 어떤 걸 중요하게 생각하나요? SNS에 게시되는 콘텐츠의 경우, 디자인적 요소가 과다하면 너무 광고 같아 보여서 오히려 사람들이 거부감을 느낄 수 있어요. 그래서 되도록 깔끔한 디자인으로 신뢰를 주려고 해요.    Q6. 디자인 작업에 있어 어려운 점이 있을까요? 한 콘텐츠를 만들더라도 퀄리티를 높이기 위해서는 여러 소스 자료가 필요해요. 그래서 평소에 레퍼런스를 보고 자료들을 모아 놓죠. 또한, 디자이너 커뮤니티에서 정보를 공유하는 등 역량을 쌓기 위해 노력하고 있어요.    Q7. 어떤 디자이너가 되고 싶으신가요? 기획안을 받았을 때 머릿속에서 관련 이미지가 떠오르는 숙련된 디자이너가 되고 싶어요. 더불어 이 일을 즐기면서요.    Q8. 앞으로의 목표를 말씀해주세요. 소비자 반응을 끌어 낼 디자인적 요소를 연구하고 적용해가면서 성과 좋은 SNS 콘텐츠 디자이너로 자리매김하고 싶어요.

기업문화 엿볼 때, 더팀스

로그인

/