스토리 홈

인터뷰

피드

뉴스

조회수 2040

다함께 써봐요 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에서도 확인하실 수 있습니다.이상 제가 알게 된 구글 웹디자이너 프로그램 기능에 관한 글이었습니다 ^^ 정말 필요한 기능들만 모아 간결하게 만들었네요. 복잡하게 여러 메뉴를 거치지 않고 바로 보이는 것들로 기능을 실행할 수 있는 점이 그렇게 느끼게 하지 않았나 싶습니다. 기존 디자인 툴과 크게 다르지 않은 배치와 생김새가 프로그램에 빠르게 익숙해지는 데 일조했습니다. 하지만 사용한 기능 중 가장 아쉬웠던 부분은 타임라인 조작인데요, 타임라인 선택복사가 되고 복수선택이 되어 전체복사가 되면 좀 더 편리하고 참 좋지 않았을까 싶네요.처음 접하시는 분들께 도움이 되었으면 좋겠습니다. 혹시 기능 설명에 잘못된 부분이 있다면 알려주세요. ^^ 미흡한 글 읽어주셔서 감사합니다. ^^참고위키 백과공식 사이트#스포카 #디자인 #디자인팀 #디자이너 #구글 #웹디자이너 #구글웹디자이너 #꿀팁 #스킬스택 #스택소개 #인사이트 #경험공유
조회수 1152

디자이너는 디자인만 하지 않는다.

그래, 로고를 다시 디자인하였다. 그 다음은? 앞서 이야기한 대로 핀다의 새 얼굴을 만들었다. 이제 핀다의 '몸'을 다시 디자인할 차례이다. 경우에 따라 바뀐 로고를 기존 사이트에 그대로 사용하는 경우도 있지만, 이는 바뀐 정도가 아주 미비한 경우에나 가능한 이야기이다. 이런 경우라면 모를까... (출처: 구글) 핀다의 새로운 로고는 기존 로고의 기하학적 요소를 활용하였지만, 외형적인 차이가 크고 로고가 전달하는 이미지도 많은 차이가 난다. 이 경우 기존의 사이트를 활용하는 것은 불가능에 가깝다. 새 로고와 예전사이트를 조합해보았다 - 이상하다껍데기만 바꿀 것인가, 알맹이도 바꿀 것인가?사이트를 개편하는 프로젝트는 새로운 집을 짓는 것이 아닌 기존 집을 리모델링 하는 작업과 비슷하다. 기존의 뼈대 위에 새롭게 바꾼 외장재를 덧붙이는 형식이 많다. 그러나 필요에 따라 쓸모없는 공간을 부수고 다른 공간으로 만드는 것처럼 사이트의 기획도 부분적으로 수정하기도 한다. 물론 기획 수정이 들어가는 경우 더욱 많은 리소스가 필요하므로 전체적인 일정을 고려하여 기획 범위를 정해야 한다. 하고 싶은건 많은데 늘 시간은 부족하다그런데 난 디자이너이지 않나?디자이너가 해야 하는 영역과 기획자가 하는 영역이 있지 각각 있지 않을까? 나도 예전에는 그렇게 일을 했었다. 뼈대를 만드는 사람, 그리고 거기에 예쁜 외장재를 붙이는 사람이 구분된 업무를 진행해 왔다. 내가 준비한 외장재가 어울리는 뼈대를 찾는 게 아니라 그 뼈대에 맞는 외장재를 준비하는 디자이너였다. 그렇게 준비해온 외장재는 마음에 들지 않기 일쑤였고 무엇보다 전달받은 뼈대가 마음에 들지 않았다. 이러쿵 저러쿵 싫다면 둘다 하는 수 밖에 (출처: http://seokjun.kr/why-engineers-become-ceo/)게다가 핀다(Finda)에는 기획자라는 포지션이 따로 있지 않았다. 이렇듯 스타트업의 환경에서는 각 회사와 단계에 맞춰 기존의 포지션이 없기도 하는데, 특히 디자이너가 두 가지 역할을 동시에 해야 하는 경우가 자주 발생한다. 빠른 속도로 효과적인 결과물을 만드는데 가장 필요한 것은 절차의 단순화이고, 이를 가장 잘 소화할 수 있는 포지션이 디자이너라 생각되었다. 즉, 외장재를 붙일 뼈대를 처음부터 세우는 역할은 무엇보다 디자이너가 가장 잘 할 수 있다.그렇게 시작된 기획. 모든 프로젝트가 그렇겠지만 빡빡한 일정을 고려하여 (세상에 일정이 넉넉한 프로젝트는 존재하지 않는다) 다음 몇 가지를 다시 기획하였다.1) 메인페이지말 그대로 얼굴이다. 기회 초기에는 소비자가 가장 처음 보는 화면인 만큼 많은 정보를 한꺼번에 보여주고자 하였다. 그러나 사용성 데이터 분석결과 정성스럽게 준비한 내용을 끝까지 꼼꼼하게 다 보는 사용자는 극히 일부였다. 스마트폰이 이렇게 생기지 않는 이상 사용자가 화면 전체를 다 소화하긴 힘들 것이다. 일반적으로 광고를 돌리거나 이벤트를 진행하는 경우 보통 메인페이지로 랜딩을 시키지 않기 때문에 새롭게 개편되는 메인페이지의 역할은 핀다 사용자들이 필요로하는 정보가 모여있는 최종 목표 페이지, 즉 상품 카테고리별 대표페이지나 상품을 전체적으로 볼 수있는 리스트페이지로 자연스럽게 이동시킬 수 있는 목적을 구현하는 것으로 출발선으로 정하였다. 아울러 우리의 소중한 파트너사들을 위한 광고영역 (스크롤 없이 노출이 가능한 비율을 기준으로 하였다.)도 중요하기 때문에 이 영역도 미리 고려해 두었다.  모바일 화면상 핀다의 메인페이지를 구성하는 배너와 광고 영역의 예2) 메뉴 구성기존 GNB에는 상당히 많은 메뉴가 존재했다. 취급하는 상품이 다양하기에 그만큼 보여주고 싶은 것도 많았었다. 그렇게 하나둘씩 늘어난 메뉴의 가짓수는 그 상품의 목적이 비슷함에도 불구하고 별도의 메뉴로 나누어져 있었고 블로그 콘텐츠도 메뉴의 항목으로 구성되어 있었다. 리브랜딩 전 메뉴구성 (위) vs 리브랜딩 후 메뉴구성 (아래) 이번 리뉴얼에서는 여러 개로나누어진 상품들을 상품의 목적에 따라 카테고리화했다. 돈을 벌기 위한 '투자', 돈을 빌리기 위한 '대출', 그리고 소비를 위한 '카드' 크게 3가지로 나뉘었고, 브랜드관과 블로그를 추가하여 총 5개의 메뉴로 개편하였다. 기존에 있었던 블로그 콘텐츠, 특판상품은 새롭게 추가된 페이지 내부에 배치하여 메뉴 가짓수를 줄일 뿐만 아니라 프로덕트 전체에서 사용성 및 중요도에 따라 계층구조를 체계화시킬 수 있었다.3) 카테고리별 대표 페이지의 추가 상품 형식을 세 가지로 줄이고 각 형식에 해당하는 상품군을 배치하였지만 무턱대고 우리 이런 상품 정보가 있다고 줄줄이 보여주기에는 묶인 단위와 결과값이 너무나 방대하다고 생각했다. 하다못해 마트에서 수많은 물건중 하나를 고르기도 어려운데 금융인들의 일상용어로 꾸며진 상품은 오죽하겠는가... 사용자들이 가장 궁금해하는 일부 우려진 추천상품에 대한 정보 제공 및 자연스럽게 각 하위 상품들로의 연결, 계산기와 맞춤 추천, 나아가 관련 콘텐츠까지 자연스럽게 연결할 수 있는 일종의 허브 역할을 하는 대표 페이지를 새롭게 추가하였다.카드 추천을 위해 기획된 user flow별 실제 화면 (feat. 착착 이렇게만 넘어가면 좋겠는데)  이 페이지들은 메인페이지 -> 상품 메인페이지 -> 상품 목록페이지 -> 상품 상세페이지로 이어지는 플로우를 보다 자연스럽게 만들어 주었으며 다양한 목적의 랜딩페이지로도 활용이 가능하다. 4) 회사 소개 페이지의 상단 이동과거 나이 많은 CEO의 허세 가득한 비전만 담긴 회사소개와 달리 요즘 회사소개 페이지는 그 회사의 문화를 보여줄 수 있는 등 다양한 역할을 가지고 있다.전형적인 기업들의 진부한 CEO 인사말 일반적인 기업들과는 달리 핀다와 같은 스타트업의 경우 회사가 무엇을 하는 것 만큼 회사의 문화, 사람을 알고 싶어 하는 니즈가 더 크기에 기존 꼭꼭 숨어있던 회사소개 페이지를 과감히 상단에 배치하였다. 실제로 과거 사용성 데이터를 보았을 때도 상품 가입 페이지를 제외하곤 메뉴나 페이지 사용성이 매우 높은 페이지 중 하나였다. 회사가 나아가고자 하는 비전도 중요하지만 어떤 경험을 가지고 있는 사람이 모여있는지, 그리고 핀다가 브랜딩에 얼마나 애정을 가졌는지를 보여주고 싶었다. 회사 페이지 내 배치될 비전과 미션, 그리고 팀원들을 정성스레 소개하기 위해서 지난 몇개월간 팀 전체가 고민하며 더 꼼꼼하게 채워나갔고, 일반적으로 카메라를 들이대면 부끄러워하는 우리나라 사람들과 달리 매우 잘 포즈를 취해준 팀원들 덕분에 활기차고 당당한 프로필사진을 촬영하여 그대로 잘 활용할 수 있었다.Thanks to Photoshop and our team새로운 사이트를 이미 오픈한 시점에서 앞서 언급한 것 보다 더 많은 것을 구성했으나 반영하지 못하고 미리 고려해보지 못한 점들이 너무나 많이 있어 아쉽다. (그랬다면 아직도 오픈을 못 했을수도 있다. 명심하자. 프로젝트를 공개하는 것과 공개된 프로젝트를 유지 보수하는 업무 구분은 명확히 해야 한다. 그러지 못할 경우 계속 지연되는 것 밖에 없다.) 이번 글에는 무엇을 목적으로 어떻게 리브랜딩을 기획했는지에 대한 간단한 이야기를 해보았다. 다음 글에서는 좀 더 디자이너답게 프로덕트를 어떻게 꾸며 나가고 있는지에 대해 이야기해 보고자 한다.  #핀다 #디자인 #디자이너 #철학 #브랜드 #브랜딩 #인사이트
조회수 3240

하늘 아래 같은 레드는 없다

초록색 = 스타벅스주황색 = 나이키노란색 = 이마트다들 한 번쯤은 특정 컬러를 보았을 때 자연스럽게 그 컬러를 사용하는 브랜드가 떠오르는 경험을 해보셨을 거예요. 이처럼 컬러가 브랜드에 미치는 영향은 대단합니다. 브랜드 컬러는 브랜드 아이덴티티를 확실하게 전달함은 물론 구매에 까지 영향을 미치기 때문이죠.데일리의 서비스 앱 '데일리호텔(DAILYHOTEL)'은 브랜드 컬러로 '버건디'를 사용하는데요. 브랜드 가이드를 제작하던 중 이 '버건디'컬러의 Align 필요성을 느끼게 되었습니다. 브랜드 컬러의 영향이 막중한 만큼 그 컬러의 일관성 또한 매우 중요하기 때문이죠. 더군다나 데일리처럼 온(RGB)/오프라인(CMYK)으로 컬러를 사용하고, 넓은 영역과 앱 내의 좁은 영역에서 쓰이는 컬러 값을 다르게 설정하는 경우 각 플랫폼의 컬러 통일화 작업은 매우 중요합니다.(*면적에 따라 달리 적용되는 컬러 값 관련 참조 글 : https://brunch.co.kr/@suyoung/8)AS-IS 파악본 프로젝트를 진행할 당시 데일리의 브랜드 컬러는 #900034 였습니다. 하지만 앞서 말했듯이 넓게 보이는 영역과 작게 보이는 영역에서 컬러 값을 다르게 가져가야 하는 이슈로 진작 앱 내에서는 #b70038이 사용되고 있었죠. 또한 오프라인으로 출력 시에 인쇄용 CMYK값이 아닌 웹용 RGB Hex인 #900034를 그대로 출력하여 버건디가 아닌 어두운 갈색으로 출력이 되고 있었습니다.앱 내의 컬러 재정의(In-App Color)1. 앱 내에 버건디 컬러가 사용되는 부분버건디 컬러는 자체가 강한 컬러이기 때문에 앱 내에서는 CTA 버튼으로 가장 많이 사용되고 있습니다. 모든 화면에 강조색을 과하게 사용할 경우에 눈에 피로도를 주어 콘텐츠에 집중할 수 없는 이슈가 있기 때문이죠. 현재 앱의 내비게이션 바 색상을 흰색으로 처리한 이유도 그 때문입니다.2. 이전 이슈사항아이폰과 안드로이드의 환경이 다르기 때문에 같은 색상일지라도 두 디바이스를 함께 두고 같은 화면을 보았을 경우 색상 차이가 발생합니다. 특히 안드로이드의 경우 기존에 사용하던 #900034 컬러를 적용할 시 어두운 갈색으로 보이는 경우가 있어, CTA 버튼 컬러로 사용 시에 버튼에 대한 명확도가 떨어져 역할에 부족함이 있었습니다.3. 대응사항각기 다른 안드로이드 단말마다 모두 다른 색상을 가져갈 수 없는 문제이기에 어떠한 디바이스던 버건디 색상이 명확하게 보일 수 있도록 다양한 디바이스를 모아 테스트를 거쳐 명도를 밝게 뺀 최적의 버건디 컬러를 뽑았습니다. 앱 적용시 화면프로덕트 자체가 모바일 기반 서비스인 페이스북, 구글의 CI도 모바일이나 웹 환경에서 더욱 가독성이 있어 보이도록 계속해서 CI 컬러를 리뉴얼하고 있습니다. 아래처럼요.(*관련 기사 링크 : http://m.zdnet.co.kr/news_view.asp?article_id=20150702091741#imadnewshttp://m.businesspost.co.kr/news/articleView.html?idxno=16798&daum_check=&naver_check=#cb)모바일 기반 타사 브랜드 컬러 리뉴얼 예시4. 결론기존 안드로이드 디바이스에서 #900034 버건디 컬러가 팥색으로 보이던 이슈로 인해 안드로이드, 아이폰 모든 디바이스에 사용하기 좋은 컬러로 재정의하여 #b70038로 새로운 컬러 값을 지정하였습니다.(짝짝)앱 아이콘 컬러 재정의(App Icon Color)물론 예외적인 부분도 존재합니다. 바로 앱 아이콘 컬러의 경우인데요. 현재, 다른 앱 아이콘들과 함께 쓰이는 홈 스크린 화면에서는 다른 앱 아이콘과 함께 데일리호텔 앱에 돋보일 수 있도록 #70038보다 더 밝은 #d1004 c를 사용합니다.이유는 제일 왼쪽의 이미지처럼 기존 컬러 #900034를 사용할 경우, 다른 아이콘들과 비교했을 때 주목성이 약해지게 되므로 아이콘으로써의 역할을 잃기 때문입니다. 많은 서비스들이 앱 내에서 사용하는 지정 컬러가 있지만, 다른 아이콘과 함께 사용되는 홈 스크린 아이콘은 더 밝고 튀는 색상으로 가져가고 있습니다.타사 예시출력용 CMYK 컬러 재정의(Offline Color)모니터에서 사용되는 RGB 컬러를 CMYK로 변환 과정을 거치지 않고 그대로 출력할 경우 색상은 매우 다르게 표현됩니다. 때문에 RGB 값에 맞추어 출력 시에 동일할 수 있도록 CMYK값과 PANTONE값을 따로 추출해야 하죠. 하지만 출력 기계와 인쇄소의 여건에 따라 동일한 CMYK값을 지정한다고 해도 미세하게 다른 컬러로 출력된 것을 받아보기 마련인데요. 이런 이유로 어느 환경에서도 동일한 컬러로 출력할 수 있도록 제작된 컬러칩 PANTONE이 있습니다. 아래는 팬톤 컬러로 테스트를 한 경우입니다.PANTONE컬러를 맞추기 전과 후출력물로 컬러 테스트 결과 PANTONE 1945 c가 새롭게 정의된 브랜드 컬러인 #b70038와 가장 흡사함을 확인할 수 있었습니다. 해서 데일리호텔의 브랜드 컬러는 아래와 같이 재정의 되었습니다.버건디의 친구(Secondary Color)데일리의 브랜드 컬러인 '버건디'가 재정의 되었습니다. 그리고 그 '버건디'는 친구가 필요했어요. 혼자 쓰이기에는 너무 임팩트가 약하고 전달하고자 하는 메시지가 잘 공유되지 않았기 때문이죠.1. Product하지만 앱 내에서 사용되는 컬러는 실질적으로 Main(버건디), Second(골드) 두 가지가 주로 사용됩니다. 또한 홈 화면에 호텔/레스토랑의 등급을 알려주는 뱃지에 사용되는 컬러는 여러 가지로 베리에이션이 되어야 하기 때문에 제한적인 컬러를 사용할 수 없는 이슈가 있었습니다.다양한 컬러로 사용되는 앱내 뱃지 예시2. Brand / Marketing기업 굿즈와 옥외광고 등 데일리호텔의 브랜딩이 노출되는 곳에는 응용을 위해 Second 컬러를 제외한 Accent 컬러가 필요했습니다. 하지만 앱 내에 보이는 이벤트 페이지는 기획전 성격과 이미지에 따라 컬러가 자유롭게 사용되기 때문에 지정된 컬러를 사용하기에는 어려운 이슈가 있었죠.Accent 컬러 적용 예시Second/Accent 컬러 적용이 다소 어려워 보이는 마케팅 컨텐츠의 예시3. 결론- 예외적으로 Brand / Marketing에 사용되는 Accent Color를 따로 선정- Main(버건디), Second(골드)를 공통적으로 사용하되 프로덕트와 브랜드(온/오프라인)에 사용되는 컬러 값은 다르게 적용(*넓은 영역과 좁은 영역에서 다르게 사용되는 컬러 값 이슈)확립된 데일리의 브랜드 컬러!이런 과정으로 지금의 데일리 컬러 '버건디'가 탄생했습니다. 어찌 보면 단순해 보이지만 많은 테스트를 거쳐 유저들에게 최적의 상태로 표현되기 위해 노력하고 있답니다.(!)앞으로 이런 데일리의 노력 많이 지켜봐주세요 :)진행In-App Color/App Icon Color : Product팀Offline Color/Secondary Color : Creative팀#데일리 #데일리호텔 #디자인 #디자이너 #UI #디자인철학 #인사이트
조회수 1226

피드백에 대처하는 스타일쉐어 이야기

오랜만에 올리는 글입니다. 그동안 여러 차례 글쓰기를 시도했지만, 가장 글감으로 쓰고 싶었던 프로젝트가 런칭 전이라 조심스러웠습니다. 하지만 이제 런칭했으니 여러 가지 이야기를 해보고 싶습니다.스타일쉐어가 얼마 전 앱 2.0을 런칭했습니다. 길다면 길다고 할 수 있는 대략 8개월간의 시간 동안 부지런히 준비했습니다. 그러나 반응이 썩 좋지만은 않습니다. 그래서 이번엔 수많은 유저들의 피드백에 대처하는 스타일쉐어 (디자인) 팀의 이야기를 하고자 합니다.런칭 후, 가장 많이 받은 피드백은 스타일 피드1에 썸네일 뷰2를 만들어달라는 것이었습니다. 사실 가장 많은 것은 구 버전으로 돌려달라는 것입니다. 하하<meta charset="utf-8">피드백에 어떻게 대처했느냐를 이야기하기 전에 왜 넣지 않았는지에 대해 먼저 이야기할 필요가 있겠네요. 스타일 피드를 구상했을 당시 썸네일 뷰에 대한 고민이 없었던 것은 아닙니다. 썸네일뷰가 가진 이슈는 ‘썸네일 뷰를 제작한다면 디자인팀과 개발팀에서 공수를 들이게 될 텐데, 썸네일 뷰는 과연 그만한 가치가 있는가?’ 였습니다. 당시 저는 없어도 된다고 생각했습니다. 디자이너로서 부끄러운 이유이지만, 썸네일 뷰가 없어도 스타일 피드의 기능은 이용할 수 있다고 생각했기 때문이었습니다. 프로젝트를 하루라도 빨리 런칭하는 것이 더 바람직하다고 생각했던 제 생각이 반영되어 있습니다. (그렇게 생각했던 까닭은 나중에 이야기하겠습니다)썸네일 뷰의 가치에 접근하는 다른 시선도 있었습니다. 통계적 접근이었습니다. 썸네일 뷰를 사람들이 얼마나 눌러보는지 통계를 내려는 시도가 있었지만, 디자인팀의 능력으로는 의미 있는 해석을 하는 데에 한계가 있었습니다. 썸네일 뷰에 대한 적극적인 고려가 있었다면 어떤 식으로든 해석을 했겠지요. 하지만 디폴트 뷰 방식이 블로그 뷰3였고, 적극적인 고려 또한 코스트가 들어가는 일이었기 때문에 용두사미라고, 썸네일 뷰 이슈는 그렇게 묻혀졌습니다.그 이후, 썸네일 뷰가 필요하다는 유저들의 적극적인 피드백이 쏟아졌습니다. 예상 외의 부분에서 컴플레인이 발생해 당황했지만, 중요한 것은 그 피드백을 반영하느냐 안 하느냐이죠. 유저들이 갑작스러운 서비스 변화에 적응하는 부분이라고 생각하기엔 적극적인 피드백이 많았습니다. 그래서 런칭 후 첫 업데이트에 모든 팀이 썸네일 뷰를 넣기 위해 고군분투했습니다. 운영팀은 썸네일 뷰를 넣어달라는 유저들의 피드백 메일을 응대하고, 디자인팀은 썸네일 뷰를 디자인하고, 개발팀은 그것을 구현했습니다. 현재 디자인된 썸네일 뷰는 간단하지만, 꽤 많은 고민 끝에 나온 결과물입니다.<meta charset="utf-8">현재 썸네일 뷰 기능이 들어간 2.0 버전과 썸네일 뷰 기능을 지원한 예전 0.9 버전0.9 버전에선 네비게이션 바에 뷰 토글 버튼이 있었다.썸네일 뷰는 뷰 방식 토글 버튼과 썸네일 뷰 자체 두 가지를 디자인해야 했습니다. 썸네일 뷰가 서비스 자체에서 얼마나 중요한 것인지 고려하여 뷰 토글 버튼의 위치를 선정하고, 카드 베이스 방식으로 바뀐 피드에 어울리게 썸네일 뷰의 여백을 조정했습니다. 카카오 스토리라는 유사한 디자인을 가진 좋은 선례가 있어서 참고되었습니다. 저희가 내린 결론은, 썸네일 뷰는 서비스 자체에서 중요하지 않지만, 기존에 뷰 토글 기능을 이용해오던 스타일쉐어 유저에게는 사라지면 불편한 기능이라는 것이었습니다. 그러므로 기존과 같이 중요한 자리는 내주지 않았지만, 기능 자체는 사용할 수 있도록 디자인했습니다.스타일쉐어 2.0 디자인 당시 주안점은 ‘구조와 디자인이 새롭게 바뀌어야 하지만 기존 유저들이 낯설어하지 않아야 하므로 낯설지 않게 할 수 있는 부분 (=새롭게 바뀌지 않아도 되는 부분)이 있다면 최대한 그렇게 하자’는 것이었습니다. 하지만 되짚어보니, 자기만족을 위한 주장이 아니었나 싶습니다. 스타일쉐어는 갈아엎고 싶고, 유저들은 고려해야 하는데, 깊게 고민할 시간은 없으니 나온 결론이 아니었을까요? 새롭게 바뀌지 않아도 되는 부분에만 기존 디자인을 투사하는 단순한 방식이 아니라, 유저들이 스타일쉐어에서 겪은 기존의 경험에 새로운 디자인을 조심스럽게 투영했어야 했던 것은 아니었을까 하는 생각이 듭니다. 유저들이 낯설어 하는 것을 조심하자는 주안점을 두고 있었음에도 낯섦을 떠나 불편하게 하다니, 제가 정말 유저들을 고려하긴 한 것이었는지 많이 생각할 수 있는 사건이었습니다.이번 스타일쉐어 2.0에 쏟아진 적극적인 피드백을 받으며 스타일쉐어 팀은 유저들의 사용 패턴 연구에 더욱 적극적인 태도를 가지기로 했습니다. 그리고 유저들이 학습하고 적응하는 시간의 중요성을 단단히 느끼고, 이번 2.0 버전처럼 새롭게 뒤엎는 업데이트는 자제하기로 했습니다.혹시 깜짝 선물 준비해보신 적 있으신가요? 개인적으로 깜짝 이벤트, 깜짝 선물을 무척 좋아하기 때문에 받고 나서 좋아할 사람들의 반응을 기대하며 항상 성심껏 선물을 고릅니다. 이번 스타일쉐어 2.0도 저에겐 유저분들께 드리는 깜짝 선물과 같았습니다. 그래서 하루라도 빨리 런칭하는 것을 유저들을 위한 것으로 생각했습니다. 하지만 긍정적인 피드백을 받아보고 싶은 마음에 서두르기만 했을 뿐, 영리하게 준비하지 못했네요. 지나치게 적극적인 피드백이 쏟아지는 탓에 마음이 아플 때도 있지만, 비로소 제가 스타일쉐어를 제 것이라고 여길 만큼 많은 부분을 디자인했다는 사실에 뿌듯하기도 합니다. 앞으로 더욱 멋지고 사랑스럽게 스타일쉐어를 디자인하겠습니다.Style feed. 스타일쉐어 앱을 켜자마자 보이는 discover feed입니다. ↩Thumbnail view. 사진을 바둑판 배열로 볼 수 있는 뷰 방식 입니다. ↩Blog view. 페이스북처럼 게시물 형태로 사진을 보는 뷰 방식 입니다. ↩#스타일쉐어 #디자인 #디자이너 #디자인팀 #인사이트 #후기 #일지 #경험공유
조회수 3299

스포카 한 산스 웹폰트로 사용하기

스포카 비주얼 디자인팀은 스포카 한 산스를 판올림한 두 번째 버전을 배포했습니다. 스포카 한 산스2.0에 관한 몇 가지 단편적 사실들 포스트에 이어 이 글에서는 스포카 한 산스를 웹페이지에 사용하고자 “커스텀”한 부분을 소개하고 스포카 한 산스 웹폰트 사용시 권장하는 방법을 알립니다.웹페이지에서 사용할 때를 고려한 변경사항먼저, 웹페이지 사용을 염두한 변경사항에 대해 소개합니다. 스포카 한 산스는 웹폰트로 많이 사용하기에, 웹에서 UI와 함께 쓰이는 상황을 필수로 고려했습니다. 스포카 한 산스2.0에 관한 몇 가지 단편적 사실들에 자세한 디자인 변경사항에 대해서 소개했는데, 해당 포스트에서 소개하지 않은 변경사항을 적어봅니다.1. “더보기”나 “뒤로” 레이블과 함께 쓰는 화살표 아이콘을 폰트 파일에 추가했습니다.고대 문자 등 일반적으로 쓰이지 않는 특수한 글리프 공간에 임의로 다른 글리프를 넣을 수 있습니다. 이를 Private Use Areas, 줄여서 PUA라고 부릅니다.버전2에는 이 PUA에 “더보기”나 “뒤로” 레이블과 함께 쓰는 화살표(Caret) 글리프를 넣었습니다.왼쪽, 오른쪽 화살표를 각각 U+E000, U+E001에 할당했습니다. UI를 구현하면서 보통 화살표 아이콘을 이미지나 SVG를 만들어 CSS로 처리하곤 하지만, PUA에 넣으면 마치 텍스트를 입력하는 것처럼 아이콘을 넣을 수 있습니다. 때문에 작업품이 덜 들고 경제적입니다.폰트는 UI 요소로써 쓰입니다. 당연하게도 UI 요소인 폰트 완성도를 높이면 UI의 정교함도 올라갑니다. 어떤 웹 페이지에서는 종종 오른쪽 부등호(>) 글리프를 넣어 이 아이콘을 대신합니다. 하지만 이 방식을 사용하면 해당 글리프의 표준 의미와도 일치하지 않고, 디자인 완성도가 약간 떨어집니다. 부등호 글리프 모양들은 수학기호 표기를 위해 만들어졌기에 아이콘 형태와는 거리가 멀기 때문입니다.이 방식이 편리하고 경제적이라면, 모든 모양 아이콘도 다 폰트에 넣으면 좋으리라고 생각하기 쉽습니다. 하지만 형태가 조금 복잡한 아이콘을 폰트에 넣고 힌팅 정보를 따로 입력하지 않으면1작은 글자 크기에서 모양이 일그러집니다. 아이콘을 어느 크기이든 명료하게 보여주려면, 폰트 힌팅까지 전부 고려해야 합니다. 모든 아이콘을 PUA에 추가하는 방식은 효과에 견줘 공수가 너무 많이 든다고 판단해 화살표 글리프만 PUA에 추가했습니다.이 왼쪽, 오른쪽 화살표 모양은 폰트 굵기별로 다른 굵기를 지정했습니다. 얇은 스타일에서는 얇게, 두꺼운 스타일에서는 굵게 보여줍니다.사용방법은 간단합니다. HTML 문자 엔티티를 마크업 코드에 넣는 방법대로 왼쪽 화살표는 , 오른쪽 화살표는 <을 HTML문서에 작성합니다./* 왼쪽 화살표 */ < 뒤로 가기 /* 왼쪽 화살표 */ 더 알아보기 > 위 코드를 스포카 한 산스를 불러오는 웹페이지의 HTML파일에 적어 넣으면 아래처럼 보입니다.< 뒤로 가기더 알아보기 >2. 서브셋에는 한글 완성형 글꼴에 추가 글자 224자를 더했습니다.스포카 한 산스를 배포하고나서 부족한 글자에 대한 제보가 꾸준히 들어왔습니다. 한글 완성형 2,350자는 1987년 규격화된 표준입니다. 굉장히 오래전에 지정된 표준이기 때문에 일상생활에서 자주 쓰는 글자가 없는 경우가 왕왕 있습니다.우리는 사용성을 어떻게 하면 개선할 수 있을지 고민하다가 노민지, 윤민구 님이 작성하신 논문인 “KS 코드 완성형 한글의 추가 글자 제안”을 발견했습니다. 스포카 한 산스 두 번째 버전 서브셋은 이 논문의 제안 안을 따라 KS 완성형에 추가 글자 224자를 더해 총 2,574자를 제공합니다.3. 서브셋 폰트 파일을 만드는 스크립트를 제작했습니다.서브셋 폰트 파일을 만드는 스크립트가 저장소에 반영되었습니다.2 이후 오리지널 파일을 수정하더라도 쉽게 서브셋 폰트 파일로 만들 수 있습니다.서브셋 폰트 파일을 만드는 스크립트 build_subset 파일의 작동 방식을 간단히 소개합니다.이 스크립트는 subset 폴더 내에 위치한 glyphs.txt를 읽어서 서브셋을 만듭니다.한글 폰트의 경우 glyphs.txt 파일에는 완성형 2,350자와 위에 언급한 추가글자 224자, 그리고 각종 필수 약물이 적혀있습니다.U+2603(눈사람 기호), U+E000과 U+E001(왼쪽, 오른쪽 화살표) 글리프는 스크립트에 하드코딩 했습니다. PUA를 더할 때는 스크립트를 직접 수정합니다.용량 차이가 크지 않기 때문에 힌팅 정보, 이름 등의 메타정보를 최대한 살리는 방향으로 옵션을 설정했습니다.이전에 스포카 한 산스와 글꼴 경량화 포스트에서는 GUI로 경량화할 수 있는 방법을 소개했습니다. 그런데 이번에 작업을 해보니 커멘드라인으로 스크립트를 돌리는 것에 익숙하다면 이쪽이 훨씬 간편하다는 것을 알았습니다.3 또한, 커멘드라인 툴에 익숙하지 않은 디자이너라도, 프로그래머 도움을 아주 조금만 받으면 쉽게 서브셋 폰트를 만들 수 있다는 사실을 알았습니다. 혹시 스포카 한 산스를 일부만 서브셋으로 만들고 싶다거나 다른 폰트를 서브셋으로 만들기 원한다면 위 스크립트를 활용해보세요.스포카 한 산스 웹폰트 사용 가이드라인다음으로, 스포카 한 산스를 웹폰트로 사용할 때 권장하는 두가지 방법을 살펴보겠습니다.1. 스포카 한 산스 서브셋 파일을 직접 CDN에 올려서 사용하세요.스포카 한 산스 공식 웹페이지에서 설명한 웹폰트 사용법대로 쓰시면 폰트를 불러오는 속도가 다소 느립니다. Rawgit이라는 무료 CDN을 사용했기 때문인데요, 무료로 파일을 불러오는 대신 조금 느립니다. 내부에서 테스트해 본 결과 폰트를 불러오는 시간이 짧게는 2초에서 길게는 20초 이상 걸리기도 했습니다.이런 불편한 점을 해결하려면 회사의 경우는 자사의 CDN에 파일을 올려서 서브하는 방식을 추천합니다. 어떤 CDN은 비용을 내야하는 경우가 있겠지만 일단 속도가 무척 빨라지기 때문에 웹 페이지의 성능이 좋아집니다. 참고로, Cloudflare에는 개인이 이용할 수 있는 무료 플랜도 있습니다.2. 웹페이지에서 폰트 로딩이 되기 전까지 아무것도 안 뜨는 현상을 해결하세요.웹페이지에서 글자가 아무것도 뜨지 않는 현상은 한국어 웹페이지를 접속하는 모든 사람이 한 번쯤 겪어보았을 것입니다. 이 현상은 한글 웹폰트를 불러올 때 흔하게 일어납니다. 이는 한글 웹폰트 용량이 영문 웹폰트에 비해 아주 무겁기 때문인데요. 이러한 현상을 FOIT(Flash of Invisible Text)라고 부릅니다.해외에서 웹폰트를 사용한 한국 웹페이지에 접속한다거나, 무척 느린 인터넷 환경에서 용량이 큰 한글 웹폰트를 불러올 때 이 현상은 빈번하게 목격됩니다. 스포카 한 산스를 사용한 웹페이지에서도 FOIT 현상이 자주 나타났습니다. 최근에 Woff2 파일을 가장 먼저 불러오도록 CSS의 @font-face 방식을 바꾸는 Pull Request가 저장소에 반영되고 나니 폰트 로딩 속도가 월등하게 개선되었습니다. 로딩 속도와 FOIT 발생빈도는 반비례합니다.아까 언급했다시피 각자의 CDN에 올려 폰트 로딩 속도를 빠르게 변경하면 이 현상을 피할수 있습니다만, 확실하게 하기위해서는 폰트를 불러오는 동안에 다른 폰트를 보여주는 비동기 로딩 방식을 사용하는 게 좋습니다. 스포카 기술블로그에서는 FOIT를 방지하기 위해 웹폰트 로더, 그 중에서도 비동기 로딩 방식을 사용해서 FOIT를 방지합니다.4사용방법 안내는 아래 포스트를 소개하는 것으로 대신합니다. 폰트를 불러오는 동안 깜빡이는 현상에 관해 구체적인 내용을 읽고 싶거나, 폰트 로딩에 대해 더 알아보려면 한 번쯤 읽어보시길 추천합니다. 폰트 로딩 방식에 관해 자세히 정리한 글입니다.FOUT, FOIT, FOFT웹 폰트를 로컬 스토리지에 저장하는 기법 - 캐시 안정성 증가, 글꼴 깜빡임 현상 제거나눔고딕 구글 웹폰트(Webfont) 사용하기마치며스포카 한 산스를 공식 배포하고 1년이 조금 넘었습니다. 그간 분에 넘치는 관심과 성원에 감사합니다. 그동안 우리팀에서 작성한 스포카 한 산스 관련 웹페이지를 첨부하며 이 글을 마칩니다.스포카 한 산스 공식 웹페이지스포카 한 산스 2.0에 관한 몇 가지 단편적 사실들스포카 한 산스와 글꼴 경량화폰트 힌팅은 말 그대로 힌트를 말합니다. 외곽선을 렌더링 할때 필요한 추가 정보인데요, 이 정보가 부족하면 작은 글자 크기나 해상도에서 깨져 보일 수 있습니다. FreeType 라이브러리의 힌팅과 커닝 항목도 참고해보세요. ↩이 스크립트는 스포카 제품팀 팀장인 김재석 님이 작업해주셨습니다. ↩개인 사이드프로젝트인 한글 웹폰트 글꼴보기집을 만들 때는 Fonttools 같은 도구를 살펴보았습니다. ↩스포카 기술블로그에는 default.html의 헤더에 해당 스크립트를 넣었습니다. ↩#스포카 #디자인 #디자이너 #폰트 #인사이트 #경험공유 #후기 #일지
조회수 1665

"공간이 멤버에게 세미콜론 같은 존재였으면 좋겠어요."

패스트파이브는 현재 14개 지점을 운영하고 있습니다. 오픈을 기다리는 지점도 3개(강남역 3호점, 을지로3가역점, 을지로입구역점)가 남아 있고, 앞으로 계속 지점을 확장해나갈 계획이죠. 이 지점들은 흔한 프랜차이즈 카페나 브랜드 아파트처럼 똑같은 공간을 제공하지 않습니다. 각 지역의 성격과 입주사의 성격에 맞게 디자인되어 가장 편안하고 효율적인 업무 공간을 완성하니까요. 패스트파이브가 이처럼 세련되면서도 효율적인 공간을 제공할 수 있게 하는 가장 큰 힘, 늘 더 나은 오피스를 고민하는 공간 디자이너분들인데요, 오늘 Humans of FASTFIVE에서는 공간 디자이너 송영주 님을 인터뷰했습니다. 오피스 공간을 넘어 그 지역만의 성격과 특성까지 고려하는 디자이너 영주님의 이야기를 함께 만나보세요!Q. 영주님 안녕하세요, 간단한 본인 소개, 그리고 하시는 일에 대한 설명을 부탁드립니다. 안녕하세요, 공간 디자인팀 송영주입니다. 공간 디자인팀에서 하는 일을 간단히 설명하자면… 패스트파이브가 새로 건물을 계약하면 처음 공간 계획부터 시작해서 디자인 컨셉을 정하고 레이아웃을 잡습니다. 그리고 컨셉대로 디자인을 하죠. 그 뒤 공무 시공팀과 협업해서 현실화를 시킵니다. 지금 이 공간처럼요. 디자인 컨셉이라는 말이 생소하실 수도 있는데, 예를 들어 열두 번째 지점인 홍대점은 밝고 젊은 분위기를 컨셉으로 잡았어요. 그래서 기존 호점보다 컬러를 다양하게 많이 사용했어요. 그리고 그래픽 디자이너 성주 님과 협업해서 각 층마다 그래픽도 많이 사용했죠. 다양한 컬러와 그래픽이 사용된 패스트파이브 홍대역점다른 지점을 작업할 때도 지역 특성에 맞게 작업하려고 해요. 제가 외국에서 살다 와서 한국의 지역 특성에 대해 잘 몰랐거든요. 제가 사는 동네를 빼면 더 모르고요. 그래서 새로 지점을 맡을 때마다 지역에 대해 배우면서 작업을 해요. 이런 지점이 재미있고, 지역색을 배우면서 일하는 느낌이죠. 예를 들어 성수동도 아예 모르는 지역이었는데 성수점을 담당하게 되어서 처음부터 공부하면서 작업을 했어요. 지금 작업 중인 을지로입구역점도 리서치를 많이 했죠. 젊은 사람들부터 노인분들까지 다양한 연령대가 모이는 곳이고, 정말 만물이 다 있는 동네더라고요. 이렇게 다양한 사람들과 사물이 섞이면서도 서로에게 간섭하지 않는, 그러면서도 영향을 주고받는 모습이 새롭고 신선했습니다. 을지로입구역점 작업도 재미있을 것 같아서 기대돼요. Q. 인테리어에 지역의 특징을 담아낸다는 이야기가 신선하게 느껴지는데요, 외국은 인테리어 디자인에 지역색을 많이 반영하는 편인가요? 미국은 특히 많이 담아내는 것 같아요. 주마다 프라이드가 굉장히 강하고, 자기가 어느 주 출신이라는 걸 강조해요. 고등학교 때는 캐나다에 살았는데 캐나다에서는 찾아보지 못했던 모습이라 신기하더라고요. 미국은 음식이나 인테리어 등 모든 면에서 로컬 특성이 강조되는 편이에요. 그런 스타일이 익숙하고 당연한 것 같아요. 굳이 리서치를 하지 않아도 이 지역은 이런 특징이 있다는 게 보이죠. 저는 미국에서 인테리어를 배웠기 때문에 지역 특징을 찾으려고 하고, 인테리어에 반영하려는 습관이 생긴 것 같아요. 그래서 늘 지역에 대해 조금 더 공부하고 디자인에 녹여내고 싶다는 아쉬움이 남죠. Q. 패스트파이브의 공간 디자인팀은 세 팀으로 구성되어 있는데, 영주님이 계신 1팀은 지금 어떤 일을 담당하나요?저희 1팀은 성수역점의 카페와 을지로입구역점을 동시에 진행 중입니다. 성수역점에 있는 카페는 처음 시도하는 공간이다 보니 생각보다 시간이 조금 더 걸리고 있어요. 카페 내부에 작은 온실을 만드는 등 식물도 독특하게 많이 사용했고, 멋진 작업을 많이 한 업체와 함께 일하고 있어서 기대도 많이 되네요. 오늘 마무리 정리를 하고 와서, 공사만 끝나면 곧 오픈할 거예요.Q. 지금 담당하고 있는 을지로입구역점의 디자인 작업에서 가장 중점을 둔 부분이 있다면요?성수점 카페 어라운드파이브에서 로고로 쉼표를 썼어요. 그 연장선상에서 을지로입구역점의 컨셉을 세미콜론으로 삼기로 했죠. 영어에서 두 문장을 연결할 때 세미콜론을 사용하잖아요? 여러가지를 나열하고 싶을 때도 쓰고요. 패스트파이브 을지로입구역점이라는 공간이 그곳을 사용하는 멤버들에게 세미콜론 같은 존재였으면 좋겠어요. 멤버들이 하고 싶은 것을 하면 그들을 연결해주고, 약간 애매한 부분도 자연스럽게 풀어주는 역할인 거죠. 이건 조금 다른 맥락이지만 외국에서는 세미콜론 모양의 문신을 하는 운동이 있더라고요. 자살을 막는, 아직 이어갈 이야기가 남았다는 의미로요. 을지로라는 곳의 재미있는 이야기가 패스트파이브의 세미콜론으로 연결되었으면 좋겠습니다. 컬러도 다양하게 사용했는데요, 홍대의 컬러와는 약간 다르게 네온 컬러를 썼어요. 재질도 독특하게 유리나 거울을 많이 사용해봤고요. 작가들과 협업해서 재미있는 작품도 많이 써보려고 해요. 완성이 어떤 모습으로 될지는 모르겠지만 초기 컨셉은 이렇게 잡아보았습니다. 많이 기대해주세요. Q. 저도 많이 기대가 되는데요, 일을 하면서 가장 힘든 부분은 어떤 점인가요? 또 가장 보람 있는 순간은요? 요즘 너무 바빠서 개인 시간이 없어요. 최근 한 달 동안 일이 몰려서 힘들었거든요. 컨디션 조절을 잘 해야죠. 이제 점점 나아질 것 같아요. 카페 때문에 힘들기는 했지만 어떻게 나올지 궁금하네요. 반대로 가장 보람 있는 순간은 공간이 예쁘다는 이야기를 들을 때죠. 작업한 공간에서 실제로 생활하는 커뮤니티 매니저분들이 입주 멤버 분들의 칭찬을 전달해줄 때도 뿌듯하고요. 지점 오픈 파티를 할 때도 반응이 좋아서 감사했어요. 그리고 공간이 완성됐을 때도 보람 있죠. 마무리 작업을 할 때는 너무 힘들어서 보기 싫을 때도 있지만 막상 완성하고 나면 정말 뿌듯해요. 특히 패스트파이브의 공간은 처음부터 끝까지, 액자 하나까지 직접 고르면서 완성하기 때문에 더 각별하죠. 제가 작업한 스케치업 그대로 구현된 공간을 보는 경험이 흔한 게 아니거든요. 예전에 건축 회사에 다닌 적이 있는데, 건축은 길면 도시 계획부터 시작해서 완성까지 10년 정도 걸리기 때문에 결과를 보기 힘들어요. Q. 패스트파이브에는 언제, 어떻게 합류하게 되셨나요? 작년 10월 23일경에 입사했어요. 한국에 들어온 지 얼마 안 되었을 때라서 기억해요. 11호점, 그러니까 바로 여기 삼성2호점 작업부터 시작했죠. 이제 일 년이 다 되어가네요. 많은 장서와 식물로 꾸며진 패스트파이브 삼성2호점 라운지이전에는 건축 회사와 인테리어 회사에 다녔어요. 여기 오기 직전에는 샌프란시스코에 있는 구글 헤드쿼터 작업을 했는데, 새로운 시도를 많이 하는 곳이라 이상하고 재미있었어요. 사무실을 사용자 마음대로 꾸밀 수도 있는 식이었죠. 그런 작업을 해봤기 때문에 패스트파이브에 와서도 라운지 같은 공간을 수월하게 꾸밀 수 있었던 것 같아요. 일반 사무실만 해봤으면 조금 힘들었을 거예요. Q. 패스트파이브에서 이루고 싶은 목표나 가치가 있으시다면?커뮤니티 매니저들의 의견을 더 듣고 싶어요. 요즘은 회사 규모가 커지면서 커뮤니티 매니저들을 만날 기회가 줄었거든요. 커뮤니티 매니저가 지점에 대해 가장 잘 아는 분들이잖아요? 그 의견을 바탕으로 기존 지점을 리모델링 할 기회도 있었으면 좋겠네요. 물론 지금의 우선 순위는 신규 지점의 확장이지만, 이미 있는 지점을 더 발전시키는 과정도 의미있을 것 같아요. Q. 혼자만의 시간이 생긴다면 뭘 해보고 싶으신가요?호주로 여행을 가고 싶어요. 요즘 호주 레퍼런스를 많이 보고 있어서, 직접 가서 호주 공간을 실제로 보고 싶네요. 호주가 카페도 독특한 것들이 많고, 트렌디하고 인기 많은 디자인들이 호주 것인 경우가 많아서 놀랐어요. 카라반이라는 카페가 한국에도 들어와 있는데, 호주 카페예요. 컬러를 독특하게 사용하고 특이하더라고요. 그래서 호주에 한번 가보고 싶어요. Q. 지금까지 영주 님의 이야기를 듣고 공간 디자인이라는 일에 관심이 생긴 분들도 많을 것 같은데요, 어떤 공간 디자이너와 함께 일하고 싶으신가요?새로운 것을 항상 시도하고, 그걸 재미있어 하는 분이었으면 좋겠어요. 커뮤니티 매니저를 비롯해서 다른 사람들과 소통하는 걸 좋아하는 분이요. 기본기를 비롯해서 이런 지점들이 잘 맞는다면 정말 재미있게 일하실 수 있을 거예요. Q. 이제 마지막 질문입니다. 좋은 오피스 공간 디자인이란 어떤 것이라고 생각하시나요?오피스의 종류에 따라 다르겠지만 패스트파이브 같은 공유오피스의 경우, 편안한 공간이어야 하는 것 같아요. 트렌디하기도 하면서 편안해야 하니 공유오피스 공간에는 신경을 많이 써야죠. 실제로 공간을 이용하는 사람들의 목소리가 가장 중요하다는 영주님의 이야기가 기억에 남는 시간이었습니다. 매일 가장 오랜 시간을 보내는 공간인 사무실이 우리의 삶과 분리되지 않도록 하는 노력이 패스트파이브 곳곳에 스며들어 있다는 게 새삼 와닿네요.저희는 다음 인터뷰로 돌아오겠습니다. 읽어주셔서 감사합니다! =)- 패스트파이브 마케팅팀 드림
조회수 941

디자이너는 뭘, 왜, 어떻게 공부해야해요?

PPT를 시작으로 디자인이란 걸 시작하고 나서 가장 난감했던 것은 툴이었어요. 포토샵이나 일러나 인디자인, 스케치 등 정말 다양한 툴이 있었지만 당시엔 레이어가 알록달록 크레이프 케익에나 쓰이는 건 줄 알았지 도대체 레이어와 벡터가 뭔지 마스크가 어쨋다는 건지 이해하기 힘들었거든요. 레이어가 뭐 어쨌다는..처음엔 포토샵을 공부하고 싶어서 책을 사보았습니다. 대부분의 기술서들이 그렇듯 일단 저장하고 켜는 법부터 알려주는데 (더블클릭은 나도 안다고!!!...) 보통 자잘자잘한 이야기로 1,2장이 후딱 지나가는 터라 정작 내가 궁금한 것에 대해선 중반부가 지나서야 가볍게 건드려주고 지나갈 뿐이었다능...감질맛나서 막 잠 못자고 이불차고...친구에게도 물어보고 어깨너머로도 배워보았어요. 개인적으로는 매우 훌륭한 학습법이었다고 생각되요. 원래 발등에 불떨어지고 심장이 두근대는 데드라인의 압박은 학습능력을 초인적인 수준으로 높여주는 법이니까요. 게다가 친구의 약간 짜증섞이고 대충 알려주는 그 특유의 말투가 뭔가 다급함과 짜증을 동시에 불러오면서 승부욕도 올려주기도 하더라구요. 그..그건 뭐 누른거야?...강의를 들어보기도 했어요. 보통 이런 테크닉강의들은 예제를 실습해보고 실시간으로 궁금한 것들을 물어볼 수 있다는 장점이 있었지만, 정작 정해진 테크에 따라 실습을 하다보면 내가 원하는 것들을 아슬아슬하게 비껴가는 스릴을 느낄 수 있었어요. 끝나고 나서 물어보려고 하니 다음 스케쥴이 엄청 바쁜 강사님이었던 터라 슝 가버리시더라구요..유튜브와 네이버블로그는 좋은 스승이었어요. 어쩜 이리도 금손들이 많은지 조금만 웹을 뒤져보면 아주 굉장한 기술들을 습득할 수 있었죠. 단점이 있다면 유튜브를 보다보면 자꾸 빨간도깨비님의 마블 유니버스 세계관정리를 보고있거나, 다음웹툰을 자연스럽게 켜고 이태원클라쓰를 정주행하다가 새벽4시가 되곤 했어요. 이외에도 유튜브 중에는 금손 외국친구들이 올려놓은 영상이 꽤나 많아서 공부를 하기 위해 또 다른 공부(영어)를 해야하는 (마치 가위가 필요해서 가위를 샀는데, 그 가위를 개봉하기 위해 또 가위가 필요한) 상황이 벌어지기도 해요. 물론 이런 난관을 즐기는 사람이라면 도전해보도록 해요. 영어와 디자인을 동시에 잡을 수도 있어요. 전 못 잡았어요. 네이버블로그는 다 좋은데 광고가 너무 많아서 블로그 들어가서 이것저것 보다보면 광고가 반이거나 패치 다운받으라고 첨부걸어놓은 파일에 악성코드가 심겨져 있는 경우가 종종 있었던 터라 파란 화면을 망연자실 바라봐야 하는 경우도 있었어요. 포맷 2번했어요.이모티콘 표정도 맘에 들지 않아...이것저것 눌러보며 스스로 깨닫는 자급자족 방법도 있지만 추천하진 않아요.  이 방법으로 상당히 많은 것들을 깨달았지만 포토샵을 4번 정도 다시 깔아야 했어요. 시간 아까워요. 지금 생각해보면 단축키하나만 누르면 될 일이지만, 당최 어떻게 초기화를시키는 지 몰랐던 터라 먹통이 된 포토샵을 바라보며 눈물을 삼키곤 했답니다.(왜 꺼지질 않니...)하지만 툴이나 기능적인 부분 이외에도 디자인 기초와 이론부분에서도 공부할 것이 산더미였고, 심지어 이것저것 융합된 다른 영역도 함께 공부를 해야 함을 깨달았어요. 내 키보다 훨씬 높은 디자인서적 코너에 멀뚱히 서서 도대체 무엇부터 읽어내려가야 할 지 당최 짐작조차 할 수 없었지요. 광대한 우주크기 비교 동영상보고 난 후 현자타임 온 듯한 무상함을 느끼며 그냥 아무 책이나 빼들었고, 그렇게 대책없는 디자인 공부가 시작되었어요. 바보같은 시행착오 끝에 깨달은 몇 가지를 적어봤어요.나는 영웅이 아니었...1. 그냥 아무 책을 빼든 후 그 책에서 이해가 안가는 것을 다른 책을 보며 답을 찾는 꼬리물기 방식을 택했어요. 예를 들면 이런 거예요. 도시디자인관련 책을 보니, 스트리트(street)와 애비뉴(Avenue)와 로드(Road)와 웨이(Way)는 다르대요. 어떻게 다른 지 대강 설명이 나와있긴 해요. 하지만 어원이 궁금해졌어요. 그래서 외국어 코너에 가서 어원 어쩌고 하는 책을 찾아서 찾아보기로 해요. 어원을 보니 재미있어요. 어원엔 역사와 종교에 관련된 내용이 많아요. 유럽은 고대 마차로 쓰던 길을 그대로 포장해서 도로로 활용했던 터라, 폭이 넓지 않아요. 그래서 엄청나게 큰 대형 부품을 운반할 수 없었어요. 터널을 넘어갈 수도 없었죠. 우주항공 산업이 뒤늦게 발달한 것도, 실은 '좁은 도로로 로켓제조부품들을 옮길 수 없어서' 라는 얘기도 있어요. 좁은 도로가 문화에 어떤 영향을 미치는 지 궁금해져요. 세계사 코너에 가서 '길'에 관련된 책을 찾아봐요.이 방법은 꽤나 비효율적이고 많은 시간을 필요로 하지만, 그 결과를 톡톡히 볼 수 있는 방법이었어요. 다양한 영역을 넘나들 수 있고, 찾고싶은 질문이 명확한 터라 질적 측면에서는 꽤나 엄지척이랄까요. 제가 좋아하는 방식이지만, 평소에 딱히 질문이 없거나 내면에 황수관박사가 없는 분이라면 그냥 추천하지 않아요. 나에게 궁금증따윈 없다구우우우!!!2. 디자인은 인지심리학과 많은 관련이 있지만, 무작정 심리서적을 빼들어선 별 의미가 없었어요. 게다가 요즘은 온통 위로해줄께, 괜찮아, 니가 잘한거야, 퇴사해, 우쭈쭈, 그냥 가마니처럼 가마니있어도 돼~ 느낌의 위로 심리서적이 많아서, 내가 필요한 걸 찾기가 어려울 수도 있어요. 차라리 디자인코너로 가세요. 그리고 평대말고 서가로 가세요. 그러면 뭔가 매니악해보이고 재미없어 보이는 책들이 있어요. 그 중에 디자인과 심리와 연관된 책들이 종종 있어요. 그런 걸 읽어보도록 해요. 특히 마케팅 등과 연관된 '소비자, 서비스, 심리, 구매 등의 단어가 들어가 있으면 한 번쯤 읽어보세요.'땡스북스나 현카 디자인라이브러리를 가보도록 합시당~3. 혹시 본인이 뇌과학이나 생물쪽에 관심이 많다면 인지체계에 대한 뇌과학 관련 서적을 읽어보는 것을 추천해요. 아주 흥미진진할 뿐더러, 단순히 심리학이론만을 습득하는 것보다 좀 더 체계적인 이해가 가능한 것 같아요. 특히 인지구조와 시지각에 관련된 내용을 익히면 재미있는 것들을 알 수 있어요. 개인적으론 쉬운 책들은 길벗출판사에서 나온 '좋아보이는 것들의 비밀' 시리즈부터 시작해서, 데이비드 이글먼씨가 지은 '더 브레인' 이란 책을 한 번 읽어보시길 바라요. 수면제로도 적당하고 두께감도 있어서 배게로도 좋아요.책은 배게다.4. 시간이 없다면, 카카오브런치 등에서 잘 쓰여진 디자인관련 글들을 발췌독하는 것도 좋은 방법이예요. 브런치가 처음엔 오글이토글이 감성글이 가득하더니 요즘엔 개꿀팁들이 가득한 정보의 왕국이 되었어요. 더불어 pxd 블로그에 게시글들은 꽤나 도움이 많이 되었어요. IDEO에서 나온 HCD(human centered Design) 프로그램도 뭔가 새로운 인사이트를 주는 데 도움이 되었어요. 그 밖에 페이스북 그룹등에서 디자이너 모임같은 곳에 가면 싱싱한 트렌드소식들을 심심치 않게 공유해주더라구요. 체계적으로 뭔갈 배운다기 보단 순간순간의 인사이트를 자극시켜주는 데에 효과적인 것 같아요.   5. 툴은 책을 사서 보는 것보다 어깨너머 서당개 훈련법이 훨씬 많은 도움이 되었어요. 돈주고 배우는 것보다 오히려 그냥 친구 어깨너머로 뭘 누르는지 어떻게 하는지 슬쩍슬쩍 보는 게 안잊혀지더라구요. 그러나 RGB와 HSB의 명확한 정의나 이미지파일간의 특징 등 현장에서도 미쳐 배우지 못하는 디테일한 부분들을 정리하기에는 책이 훨씬 좋았어요. 그런 관점에서 보면 오히려 기술서적의 1,2장에 적힌 자잘한 지식들이 오히려 책이 가지는 메리트가 아닐까 싶어요.야 그거 어떻게 하는거야?6. 디자인의 역사는 정독하진 않더라도 한번쯤 훑어보는 것을 추천해요. 요즘엔 일본과 북유럽디자인에 대한 이야기가 많이 책으로 나오고 있지만, 디자인의 역사는 생각보다 깊어요. 정립된 것이 얼마 되지 않았을 뿐이죠. 세계사와 연관지어 읽으면 개인의 흥미여하에 따라 꽤나 도움이 많이 될 수 있어용. 만약 역사라면 막 피부가 빨개지고 재채기가 나오는 체질이라면 1860년대에 시작되었던 미술공예운동부터 아르누보에 이어 포스트모더니즘까지 이어지는 근 150년간의 미술사 정도만 체계를 잡아놓아보아요. 물론 이 부분은 당최 이해가 안될 수 있고 굉장히 단기기억에 머물러요. 내일 정도면 사라진달까요. 하지만 근본은 알아야 할 것 아니겠어용. 재미지게 강의해놓은 미술사 강의가 있다면 좋을 것 같아요.7. 다른 영역의 직무서도 한 번쯤은 훑어보아요. 디자인 공부만 하기에도 벅차죽겠는데 남의 일까지 신경써야 하냐! 싶겠지만, 독립한 디자이너에게 남의 일이 어디있겠어요. 마케팅부터 세금관리까지 오롯히 혼자 견뎌내야 하는 게 개인사업자의 운명이예요. 디자이너가 아닌 사업자라는 관점에서 경영서와 타직종 실무서도 통독 정도는 해보는 것을 추천해요.8. UX와 서비스디자인 관련해선 사실 서적에서도 많은 부분을 다루지 못하더라구요. 오히려 웹이나 논문을 위주로 공부했었는데 이 쪽이 훨씬 많은 도움이 돼요. 우리나라에는 해당 디자인영역이 들어온 지가 오래지 않아(사실 본래 역사자체가 짧긴 하지만) 자료가 그렇게 많은 편은 아니예요. 해외에서 나온 논문의 번역본이나 케이스스터디 등을 통해 공부해는 것이 좋을 듯 합니당. 다만 이 부분은 다양한 사례와 인사이트가 필요한 부분이라고 생각되기에 혼자 독학하기보단 몇 명 모여서 케익과 커피를 동반한 수다 겸 스터디모임을 만들어보거나 참여하는 방법을 추천해요.9. 어도비 사이트는 굉장히 많은 기능팁들이 있어요! 그냥 공식사이트의 FAQ정도겠지라고 생각했는데, 의외로 다양한 인사이트 콘텐츠나 기능팁들이 올라와있어서 신기방기했어요. 플랫폼 방식이라 다양한 사람들이 노하우를 공유하고 있더라구요. 설명도 상당히 친절하게 되어 있어서 가끔 툴 다루다가 막히면 어도비 사이트에서 질문을 하곤 했어요. 대부분의 문제라는 것들이 다들 도토리 키재기라서 너무 이상한 문제만 아니면 해결책을 찾을 수 있었어요. 어도비 툴 쓰다가 뭔가 뻥나거나 오류터지면 종종 이용해보도록 해요.10. 디자인 공부는 하루에 몇 시간!~ 이런 식으로 정해놓고 할 수 있는 성격이 아니었던 것 같아요. 범위와 깊이가 너무 다양해서 이슈가 생길때마다 바로바로 찾아보는 실시간 검색형이 훨씬 효율적이었어요. 책도 완전 정독을 하면서 문장 하나하나를 음미하기 보단 빠르게 넘겨가면서 필요한 내용만 쏙쏙 뽑거나 내 궁금증에 대한 답을 찾고 빠지는 식으로 학습하는 게 현실적이랄까요. 사실 일끝나고 오면 피곤해 죽겠는데 언제 책상에 앉아서 정자세로 책을 읽고 있겠어요.참고로, 저도 요즘 새로운 영역을 공부해보고 있답니다. 여기저기 너무 많이 들리는 블록체인이란 기술이예요. 디자인과 블록체인이 어떤 식으로 연결될 수 있을지 아직은 잘 모르겠지만, 확실히 디자인은 외적인 영역과의 컨버전스가 중요한 것 같아요. 공부하면서 정리해서 하나하나 올려보도록 할께요. ( 저도 분명 잊어먹을 테니...나중에 와서 다시 읽어야 한다능)
조회수 778

[인터뷰] 임팩트 베이스캠프 7기 | 디자인씽킹 B조

대중교통을 타고 이동할 때도, 집에서 밥을 먹을 때도 프로젝트를 고민하며 숨가쁘게 달려오고 있는 임팩트 베이스캠프 7기! DT프로젝트 팀별 인터뷰 세 번째 조를 만나보았습니다.권수연, 박소은, 엄석준, 이승연, 홍예진 베이스캠퍼가 속해있는 B조는 누구에게 공감하고, 어떤 사회문제를 해결하고자 하는지 볼까요?INTERVIEW .Q1. 하나의 키워드로 본인에 대해 소개해주세요!▲ 왼쪽부터 시계방향으로 권수연 님, 박소은 님, 엄석준 님, 홍예진 님, 이승연 님수연: “Arise, Shine” 나다움을 찾고자 하는 사람이에요. ‘교육’을 통해 다른 사람도 본연의 모습으로 살아갈 수 있도록 올바르게 세워주는 것이 제 비전입니다.소은: “작은 변화로 큰 변화를 이끄는 것” 작은 포인트를 교정하면 변화를 이끌어 낼 수 있다고 생각해요. 그 작은 포인트를 찾아내는 사람이 되고 싶습니다.석준: “대기만성형 인간” 지금은 스스로 어느정도 그릇을 채워가고 있는 단계라고 보는데요. 늦었다고 느껴질지 몰라도 완성되면 알찬 나를 기대해요.승연: “순간”이요. 지금 이 순간이 가장 젊을 때이고 결국 시간은 지나가고 있기 때문에 프로젝트 팀 혹은 가족, 지인과 함께 있을 때 그 자체에 집중하려고 노력하는 사람이에요.예진: “하고싶은 것 하고 살자” 제가 추구하는 모토에요. 내가 진짜 하고 싶은 걸 해 나가며 채워가는 것이 후회없는 삶이라고 생각해요.Q2. DT 프로젝트 문제정의의 발전(혹은 공감) 과정이 궁금해요▲ 프로젝트 주제 선정을 위해 논의 중인 B조의 모습예진: ‘장애인의 체육활동 증진’이 저희 팀의 첫 주제였는데요. 의미가 있을 것 같아서 선정하긴 했지만 다섯 명 모두 관심이 없던 분야라 공감 자체가 낮은 상태에서 시작했어요. 팀원의 지인을 통해 20대 시각장애인을 인터뷰하게 되었는데 그 과정에서 우리 팀이 더 공감할 수 있도록 대상을 구체화하여 시각장애인 문제를 다루기로 했어요.소은: 시각장애인이 겪는 불편함은 스포츠 활동 외에도 참 많더라고요. 인터뷰를 통해 우리가 생각지도 못한 문제가 있었다는 걸 인식하게 되었어요. 시각장애인의 생활 속 불편이 무엇인지에 대해 고민하고 ‘진짜’ 문제를 찾아가는 중이에요.수연: 저는 평소에 ‘교육’이라는 키워드에 몰입되어 있었기 때문에 개개인이 가진 잠재력을 들춰내는 변화에 초점을 맞추고 있었거든요. 그런데 프로젝트로 해결하고자 하는 문제는, 불편함을 바꿔주는 변화인거죠. 변화의 종류에 대해 알아가고 있는 중이에요.Q3. ‘시각장애인의 생활 속 불편함’에 주목한 B조, 어떤 프로토타입을 제작했나요?승연: [시각장애인은 공중화장실의 성별을 쉽게 구분하기 어렵다]는 불편함에 공감하고, 빠르게 프로토타입을 만들어 보았는데요. 인터뷰를 통해 시각장애인이 지하철 공중 화장실에서 성별을 구별하기 위해서는 점자를 만져봐야 한다는 것을 알게 되었어요. 그 점자 위치를 찾으려고 화장실 앞에서 헤매는 과정이 민망하지 않을까 생각했고, 점자가 아닌 유도블록으로 성별을 구분할 수 있도록 프로토타입을 제작하게 되었습니다.예진: 수수깡으로 미니 유도블록을 만들었다가 찰흙으로 실제 크기에 해당하는 프로토타입을 또제작했는데요. 현장 테스트 결과, 시각장애인 분들은 실제로 후각과 청각을 사용해서 구별하고 계셨어요. 여성 분들의 향수 냄새 혹은 구두 소리, 목소리 등을 통해서요!석준: 또 다른 프로토타입 중 하나는 [시각장애인은 식사를 할 때 반찬의 위치를 찾는 것이 어렵다]는 문제에 공감하여 만들었는데 아직 현장 테스트 전 단계이며, 인터뷰 섭외 중입니다.Q4. 이제 절반이 넘는 시간을 달려오셨는데, 팀으로 프로젝트를 진행해오며 느낀 점은 무엇인가요?소은: 저는 경영학과이기 때문에 팀플 경험이 많은데 보통 다수의 의견과 제 생각이 다르면 입을 열지 않았거든요. 그런데 DT 프로젝트 팀은 개인의 생각을 모두 존중해주고 오픈마인드로 서로의 이야기를 들어주는 것 같아요. 문제정의 같은 경우도 팀원 중 한 사람이 공감이 안되면 왜 공감이 안되는지 들어주고 함께 고민해줘요. 서로에게 자유롭게 생각을 말할 수 있는 이야기의 장이 열려 있다고 해야 할까요?수연: 저는 보이지 않는 가치를 발견하게 되었다는 점이 정말 좋아요. 또 ‘실패해도 된다’는 것을 알려주는게 디자인씽킹이라고 생각해요. 배움을 즐기고 교육자가 되고 싶은 학생으로서, 인사이트를 얻고 실행하는 이 모든 과정이 성찰의 습관을 만들어 주는 것 같아요. 또 저는 지금 ‘완벽하지 않은 나를 수용하는 훈련’을 하고 있다고 말씀드리고 싶어요.승연: 저도 실패해도 괜찮다는 말을 담아 두려고 노력하는 중인데요. 저는 완성된 상태에서 사람들에게 보여주고자 하는 강박 때문에 실패에 대한 두려움이 굉장히 크거든요. 또 저는 축산식품공학을 공부하고 있어서 과 특성상 팀플이 거의 없거든요. 각자의 역할을 ‘분업’하여 진행했던 팀플만 경험해보았는데 DT 프로젝트를 통해 ‘협업’에 대한 새로운 경험을 하고 있어요.예진: 이전에 팀 내에 공감하는 사람이 있으면 좋고 아니면 어쩔 수 없다는 주의였는데 공감의 중요성을 깨닫고 있는 중이에요. 공감하는 방법이 개념화되어 있는게 디자인씽킹이라고 생각하는데 저한테는 굉장한 센세이션이었어요. ‘공감을 이렇게 활용할 수 있구나’를 알게 되었습니다.Q5. 덧붙여서 IBC 인터뷰 단골질문을 여쭤볼게요! DT수업과 SL수업의 차이점은 무엇이라고 생각하시나요?수연: 우선 두 수업 모두 ‘Learning by doing’이라는 공통점을 가지고 있다고 생각해요. 차이점은 SL 수업이 나를 곤두세우면서 경험하게 한다면 DT 수업은 팀원끼리 서로의 온기를 느끼며 경험하게 한다는 것이에요. 비유를 들어보면 SL 수업은 나를 비춰보는 거울이고, DT 수업은 다른 사람 속에 내가 들어가 있는지(공감하고 있는지) 보는 활동인 것 같아요. 둘 다 정말 잘하고 싶어요.석준: 저는 두 수업 자체를 분리하는게 부자연스럽다고 생각하지만 SL 수업은 어두운 곳에서 무언가를 찾아가는 느낌이라면 DT 수업은 어느정도 조성된 안전지대에서 프로젝트를 하는 느낌이에요. 또 SL 수업에서 배운 것들을 직접 몸으로 부딪치면서 배우는 것이 DT 수업이라고 생각합니다. 예진: 저는 ‘감성과 이성’이라고 간단 명료하게 설명할 수 있을 것 같아요.Q6. 임팩트 베이스캠프의 모든 과정을 마친 후, 기대하는 것은 무엇인가요?소은: 사회를 위해서 무언가 하길 원하는 IBC 베이스캠퍼들과 지속적인 커뮤니티를 이어가길 원해요. 비단 비슷한 커리어를 갖게 되는 것만을 의미하는 게 아니라, 각자 다양한 자리에서 사회문제를 고민하고 해결할 때 서로 독려해주는 관계가 되었으면 하는 기대가 있습니다.수연: 항상 최상의 환경과 컨디션에서 프로젝트를 진행해야 된다고 생각했는데, 완벽하지 않아도 우리가 팀원으로 함께 할 수 있다는 것을 누리는 사람이 되었으면 좋겠어요.석준: 수업 초반에 제 DT 프로젝트 목표는 뚜렷한 아웃풋이 있어야 한다는 것이었어요. 평소에도 ‘결과물’이 중요하다고 생각하는 사람이었는데 그러다 보니 ‘과정’에서 배우는 것을 소홀히 했던 것 같아요. 그런데 이제는 결과에 크게 연연하지 않고, 어떤 프로젝트에 참여하더라도 과정을 통해 배운 나만의 무기를 갖추는 것이 목표에요.▲ 눈오는 날, 특별한 단체사진을 남기게 된 B조시각장애인이 일상생활에서 겪는 불편함을 느껴보고 공감하고자 집에서 불을 꺼둔 채 생활해보는 노력까지 마다하지 않는 B조. 프로젝트의 결과를 떠나 진심으로 배움을 즐기고 있는 베이스 캠퍼들의 모습이 참 아름답습니다. 우리의 배움과 채움이 더 나은 세상을 위한 나눔으로 이어지길 기대합니다. 다음 인터뷰로 돌아오겠습니다 :)#루트임팩트 #헤이그라운드 #임팩트베이스캠프 #디자인씽킹 #체인지메이커 #전략적리더십 #소셜벤처 #사회공헌
조회수 1556

어니스트펀드 디자인, 고객을 먼저 배려하다.

지금 세상은 모두 새롭게 디자인되어가고 있다. 우리가 물건을 구매하고 사용하는 방법도 그에 따른 생활 방식도 바뀌고 있다. 이런 흐름 속에서 우리가 접하는 가장 보수적인 서비스 중에 하나인 금융서비스도 피해갈 수 없다. 이렇게 빠르게 바뀌는 시장 상황에 고민해야만 하는 부분은 이윤 창출만이 아니라, 비즈니스의 장기적인 성공을 돕는 탄탄한 디자인 전략이다.Adam Grant펜실베니아 와튼스쿨의 경영학 교수, Adam Grant는 'Give and Take'라는 책을 통해 진정으로 성공하기 위해서는 조건 없이 주변의 성공을 돕는 Giver가 되라고 강조한다. 열심히 일하고, 운도 따라주고, 실력까지 있다 해도 이익만을 추구하는 Taker라면 단기적인 목표를 이룰 뿐이라고 이야기하고 있다.바로 이 부분이 어니스트펀드에 합류하기 전 뉴욕과 서울에서 커머스, 엔터테인먼트, F&B, 소셜 등 다양한 서비스를 개발하며 가장 크게 느꼈던 부분이다. 고객이 인지하지도 못했던 어려움을 해결하고 당연하게 넘겼던 부분까지 섬세하게 배려하여 감동을 주었을 때, 단순히 매출을 올려주는 제품이 아니라 고객의 삶을 변화시키는 경험을 디자인했을 때, 그 서비스는 고객의 마음을 얻고 성공할 수 있었다.올해 1월 어니스트펀드 제품개발팀의 Head of Design으로 합류한 후, 가장 큰 고민이 바로 고객을 배려하는 디자인 전략을 세우는 일이었다. 어니스트펀드가 추구하는 정직, 신뢰, 미래, 안전 등의 가치는 보이지 않는 부분까지 고객을 배려해서 디자인해야만 얻을 수 있는 귀중한 자산이고, 현재 어니스트펀드는 Honest Design Thinking이라는 디자인 전략을 통해 다양한 고객을 배려하고 가치를 실현하는 제품과 서비스를 만들어가고 있다.  What is Honest Design ThinkingDesign Thinking이란 고객의 니즈와 욕구를 실현하는 전략과 개발 방법을 찾는 과정이다. 혁신적인 디자인 회사 IDEO의 CEO, Tim Brown은 다양한 제품과 서비스를 디자인하며 기업의 차별화를 위해서는 사업전략, 제품 개발, 마케팅 등 모든 프로세스에 Design Thinking 방법론을 적용해야 한다고 말했다. 이러한 Design Thinking을 어니스트펀드에 적용한 것이 바로 Honest Design Thinking이고, 어니스트펀드 팀원과 실제 고객들이 함께 참여했던 Honest Camp로 시작하였다. Honest Camp는 일방적인 인터뷰 방식이 아닌 고객과 함께 금융서비스를 직접 만들어가는 과정을 통해 진심으로 고객이 얻고자 하는 것이 무엇인지 공감하고 효과적으로 고객을 분석하였다. 이를 통해 서로의 말과 행동을 관찰하고, 생각과 감정을 파악하여 내재된 가치를 찾아나간다. 따라서 금융, 공기업, 프리랜서, 취준생, 워킹맘 등 20대 여대생부터 40대 유통 사업가까지 다양한 경험과 라이프스타일을 가진 사람들이 참여하였다.  Honest Camp를 통해 발견한 고객 가치와 분석 결과를 토대로 어니스트펀드의 신규 제품 및 서비스를 개발하고 평가하는 과정까지 진행되는데, 이 과정에서는 어니스트펀드의 디자이너부터 마케터, CFO, 대출 심사자, 서버 엔지니어, CS 담당자 그리고 대표까지 어니스트펀드를 책임지고 있는 모두의 의견이 반영된다.Honest Camp : IntroHonest Design Thinking 프로세스는 1) Honest Camp를 통해 고객을 최대한 깊게 공감하고, 2) 행동을 관찰하여 문제점과 기회를 발견한 후, 3) 빠르게 개발하여, 4) 사용성이 아닌 가치 실현을 평가하는 4가지 단계로 이루어져 있다. 하나하나 자세히 살펴보도록 하겠다.4 Steps in Honest Design Thinking1.  공감하기 (Persona + Empathy + Journey map) PersonaHonest Camp에서 Millennial과 GenX 고객 등 다양한 고객들을 성향에 맞게 팀으로 구성하였다. 서로에게 다양한 질문을 던지며 자신들을 대표하는 실질적인 페르소나를 팀별로 만들었다. 팀원들의 성격, 라이프스타일과 목표를 닮은 총 5명의 페르소나가 탄생했다.예를 들어, 김동준(32)이라는 페르소나는 Idealistic Freelancer으로 대표되는 남자이다. 이 시대를 자기 뜻대로 살아내는 Millennial 세대로서 자유롭지만 항상 바쁘고 영감을 받기 위해 여행을 자주 하는 등 자신을 위한 지출이 많다. 투자 경험은 많이 없지만 불로소득을 원한다. 지금보다 더 멋지고 자유로운 삶을 위해 이민을 고민한다.Honest Camp : PersonaEmpathy각 페르소나가 주로 어떤 말(Say)과 행동(Do)을 하는지, 무슨 생각(Think)과 감정(Feel)을 갖고 살고 있는지 깊게 논의했다. 또한 주위에서 보고(See) 듣는 (Hear) 것들은 무엇이 있을지 발견했다. 그리고 대표적인 어려움(Pain)과 꿈꾸는 것(Gain)을 공감했다. 예를 들어, 김동준의 어려움은 늘 주변을 챙겨야 하고, 수입은 안정적이지 않은데, 항상 자신을 포장해야 하는 압박을 느끼는 것이다. 반면 유명강사로 성공하고 싶고, 자수성가하여 자유롭게 살고 싶은 꿈이 있다.Honest Camp : EmpathyJourney map마지막으로 각 페르소나의 금융 관련 목표(1억 모으기, 내 집 마련, 대출 완납 등)를 선정하고 목표를 이루기 위한 Journey map을 팀별로 그렸다. 각 단계마다 어려움을 해결하기 위한 기능, 서비스, 콘텐츠, 상품 등 다양한 아이디어를 교환하고 감정 곡선을 추가하여 어려움이 해결되었는지, 원하는 가치를 이루었는지 확인했다. 당장은 현실적으로 불가능해 보여도, 창의적인 아이디어를 위해 상상할 수 있는 범위를 제한하지 않았다.Honest Camp : Journey mapHonest Camp : Journey map2. 발견하기 (Customer values + Idea map + MVP Scenario) Customer valuesHonest Camp에 참여한 다양한 사람들의 행동을 분석하고 페르소나를 연구한 결과 5가지 고객 가치를 발견하였고 아래와 같이 과감하게 공개한다.Idea map고객가치를 실현할 수 있는 기능, 서비스, 콘텐츠, 상품 등 신선한 아이디어를 논의하였고 비즈니스적인 영향력과 개발 리소스를 고려하여 최종 MVP (Minimum Viable Product)를 선정하였다. Honest Design Thinking : Idea mapMVP 시나리오각 페르소나별로 MVP 시나리오를 제작하고 다시 한번 회사 내에서 In-house 캠프를 열었고, 팀원들과 함께 우리가 선정한 MVP가 진정한 고객가치를 실현 할 수 있는지에 대해 다시 한번 검증하였다.  Honest Design Thinking : In-house Camp3. 개발하기(UX + Design + Prototype)본격적으로 하나의 서비스로 개발하기에 앞서 완성된 UX 및 디자인 전략에 따라 홈페이지 내 정보구조(IA), 사용자 경험 (Use-case scenario), 화면 설계(Wire frames), UI 디자인을 진행 중이다. 또한, 다양한 디자인 컨셉을 추출하고 발전시키는 동안 빠르게 프로토타입을 제작하여 Minimum Viable Product를 Most Valuable Product로 발전시키는 과정을 거친다. 4.  평가하기 (Evaluate)가장 중요하지만 놓치기 쉬운 것이 평가하는 과정이다. 고객가치과 사용목적이 자연스럽게 연결되도록 제품, 서비스, 콘텐츠 등이 올바른 자리에서 제 기능을 하고 있는지 확인하고 또 확인해야 한다. 현재 진행 중인 디자인과 프로토타입 평가가 완료되면 올해 안에 새로운 어니스트펀드를 만나볼 수 있을 것으로 기대한다.Outro다양한 팀원 그리고 고객들과 함께 만들어내는 Honest Design Thinking 과정에 정답은 없다. 그렇기 때문에 어떤 결과를 가져올 것인가에 대한 불안감을 느끼기도 한다. 대부분 이 과정이 어렵다고 느끼는 이유는 우리가 사는데 바빠서 본질적인 문제를 파악하고 효율적으로 해결할 기회가 많지 않았기 때문이다. 가장 중요한 스킬은 믿음이다. 나 자신과 주변을 먼저 파악하고 다른 이를 배려하는 마음에서 시작이 되어야 아무리 어려운 문제도 쉽게 해결할 수 있다고 생각한다.Steve Jobs, 2015Honest Camp에서 애플의 창업자인 스티브 잡스 영화의 마지막 장면에 대한 이야기를 했었다. 스티브 잡스는 위 장면에서 십 수년간 부인해왔던 딸, 이제 막 대학생이 된 리사에게 다가가기 위해 자신의 믿음을 아주 쉽게 설명하였다.I’m gonna put thousand songs in your pocket.잡스는 벽돌같이 투박하게 무거운 워크맨 대신 심플하고 가볍지만 1,000개의 음악을 자유자재로 들을 수 있는 아이팟을 만들기 위해 음악 시장 전체를 뒤흔들어야 하는 어려움이 있었지만, 그의 믿음은 고객의 삶을 변화시키는 새로운 비즈니스 모델로 이어지고 그가 사라진 지금도 성공을 거듭하고 있다. 대부분의 사람들은 지금까지 복잡하고 까다롭고 불친절한 금융 서비스에서 많은 기회를 알지 조차 못했다. 어니스트펀드는 금융을 정직하게 바꾸는 비전을 토대로, 저성장 저금리 저출산 등 답답한 시대를 살아가는 사람들이 자신의 자산을, 크던 작던 상관없이, 최대한으로 활용하여 원하는 삶의 방향으로 나아갈 수 있다고 믿는다. 고객들은 상품에 투자하기 전에 얼마나 정직하고 안전하게 어니스트펀드가 고객의 자산을 생각하고 관리하고 있는지에 집중한다. 그런 믿음이 쌓여서 우리는 지금까지 올 수 있었고, 앞으로도 어니스트펀드가 숫자보다 다양한 고객의 불편함과 삶의 가치에 집중하는 시간이 많아질수록 당신의 마음을 놓치지 않을 거라고 믿는다. #어니스트펀드 #디자인 #디자이너 #철학 #고객중심 #인사이트
조회수 3769

은밀한 로고 리뉴얼

은밀하게 변화되어온 로고들기업의 로고(CI, BI)는 보통 새로운 사업 방향을 적용한다든가, 시대의 트렌드를 반영하고자 할 때 리뉴얼을 진행합니다. 하지만 로고 리뉴얼에도 어느 정도 법칙이 있습니다. 바로 '은밀한 변화'인데요.사용자들은 자기가 아끼는 서비스의 급진적인 변화를 좋아하지 않습니다. 이미 애착 관계가 형성되었기 때문에 그 변화에 자신이 배제 혹은 소외되었다고 느끼면 일종이 배신감을 느끼기 때문이죠. (인용 : https://sky-glamping.com/1) 해서 많은 기업들이 로고 리뉴얼을 진행할 시에 아주 세밀한 부분을 조정하여 시각적, 구성적으로 개선하여 사용하는 경우를 많이 볼 수 있습니다.혹시 눈치 채신분이 계신가요? 데일리도 역시 약 세 달 전부터 국문로고를 '은밀한 리뉴얼'을 하여 사용 중이었습니다. 위에 보시는 바와 같이 국문로고와 영문로고의 시각적 통일성이 다소 떨어졌기 때문인데요. 해서 이번에는 데일리의 국문로고 리뉴얼 프로젝트를 소개해보려 합니다.Base로 기억해야 할 것먼저 비주얼 디벨롭 작업이 들어가기에 앞서 데일리에서 지정한 브랜드 디자인 키워드를 원칙으로 기본적으로 지켜야 할 시각적 요소들을 파악합니다. 또한 앞서 말했듯이 국문로고 리뉴얼의 모토가 영문로고와의 시각적 통일성이 다소 떨어진다는 이유였기 때문에 영문로고와 통일시켜야 할 시각적 요소를 파악합니다.영문로고의 쉐입 특징시안 작업과 자간 조절위의 고려해야 할 내용을 바탕으로 러프하게 시안 작업을 진행합니다. 이를 크리에이티브 팀 내에 공유하고 논의를 통해 하나의 방향으로 좁힌 후 디벨롭을 진행합니다.많은 시안 중 선택된 시안자간조절 작업의 일부특히나 국문로고의 경우는 자간 조절을 어떻게 하느냐에 따라서 느낌이 천차만별로 달라집니다. 또한 가이드의 기준을 어느 글자에 맞추느냐에 따라서도 느낌이 확연하게 차이가 나죠. 위에 보시는 바와 같이 변형된 시안에서 두께를 조절하고 각각 두께에 따른 자간 조절을 디테일하게 설정합니다. 또한 글자 간 세로 크기를 동일하게 적용해 보는 등 가장 안정적인 형태를 만들어 나가는 작업을 거칩니다.자간 조절이 최종적으로 완료되었다면 국문로고와 함께 사용되는 브랜드 슬로건도 해당 자간과 쉐입으로 변경하는 작업을 진행합니다. 아래처럼요.국문로고와 함께 쓰이는 브랜드 슬로건결과물최종적으로 위와 같은 쉐입이 완성되었습니다. 기본 서체로 제작되어있던 국문로고에 비해 더 안정적이고 주목성 높은 형태를 띄고 있습니다. 로고가 제작되었다면 로고 가이드도 빠질 수 없겠죠? 로고 활용 가이드 제작을 끝으로 국문로고 리뉴얼 프로젝트가 마무리됩니다.로고 활용 가이드에 포함된 국문로고 가이드마치며모두가 생각하는 좋은 브랜드의 기준은 다를 수 있습니다. 데일리가 추구하는 브랜드는 당연하듯 자연스럽게 고객에게 스며들어 라이프스타일의 일부가 되는 것입니다. 그렇기 때문에 본 프로젝트처럼 은근히 그리고 서서히 변화되는 과정이 많은 것 같다고 생각이 됩니다.데일리호텔을 더욱 데일리호텔스럽게. 그러면서 더욱 탄탄한 데일리호텔만의 브랜드를 전달해 드릴 수 있도록 앞으로도 노력하겠습니다 :)기획/진행 : Creative팀작성자 : Creative팀 Blair Ahn#데일리 #데일리호텔 #디자인 #디자이너 #디자인팀 #로고 #리뉴얼 #인사이트 #후기 #일지
조회수 1565

슬라운드 브랜드 아이덴티티(B.I) 개발기 - 3화

[브랜드 기본요소 중 첫번째.  로고와 심볼만들기]지난 2화에서 슬라운드 브랜드 아이덴티티 개발방향설정을 위해 브랜드 기본요소들이 적용된 현상황을 진단하고,  슬라운드가 추구하는 브랜드 철학과 가치를 살펴봤습니다.이번 글에서는 앞서 설정한 개발방향을 토대로 탄생한 브랜드 기본요소들에 대해이야기해보려고 합니다.1. 먼저 가장 중요한 로고 개발 배경.로고는 브랜드의 이름표 입니다. 앞서 멋있는 말들로 설정한 브랜드 철학과 핵심가치들을  이 작은 이름표에 어떻게 녹여내면 좋을까요? 슬라운드 철학에서 도출해낸 디자인 키워드들슬라운드의 철학을 디자인적으로 풀어내는 단게!1) 첫번째 개발 포인트 : 힘을 너무 빼지도 말고 주지도 말고 '균형찾기!'단순히 예쁘고 보기좋은 이미지를 만들기에 앞서 슬라운드의 철학을 잘 꾀어낼 수 있는 이미지를 찾는 작업을 시작했습니다.사실 슬라운드의 브랜드 철학과 가치를 말로만 바라보면진지하고, 정직하고, 집념있고, 전문적인 이미지들로 가득차서 매우 무겁게 느껴져요.글자 그대로 진정성과 신뢰가 키워드니까 진지하게 궁서체? 장인처럼 볼드한 세리프로?여러 서체들로 슬라운드를 바라보는데 무언가 계속 거리감이 느껴졌습니다.로고 스터디의 흔적들.. 서체를 새로 만들어야 하나.. (방황중)진정성과 신뢰와 같은 가치는 이미지로 포장하고 '나 믿음직스럽습니다. 진지해요.'하고힘을 준다고 생기는 게 아닌 것 같았어요.오히려 힘을빼고 덜어내고 담담하게 나의 자리에서 이야기하는 모습,포장하고 꾸미기보다 본질에 충실한 모습 등이 슬라운드가 추구하는 진정성과 좀더 가깝게 느껴졌어요.그래서 볼드하고 장식된 느낌이 없는 산세리프 서체들로 다시 적용해보기 시작했습니다.힘을빼려는 의도가 있긴 했지만 또 너무 베이직한 느낌의 이미지가 되어버리니너무 약해보였어요. (슬라운드는 강한데..)그래서 또다시 산세리프냐.. vs 세리프냐..의 고민이 시작되었습니다.우리의 사장님들은 나에게 많은 시간을 허락해주지 않는데..조금씩 조급해지기 시작했어요..ㅋㅋ그러다 문득 중도를 택해보기로 합니다.바로 길산스(Gil Sans)! 모더니즘을 대표하는 서체 - 길 산스 / 창시자 에릭 길 (인상부터 강렬..)20세기 모더니즘을 반영한 대표적인 두 가지 서체가 있습니다.바로 독일의 푸투라(Futura)와 영국의 길 산스 (Gil Sans) 인데요.두 서체 모두 타이포그래피 역사에서 매우 중요한 서체들로 탄생 이후 현재까지여러 분야에서 많은 사랑을 받고 있지만, 전통성 계승이라는 부분에서 차이가 있습니다.제가 선택한 길산스는 전통과의 소통을 통해 탄생한 실험적인 서체입니다.영국을 대표하는 실험적인 서체  길산스!모던한 산세리프의 기하학적인 형태와 골격을 유지하고 있지만, 전통적인 세리프가 가지고 있는 모양과 비례를 그대로 적용한!즉, 산세리프의 간결함과 세리프의 우아함을 잘 조화시킨 '융합형 서체' 입니다.당시 유럽에서 유행하던 모더니즘의 일환인 '실험 정신'에 기인한 시도라고도 평가받고 있고,일반적인 모던서체들과 비교했을때, 보다 무게감 있는 비례임에도 불구하고투박하기보다 은은하고 우아한 느낌이 듭니다. 슬라운드 로고 중간단계슬라운드에 적용해보니 기본적인 산세리프보다 힘이 좀 더 생긴 느낌이에요.다만 길산스의 'S'에 세리프의 붓터치가 너무 많이 남아있어서 스르르 잠드는 편안한 인상을 담기 위해 좀더 부드러운 느낌으로 변형해서 적용했습니다. 1) 두번쨰 개발 포인트 : 기본과 기준의 차이!일단 길 산스로부터 중도의 균형점을 찾은것 같긴 한데, 그럼에도 불구하고 아직은 슬라운드에 밀착된것 같지 않았어요. 특히 'S'를 부드럽게 변형하고 나니 뭔가 힘이 부족한 느낌..슬라운드는 베이직 하면 안되는데.. 좀더 고집이 필요해.. 매트리스도 고밀돈데..라며곰곰히 생각해다가 문득  '기본과 기준'이라는 단어가 동시에 떠올랐습니다. 슬라운드를 구입해서 사용하는 고객들의 리뷰에서도 느낄 수 있듯이많은 고민을 통해 신중하게 구매한 슬라운드 매트리스가 '좋은 매트리스의 기준'이 되고 있다는 생각이 들었고 이 '기준'이라는 이미지를 좀더 강하게 표현해도 좋을 것 같았습니다.그래서 기준을 어떻게 시각화 할 것이냐는 고민하다가! (고민이 정말 끝이 없네요..)기본과 다르게 기준은 명확한 지점이 있다는 포인트에서 직관적으로 '기준점'을 만들어 보기로 했습니다.- image 04 - 기준점 뜻 (계산하거나 측정할때 기준이 되는 점 / 어떤 것을 할 때 기준이 되는 생각이나 사실)점과 동행하게 된 워드마트 로고그래서 최종적으로 슬라운드는 이름표에 점 (dot)을 데리고 다니게 되었습니다.슬라운드가 좋은 매트리스의 기준입니다!ㅋㅋ한편, 심볼이미지 보다는 워드마크 타입의 로고가 여러 터치포인트에 활용도가 높아서 워드마크타입을 메인 로고로 사용하기로 했지만, 웹이나 모바일의 프로필 썸네일에서는워드마크타입이 가독성이 떨어졌습니다. (인스타, 카카오톡, 페이스 북 등을 보면 작은 동그라미에 이름표를 넣어야 하죠)그래서 웹, 모바일, 원형 썸네일 등에 적용할 수 있도록 심볼타입의 모노그램을 추가로 계획했습니다.스르르 스탬프 도장 - 모노그램 심볼'기준'이라는 컨셉을 표현하기 위해 도장을 꽝 찍은 이미지에서 모티프를 얻었고,Slound의 'Sleep soundly'라는 부드러운 어감을 전달하려고 열린원의 형태를 적용했습니다.힘을빼지도 주지도 말고, 균형점 찾기! 라는 미션을 통해 슬라운드의 로고와 모노그램이 새로 탄생했습니다.다음화에서는 슬라운드 아이덴티티 컬러에 대해 이어서 소개할 예정입니다.(이미 어느정도 보여지긴 했지만.. 아직 포인트 컬러는 공개가 안되었어요!)파랑파랑+엄격군청 슬라운드가 좀 더 편안하고 진정성 있는 색을 보여주게 되는 과정을 기대해주세요. :)
조회수 1105

홍보영상 직접 제작해서 수백만원 절약해보자

** 본 글은 문돌이 PM의 마케터 따라하기 시리즈 입니다.** 1화 보기 - 초기에 할만한 ASO (앱스토어 최적화) 팁** 2화 보기 - 초보 PM이 알아야 하는 초기 모바일앱 분석 101** 3화 보기 - 스타트업 브랜딩: 내가 보는 나와 너가 보는 나의 일치자금이 쪼들리는 초기 스타트업이 지출하기 가장 부담스러운 비용이 무엇일까? 서버비? 광고비? 나는 개인적으로 '원샷페이먼트'라고 부르는 비용들이라고 생각한다. 원샷페이먼트는 말 그대로 한번에 제법 큰 돈을 내야하는 비용들로서 외주제작비, 장비구입비, 그리고 콘텐츠 제작비가 여기에 해당한다. 특히 페이스북이나 유투브에 뿌릴 광고에 태울 동영상들을 외주 맡길 경우 보통 제작비가 백만원은 훌쩍 뛰어넘는데 이 돈 내는거 여간 부담스러운게 아니다. 그렇다고 윈도우 무비메이커로 허접하게 해서 광고태우면 효율이 안나온다.그래서 오늘 글은 저 수백만원을 아낄수 있는 어느정도 퀄리티가 나오는 광고영상을 맥북 하나만 있으면 뚝딱 만들어내는 방법론에 대해 소개하고자 한다. (물론 이 방법론으로 전문가분들의 고퀄편집이 가능한건 절대로 아니다. 어디까지나 임시방편임을 다시한번 강조한다!!) 본 방법론은 맥북이 있는 사람들, 그리고 Garage Band와 iMovie를 가지고 있는 사람들만 가능하다는 것을 미리 밝혀둔다. 빠른 이해를 위해 필자가 운영하고 있는 바크 앱의 홍보영상 제작 과정을 기준으로 설명하도록 하겠다.본 방법론은 총 5단계로 이루어져 있다.1. 아이디에이션 및 컨셉잡기2. 스토리 짜기3. 아이폰으로 촬영하기4. Garage Band로 고퀄의 음원 제작하기5. iMovie로 영상 편집하기본 방법론으로 탄생한 홍보 영상은 다음과 같다. (전문가들이 보기에는 웃음나오는 수준이지만 일반인들이 보기에는 미적으로 큰 무리는 없는 영상이다)https://www.youtube.com/watch?v=o7g_0yRjDoA<iframe width="700.000000" height="394.000000" src="//www.youtube.com/embed/o7g_0yRjDoA" frameborder="0" allowfullscreen="">내 와이프의 노동력을 착취해서 직접 촬영/편집한 영상이다Step 1. 아이디에이션 및 컨셉 잡기우선 내가 어떤 홍보영상을 만들지에 대한 대략적인 아이디에이션 및 컨셉을 그려봐야 한다. 아이디에이션에 필요한 세부내용은 다음과 같다.본 영상의 목적은 무엇인가? 내 제품의 정보전달인가? 소비자의 관심 환기인가?영상의 주 타겟이 누구인가?주로 어떤 채널로 집행될 영상인가? 페이스북? 유투브? 인스타그램?내 제품의 정보전달이 목적이라면 어떤 핵심 포인트들을 전달할 것인가? (3-4개 정도)내 제품에 어떤 후킹포인트가 있어서 소비자의 관심을 낚아올 수 있을까?Tone & Manner는 어떻게 잡을것인가? 발랄하고 활기찬 분위기? 감성적인 분위기? 섹시한 분위기?위 아이디에이션에 대한 부연설명을 좀 더 해 보겠다. 우선, 영상의 목적이 제품의 정보전달일 경우 최대한 제품의 사용성을 직관적으로 보여주는 영상이 되어야 하는 반면 소비자의 관심 환기가 목적일 경우에는 무언가 강렬한 메시지가 들어있는 영상이 필요하다. 사실 비전문가의 입장에서 제작을 시도하기에는 후자보다는 전자의 영상이 도전하기 더 수월하다. 후자의 영상은 크리에이티브도 중요하고 영상의 미적인 부분이나 퀄리티, 후킹포인트 등등이 아주 유기적으로 조합되어야 하기 때문이다.또한, 영상의 주 유통채널이 페북/유투브/인스타 모두를 아우를것인지, 아니면 인스타 위주로 갈 것인지에 따라서 영상의 사이즈가 달라진다. 보통 위 채널을 모두 아우르는 영상은 16:9 또는 16:10의 와이드형으로 제작되지만, 인스타의 경우 (또는 페북도 조금 포함되는 경우) 영상 사이즈는 스퀘어 (정사각형)으로 산출되어야 하기 때문에 제작단계부터 나중에 스퀘어로 영상을 자를 것을 감안해서 편집을 해야 한다. (물론 여력이 된다면 영상을 유투브는 와이드로, 페북과 인스타는 스퀘어로 각각 적용해주는게 가장 좋기는 하다만, 우리에겐 그럴 시간과 여유가 부족하다...아 그리고 요즘은 인스타도 와이드스크린을 게시는 가능하지만 왠만하면 기존 형성된 SNS의 컨벤션을 따라가주는게 좋다.) 한가지만 더 추가하자면, 인스타의 경우 동영상의 분량도 1분을 넘지 못하도록 되어있다. 따라서 힘들게 스퀘어 사이즈로 작업해 놨더니 영상 분량이 1분이 넘어가서 인스타에 태워보지도 못하는 불상사가 생기지 않도록 주의하도록 하자.에어비앤비는 페북에 동영상을 게시할 때 유투브와 연동된 광고는 와이드 스크린으로, 인스타와 연동될 경우 스퀘어 사이즈로 게시하고 있다.바크 홍보 영상의 경우 아이디에이션 세부 내용은 다음과 같다.영상의 목적: 정보전달 - 제품이 실 생활에서 어떻게 쓰이는지를 직관적으로 전달한다.영상의 타겟: 젊은 직장인, 대학생채널: 유투브, 페이스북핵심포인트: 제품의 4가지 유즈케이스를 보여준다 - 아침인사, 직장에서 앱 사용, 앱을 통해 친구 사귐, 파티에서 앱 사용후킹포인트: 외국인을 출현시켜 한국에서 앱 사용하는 모습으로 시작Tone & Manner:  발랄하고 여성스런 느낌, 잡지를 읽는것 같은 분위기, 여성의 낭랑한 나레이션이러한 아이디에이션을 통해 잡은 영상의 컨셉은 다음과 같다.Dear Barkers - 한 유저가 보내는 바크 사용자들을 향한 메시지이러한 컨셉은 향후에 시리즈물로 제작할 것 까지 염두에 두고 구상한 컨셉이다. 즉, 바크 앱을 잘 활용하는 유저들 중 독특하거나 눈에 띄는 유저들을 한명씩 출현시켜서 그들의 눈으로 본 앱 사용기를 'Dear Barkers by 아무개' 이런 시리즈물로 제작하고자 정한 컨셉인 것이다.Step 2. 스토리 짜기영상의 스토리에는 크게 두가지 요소가 있다. 첫째는 장면에 대한 설정인데 영상의 전체 장면들이 어떤 큰 섹션들로 이루어져 있고, 그 하위에는 어떤 장면들을 찍어나갈 것인지를 세세하게 계획하는 부분이다. 둘째는 각 장면마다 들어가는 나레이션이나 자막, 특수효과 등 장면에 붙일 다양한 요소를 기획하는 부분이다. 영상 작업을 처음 해보게 되면 가장 삽질을 많이하는 단계가 바로 스토리짜기 인데, 그 이유는 내가 상상만으로 작업한 스토리대로 실제 촬영이 절대로 매끄럽게 되지 않기 때문이다. 스토리를 최대한 자세하게 짜서 현장에서 직접 촬영하면서 매끄럽지 못한 부분들은 쳐내거나 하는 임시방편이 필요하다.처음에 잡았던 바크 영상의 스토리라인이다. 실제 촬영하면서 엄청나게 난도질되었다.Step 3. 아이폰으로 촬영하기흔히들 영상 제대로 촬영하려면 DSLR이나 캠코더가 있어야 하지 않느냐는 질문을 많이 한다. 사실 이런 전문장비가 필요한 상황은 다음 세가지 밖에 없다. 1) 내 영상이 TV나 옥외광고같은 큰 화면에 송출된다. 2) 아웃포커싱으로 뎁스있는 영상표현이 필요하다. 3) 야간씬이 꼭 들어가야 한다.초기 스타트업이 처음부터 4대매체 광고를 한다면 지금 이 글을 보면서 영상 외주제작비를 아끼려 할리가 없기 때문에 첫번째는 패스하고, 두번째의 경우는 쉽게 말해서 특정 영상에서 포커스 되는 피사체를 제외한 배경이 흐릿하게 보이는 현상을 아웃포커싱 됐다고 표현하는데, 스마트폰 카메라로는 유의미한 아웃포커싱 효과를 얻기 힘들다. (물론 이를 가능하게 해주는 아웃포커싱 앱이 있기는 하다만 퀄리티는 그닥...) 세번째의 야간에서의 장면은 사실 야간이지만 도심 한 복판에서 불빛이 많은 상황에서의 촬영은 아이폰6급 이상, 갤럭시 S6급 이상에서는 충분히 스마트폰으로 가능하다. 하지만 불빛이 적은 상황에서의 야간촬영은 반드시 DSLR 카메라와 조리개 2 이하의 밝은 렌즈가 필요하다. 이 세가지 경우가 아니라면 굳이 영상제작하려고 비싼 카메라 살 필요없이 아이폰이나 갤럭시폰 촬영으로도 충분하다.영상촬영을 초보자가 하려고 하면 이거 아무리 찍어도 뭔가 허접해 보이고 각이 안나온다. 걱정하지 마라. 내가 얘기하는 다음 3가지만 명심하면서 최대한 많은 영상을 촬영하면 반드시 쓸만한 클립이 건져질 것이다.1. 한 클립에서는 절대로 앵글을 바꾸지 마라모든 화면에 앵글이라는게 있다. 바로 로우, 미들, 하이앵글이다. 로우앵글은 밑에서 위를 쳐다보는 것, 미들앵글은 그냥 내 눈높이로 보는것, 하이앵글은 위에서 아래로 내려보며 찍는것을 말한다. 각 앵글마다 느낌이 확 다르고 목적도 다른데, 이에대한 팁들은 다른 전문 영상제작자들의 블로그를 찾아보면서 공부하면 좋다. 여기서는 그냥 내가 지금 찍는 화면이 어떤 앵글이구나 정도만 판단할 수 있으면 되고, 중요한건 한 클립에서 앵글이 왔다갔다 하면 안된다는 것이다. 예를들어 어떤 화면을 미들앵글로 시작했는데 도중에 갑자기 로우앵글로 카메라를 내린다던지, 갑자기 줌인을 한다던지 해서 앵글을 확확 바꿔버리는 경우가 많은데 이러면 그 영상은 불안정해 보여서 홍보 영상으로 쓸 수가 없다. 한번 시작한 앵글은 바꾸지 말고 일단 그 클립을 종료한 후 다시 새로운 앵글로 촬영을 시작하는게 중요하다. 또한, 여러 앵글의 클립을 촬영해 놓으면 나중에 편집할때 영상표현미가 풍부해 져서 더 좋다.카메라 앵글은 크게 3가지가 있는데 하이앵글은 왠만하면 시도하지 말자.2. 인물에 대한 촬영이면 내가 과하다 싶을 정도로 포커스해서 찍어라뭔가 인터뷰나 사람이 얘기하고 있는거나 인물의 행위를 촬영하는 클립인데 초보자들이 많이 하는 실수가 바로 피사체를 너무 줌아웃해서 찍고 있는 경우이다. 사람이 얘기하는 장면인데 실제로 찍은 영상을 보면 사람이 너무 멀리 떨어져 보이는 경우가 많다. 이런경우 내가 찍으면서 '너무 줌인해서 찍고있는거 아냐?' 싶을 정도로 포커스해서 찍어보도록 하자. 물론 얼굴을 꽉 채워서 찍으라는 게 절대 아니다. 보통 가슴 아랫부분이 잘릴정도로 포커스해서 촬영하면 화면에서 제법 인물이 포커스되어 보인다.3. 영상을 끊어 찍어라초보자들이 또 많이 하는 실수가 전체 영상을 한번에 촬영하고 있는 경우이다. 예를들어 한 인물이 카페에 들어와서 주문하고 앉아서 커피마시는 장면이 있다고 상상해보자. 이걸 초보자들이 촬영할때 그 인물의 전체 동선을 따라가면서 한번에 찍는 경우가 많다. 그리고 이걸 여러번 반복해서 찍기도 한다. 이렇게 되면 편집하기도 어렵고 연결된 영상에서 어디서 끊어야 하는지도 애매해 진다. 이 케이스에서는 크게는 1) 인물이 카페이 들어오는 씬, 2) 들어와서 주문대로 걸어가는 씬, 3) 주문하는 씬, 4) 기다리는 씬, 5) 커피 나와서 받아가는 씬, 6) 받아서 자리로 걸어가는 씬, 7) 자리에 앉는 씬, 8) 커피 마시는 씬 이렇게 구간구간 나누어서 촬영을 해야 한다. 보다 전문적인 촬영은 저 구간구간을 카메라 여러대를 동원해서 다양한 앵글로 찍기도 한다. 뭐 이건 카메라가 여러대 있으면 시도해 볼만 하다.한가지 팁은, 아이폰으로 촬영시 손에 들고 촬영하는것 보다는 집에 만일 셀카봉이 있다면 셀카봉에 끼워서 봉을잡고 촬영하는게 더 안흔들리고 안정적으로 촬영 가능하다. 삼각대가 있으면 최고겠지만 대부분은 삼각대도 없는 경우가 많을테니 시중에 널려있는 오천원짜리 셀카봉을 사서 장착하도록 하자.Step 4. Garage Band로 고퀄 음원 제작하기홍보영상 만들때 우리같은 비전문가들이 저작권에 대해 개념이 별로 없어서 특히 음원을 그냥 내가 평소에 좋아하는 음악 다운받아서 입히는 경우가 많다. 요즘은 페북도 유투브도 음원 오토스캔이 발달되어 있어서 내가 마룬5 음악을 입히면 100% 자동 검열로 영상 안올라간다. (페북같이) 올라는 가더라도 광고가 안걸리는 경우가 많다. 이런 경우를 대비해서 시중에는 수 많은 유/무료 음원 사이트들이 존재하고 유투브에도 다양한 무료음원을 제공하는 아카이브가 있기도 하다. 유투브에서 제공하는 이 무료 음원 사이트는 다양한 장르의 무료 음원 및 효과음을 제공하기에 제법 유용하다. 여기서 괜찮은 음원을 찾는다면 이 단계는 그냥 패스해도 좋다. (다만, 각 음원마다 사용 조건이 명시되어 있으니 그걸 꼭 지키도록 하자.)유투브에서 제공하는 무료 음원 라이브러리이다. 각 음원마다 클릭해보면 사용 조건이 명시되어 있으니 유의하자.당신이 맥북유저고 Garage Band가 있으면 진짜 마법처럼 손쉽게 제법 고퀄의 음원을 만들수가 있으니 이 단계를 스킵하지 말고 꼭 한번 도전해 보기 바란다.거라지밴드를 처음 열면 다음과 같이 생겼다. 고민하지 말고 'Empty Project'를 선택한다.거라지밴드의 첫 화면이다.아무리 초보자를 위해 쉽게 디자인된 프로그램이라지만 역시 머리가 아득해질 정도로 복잡해 보인다. 하지만 겁먹지 말자. 하나씩 차근차근 인터페이스에 대해 설명해 주도록 하겠다.프로젝트 메인화면이다. 머리가 아득해질 정도로 복잡해 보인다.1) 미디 (MIDI) 악기를 선택 가능한 좌측 악기 라이브러리 - 이 곳은 마치 내가 연주할 악기를 고르듯이 거라지밴드에 구비되어 있는 미디 악기 창이다. 이 창이 처음에 안보일 수 있다. 당황하지 말고 맨 위 좌측에 책장서랍처럼 생긴 아이콘을 누르면 슉 하고 나온다.2) 연주한 음악을 배치하는 타임라인 - 1번 섹션에서 선택한 악기에 기본 제공되는 건반작업 등으로 곡을 연주하고, 이를 분량에 맞게 배치하는 영역이다. 이 부분은 항상 보인다.3) 다양한 pre-made된 음원 조각들이 모여있는 루프 - 가장 중요한 섹션이다. 사실 이 단계에서 당신이 음악을 한번도 만들어 본 적 없는 생초보라면 위의 1번, 2번은 그냥 무시하고 이 3번섹션만 집중하도록 하자. 이 루프 탭 역시 처음에 창이 안보일 수 있다. 맨 우측 위에 세개의 아이콘 중 가운데 노란리본 모양으로 생긴게 이 탭을 여는 버튼이다.1번과 2번은 음악에 조금이나마 흥미가 있었던 사람이라면 이것저것 악기도 추가해 보고 만지작 만지작 하다 보면 금방 감이 오긴 하는데, 그렇지 않은 사람들에게는 매우 어려운 영역이니까 이 글에서는 패스하도록 하겠다. 사실 3번의 루프 라이브러리만 가지고도 어느정도 고퀄의 배경음악을 만들 수 있으니까 말이다. 루프 라이브러리를 활용하여 음원을 만들기에 앞서 간단히 알고 있어야 하는 사전지식에 대해 짚고 넘어가도록 하자.1. 모든 음악의 기본은 [드럼비트-베이스-멜로디 + 효과음]의 구조로 이루어져 있다. 하지만 경우에 따라서 베이스는 생략하고 [드럼비트-멜로디 + 효과음]으로 구성되기도 한다.2. 모든 음악에는 bpm이라고 불리는 일종의 스피드 같은게 있다. 보통 70-90정도면 느린음악, 100-120정도면 보통, 120 이상이면 빠른 음악이다. 거라지밴드에서 상단에 계기판처럼 생긴 탭에서 'bpm'이라는 부분의 숫자를 더블클릭해서 변경해 줄 수 있다.3. 한 음악은 여러개의 뭉탱이 단위의 음원들이 모여서 이루어진다. 이 뭉탱이 단위는 거라지밴드에서는 기본적으로 타임라인에서 8개의 눈금을 차지한다. 즉, 모든 음악을 8개 단위의 뭉탱이로 조합시키라는 뜻이다.그럼 루프 라이브러리를 활용해서 간단한 댄스 음악을 만들어 보도록 하자. 우선 첫번째 단계는 비트를 선택하는 건데, 루프 라이브러리에 'beat'라는 탭을 누르면 비트 음원만 보여준다. 여기서 하나씩 들어보고 마음에 드는 비트를 선택해서 마우스로 드래그해서 타임라인에 가져다 놓으면 된다. 위에서 말했듯이 갖다놓은 비트를 마우스로 드래그해서 8개의 눈금을 차지하도록 늘려놓은 후, 이 8개 눈금의 뭉탱이를 계속 복사해서 분량을 늘려나가도록 하자. 예를들면 다음과 같은 모습이 될 것이다.갖다 놓은 비트를 8개 눈금 뭉탱이로 늘린 후에 이를 8마디마다 계속 복붙한다.다음 여기에 어울리는 멜로디를 찾아보자. 루프 라이브러리에 멜로디가 너무 많아서 이거 고르고 있는데만 시간 크게 잡아먹기 마련이므로 심플하게 기타, 피아노, 스트링 위주로 찾아보도록 하자. 역시 상단에 guitar, piano, string이라는 탭이 있다. 마음에 드는 음원을 찾으면 역시 위에서와 같이 8눈금을 차지하는 뭉탱이로 늘려주고 적절히 배치한다. 이때 팁은, 음악에도 기승전결 같은게 있다는거다. 처음부터 막 시끄럽게 시작하지 않고 차분하게 시작해서 클라이막스를 찍고 종료하는 흐름이라는게 있기 때문에 이 멜로디를 너무 처음에 배치하지 말고 앞의 한 뭉탱이 (8눈금)은 비트만 틀어주고 9번째 눈끔 부터 멜로디를 넣도록 하자. 또 한가지 팁은, 멜로디 중에서 '~~~01,' '~~~02' 이런식으로 같은 이름에 숫자가 여러개 존재하는 멜로디들이 있는데 이걸 사용하면 같은 느낌으로 다양한 변주를 넣을 수가 있다. 예를들면 다음 사진과 같다.뭉탱이 단위로 기승전결의 흐름을 만들어서 배치하면 음악이 더 풍성해 진다.'Brixton Lights Rhythm Guitars' 라는 음원이 01, 02 두개가 존재하기에 한 뭉탱이 단위로 순차적으로 배열하니까 음악이 제법 풍성해 보인다. 보통 진짜 심플한 영상의 배경음악으로 들어갈 꺼면 그냥 이렇게 비트+멜로디 딱 두개만 넣어서 한 30-40초분량 음악 만들어서 익스포팅 해버려도 상관은 없다. 하지만 여기에 좀 더 풍부한 효과음원들을 추가할 수 있는데, 예를들면 루프 라이브러리에서 'voice'라는 탭을 눌러보면 다양한 목소리 코러스가 있고, 'Conga' 탭을 눌러보면 아프리카 음악같은 효과도 추가 가능 하다. 음악을 다 완성하고 나면 맨 상단에 'Share' 메뉴에 'Exporting to Disc'라는 메뉴가 있는데 이걸 클릭해서 MP3  파일로 추출할 수 있다.Step 5. iMovie로 영상 편집하기이제 드디어 마지막 단계이다. 지금까지 촬영한 영상들과 위에서 만든 음원을 조합하여 영상을 아이무비로 편집하는 과정이다. 역시 아이무비를 처음 다뤄보는 분들을 위해 인터페이스에 대한 기본적인 내용을 다루고 진행하도록 하겠다.아이무비도 심플한듯 보이지만 처음에는 머리가 아득해지는 인터페이스다.1번탭은 영상의 각 요소대로 만들어진 가장 큰 단위의 탭이다. 즉, My media는 내가 지금까지 촬영한 클립들을 불러오는 탭, Audio는 아까 작업한 음원, Title은 각 영상에 들어가는 자막, Backgrounds는 굳이 촬영한 클립이 없어서 배경에 채워넣거나 중간중간 화면전환용으로 필요한 배경화면들인데 별로 많이 쓰이진 않는다. 마지막으로 Transitions는 각 클립마다 영상 전환이 칼같이 될 것인지, 흐려졌다가 나오는지, 겹쳐져서 나오는지 등등의 다양한 화면전환 효과들이 들어있다.2번탭은 1번탭을 클릭하면 그 하위내용들이 표시되는 탭이다. 예를들어, Titles를 클릭하면 자막으로 쓸 수 있는 다양한 형태의 자막 라이브러리가 뜨는 것이다.3번탭은 거라지밴드와 마찬가지로 영상의 각 요소들을 시간순으로 배치시키는 타임라인이다. 이 부분은 크게 4가지 요소로 이루어져 있다. 1) 맨 밑부분의 초록색 바는 영상 전체에 깔리는 기본 음원이다. 아까 거라지밴드에서 작업한 음원이 여기에 들어간다. 2) 그 위의 초록색 바 들은 영상에 부분부분 들어가는 음원인데 주로 영상에 넣는 효과음들이나 나레이션 목소리가 여기에 들어간다. 3) 영상 클립들이 그 위에 배치된다. 4) 각 영상에 들어가는 자막들이 바로 그 위에 있는 초록색 바 이다. 5) 간혹 이미지를 영상에 삽입하고 싶은 경우가 있는데 3번탭의 맨 왼쪽 위를 보면 바크 로고 이미지가 영상 위에 입혀져 있고 자막은 그 위에 들어가 있다. 이게 이미지와 영상이 함께 들어간 부분이다. 이 부분은 picture in picture 기능을 잘 활용하는 트릭인데 나중에 별도의 글로 따로 설명하도록 하겠다.4번탭은 각 부분마다 현재 꾸며진 영상을 프리뷰하는 부분이고 그 상단에 있는 아이콘들은 그 해당 장면에서 다양한 설정이 가능하도록 해주는 기능들이다. 역시 하단에 따로 설명하도록 하겠다.아이무비로 영상작업하는 순서는 다음과 같다.1. 음원 배치아까 거라지밴드로 작업한, 또는 유투브 무료 라이브러이에서 다운로드 받은 음원파일을 타임라인 (4번탭) 맨 하단에 드래그해서 갖다놓는다.2. 영상 배치영상 역시 파일을 그대로 타임라인에 드래그 해서 갖다 놓으면 되는데, 가져다 놓은 후 잘라내기 (Split) 및 줄이기의 두가지 툴로 원하는 부분만 가져다 놓는다.  화면을 잘라내는 방법은 해당 클립에 커서를 놓고 우측 버튼을 클릭하면 'Split Clip'이라는 메뉴가 있고, 이걸 클릭하면 영상이 그 지점에서 둘로 쪼개진다. 영상을 늘리고 줄이는것은 (스크린샷이 안찍혀서 그냥 말로 설명하겠음) 마우스를 해당 클립 끝 부분에 가져다 놓으면 갑자기 화살표로 커서가 바뀌는데 그때 드래그하면 된다.3. 화면전환화면전환은 너무 많이 넣으면 영상이 촌스럽고 복잡해 보인다. 다음 4가지 부분에만 넣도록 한다. 1) 첫 시작, 2) 도입부-메인부 사이, 3) 메인부-클라이막스 사이, 4) 클라이막스-종료부 사이. 보통 첫 시작은 어두워지면서 밝아지기에 'Fade to Black' 화면전환을 맨 처음에 넣으면 영상이 어두웠다가 밝아지면서 시작한다. 또한, 도입부, 메인부 등 각 섹션 안의 클립들은 화면전환을 넣지 말고 그냥 연결해서 붙여넣고, 위에서 언급한 4가지 부분만 Cross Blur (흐려지면서 전환), 또는 Cross Dissolve (겹치면서 전환)를 배치하도록 한다. 마지막은 어두워지면서 끝내고 싶을때는 'Fade to Black'을, 밝아지면서 끝내고 싶을때는 'Fade to White'을 배치하도록 한다.각 영상클립 사이에 있는 나비리본같은 모양이 화면전환 효과가 들어간 지점이다. 보다시피 한 섹션 안의 영상들은 화면전환 없이 연결한다.4. 화면효과 - 밝기조절 및 필터아이무비에는 마치 사진의 밝기를 조절하고 필터를 넣듯이 영상에도 밝기조절 및 필터를 넣을 수 있는 강력한 기능이 있다. 이건 해당 클립을 클릭하면 4번탭 상단에 아이콘 메뉴들 중 파레트 모양의 아이콘을 클릭하면 화면의 밝기 및 색온도를 조절할 수 있고, 삼원모양의 아이콘을 클릭하면 필터를 입힐 수 있는 기능이다.영상 클립의 밝기조절 및 필터효과를 통해서 다양한 화면 연출이 가능하다. 바크 영상에도 도입부와 후반부에 필터를 입혔다.5. 자막작업자막이 필요한 경우 1번탭에서 Titles탭을 클릭하면 다양한 자막기능을 선택해서 타임라인으로 드래그한 후 4번탭에서 글을 입력할 수 있다. 하지만 우리가 예능에서 보는것 처럼 현란한 자막작업은 불가능하다. 아이무비에서 그나마 쓸만한 자막 기능은 Upper, Lower, Centered 요 3개밖에 없고, 나머지는 너무 과하거나 촌스럽다. 아무튼 저 3개중 하나를 선택해서 드래그해서 타임라인에 갖다 놓은 후 더블클릭하면 4번탭에 다음과 같은 텍스트 편집 창이 활성화 된다. 여기에서 폰트 종류, 정렬, 크기등을 조절할 수 있다. 한가지 팁은, 처음에는 글씨에 외각선이랑 그림자, 볼드처리가 자동으로 되어있어 매우 촌스러워 보이는데 당황하지 말고 'B'라는 버튼과 'O'라는 버튼을 클릭하여 외각선과 볼드처리를 해제시키면 된다. 또한 자막을 드래그해서 원하는 장소에 갖다 붙이는 기능 역시 지원하지 않아 당황할 수 있는데 역시 당황하지 말고 Lower의 경우 맨 끝에서 엔터를 여러번 치면 글씨가 점점 위로 올라가서 인위적으로 중간쯤에 갖다 놓을 수 있고, 역시 스페이스바를 여러번 쳐서 원하는 장소에 딱 글씨를 갖나 놓을수도 있다.자막을 더블클릭하면 텍스트 수정창이 활성화 된다.이런 과정을 거쳐서 모든 작업을 끝 마쳤다면 상단의 메뉴에서 File > Share > Export to Disc 탭을 통해서 만든 영상을 mp4 포맷으로 추출할 수 있다.아이무비로는 사실 이것 보다 훨씬 다양한 영상편집 기능을 제공하는데, 이걸 잘만 활용하면 비싼 어도비 프리미어나 파이널컷 프로가 필요 없을 정도로 알차게 활용 가능하다. 이 부분은 향후 별도의 글을 통해서 팁을 전하도록 하겠다.자, 이제 모든 단계가 끝났다. 다시한번 바크 영상을 보자.https://www.youtube.com/watch?v=o7g_0yRjDoA<iframe width="700.000000" height="394.000000" src="//www.youtube.com/embed/o7g_0yRjDoA" frameborder="0" allowfullscreen="">서론에 보여준 이 영상은 사실 이 5단계를 모두 거쳐 작업시간이 약 2주정도 소요된 영상이다.바크 홍보 영상은 위의 단계를 모두 거쳐서 약 2주정도의 시간이 걸려서 완성되었다. 다시한번 강조하지만 에이전시에서 전문적인 툴로 작업하는 고퀄영상에 비할바는 절대로 못되지만, 초기 스타트업이 페이스북이나 인스타 등에 주로 마케팅 하는 용도의 영상으로는 크게 나쁘지는 않다고 생각한다. 당신이 혹시 주머니돈 아껴가며 어렵게 제품 홍보하고 있는 초기 스타트업이라면 수백만원의 아까운 돈을 영상제작에 쓰지 말고 차라리 영상을 직접 제작한 후에 그 돈을 영상을 뿌리는 광고비에 쓰라고 꼭 말씀드리고 깊다. (혹시 이 글이 어느정도 도움이 됐다면, 보답으로 바크 페이스북에 가서 본 홍보영상에 라이크 버튼을 살포시 눌러주시면 매우매우 감사하겠습니다!!!)글쓴이는 스팀헌트 (Steemhunt) 라는 스팀 블록체인 기반 제품 큐레이션 플랫폼의 Co-founder 및 디자이너 입니다. 비즈니스를 전공하고 대기업에서 기획자로 일하다가 스타트업을 창업하고 본업을 디자이너로 전향하게 되는 과정에서 경험한 다양한 고군분투기를 연재하고 있습니다.현재 운영중인 스팀헌트 (Steemhunt)는 전 세계 2,500개가 넘는 블록체인 기반 앱들 중에서 Top 10에 들어갈 정도로 전 세계 150개국 이상의 많은 유저들을 보유한 글로벌 디앱 (DApp - Decentralised Application) 입니다 (출처 - https://www.stateofthedapps.com/rankings).스팀헌트 웹사이트 바로가기

기업문화 엿볼 때, 더팀스

로그인

/