스토리 홈

인터뷰

피드

뉴스

조회수 2737

타이포그래피 겉핥기

안녕하세요. 스포카 디자인팀에 속해있는 이경입니다. 기술 블로그이니만큼 디자이너로서 개발자분들과 공유할 수 있는 유용한 정보가 무엇이 있을까 고민하다, ‘타이포그래피’에 관한 글을 쓰기로 했습니다. 타이포그래피란 단순하게 말하자면 글자를 다루는 일을 말합니다. 타이포그래피에 관해서는 이미 좋은 글이 많이 있으므로 이곳에서는 가볍게 읽을 수 있는 내용을 다루고자 합니다. 다른 좋은 글이 많은 곳이나 책에 대해서도 다음에 한번 쓰고 싶네요. 이번 주에는 타이포그래피와 그 기본 요소인 글자에 관해 간단히 이야기하려고 합니다.타이포? 타이포그래피?어쩌면 두 단어가 모두 생소하실지도 모르겠습니다. 그러나 디자인을 공부하는 사람들 사이에서는 타이포typo 혹은 타이포그래피typography라는 단어가 꽤 자주 등장합니다. 그리고 흔히 두 단어를 모두 같은 뜻으로 사용하곤 합니다. 하지만 이 두 단어의 실제 뜻은 상당히 다릅니다.타이포그래피 (typography) [명사] <출판>활판으로 하는 인쇄술.편집 디자인에서, 활자의 서체나 글자 배치 따위를 구성하고 표현하는 일.typo 미국식 [|taɪpoʊ] 오자, 오식출처: 네이버 사전위와 같은 사전적 의미를 참고한다면 ‘타이포가 잘 된 디자인, 타이포가 어색한 책’ 등의 표현은 잘못되었다는 것을 알 수 있습니다. ‘타이포그래피가 잘 된 디자인, 타이포그래피가 어색한 책’ 등의 표현이 옳을 것입니다. 그러나 자료를 찾다 보니, 서구권에서도 우리나라처럼 Typography의 줄임말로 Typo를 쓰기도 한다고 하는군요. 그러나 영미권에서 Typo는 주로 오탈자의 의미로 사용된다고 합니다.폰트사전적 의미로 글자란 말을 적는 일정한 체계의 부호입니다. 숫자와 문장부호들도 여기 포함됩니다. 영어에는 letter, type, character가 같은 뜻을 가지고 있습니다. 이중 타입은 조금 더 물리적인 속성을 갖습니다. 금속 ’활자’를 뜻한다고 보시면 됩니다. 타입페이스typeface란 바로 이 금속활자의 찍히는 얼굴 면, 그 모양을 말하는 것입니다.폰트font란 통일된 구조와 속성을 가진 한 벌의 기호나 글자를 말합니다. 요즘은 같은 스타일을 가진 폰트 모두를 지칭할 때 쓰이기도 하지만 그런 경우 정확한 이름은 타입패밀리type family 로, 같은 스타일의 폰트 묶음을 말합니다.위의 그림은 유니버스Univers 서체의 타입패밀리입니다. univers 55 가 여기서 기본이 되는 폰트이고, 획의 굵기나 기울기 등의 변형을 통해 각각 다른 폰트로 나뉘고 있습니다.활자의 구조Letter, Type, Character 중 Character는 전통적 인쇄 방식으로 활자를 조립해 인쇄할 때 사용하는 각각의 글자, 구두점, 숫자 등의 개별 요소를 말합니다. 지금으로 말하자면 키보드를 두드리거나 특수문자 입력폼에서 더블클릭을 했을 때 나타나는 부호 하나하나가 되겠군요.영문 알파벳에는 대문자와 소문자의 개념이 존재합니다. 원래의 로만 알파벳에는 대문자만이 존재했지만, 이 대문자들을 반복해 쓰는 과정에서 소문자가 등장했습니다. 대문자는 영어로 Uppercase라고 하는데 이 이름은 인쇄술 개발 초기 손으로 조판하던 때에 활자 상자 윗부분에 대문자를 넣어 두던 것에서 유래했습니다. 소문자는 그 아래에 있었으니 Lowercase라고 부릅니다. 대문자는 약어로 Caps라고도 합니다. 지금 키보드 왼쪽에 자리한 Caps lock의 의미가 그것이죠. 소문자만큼—정확하게는 소문자 x의 높이만큼—작게 쓰는 대문자도 있습니다. 영문 폰트를 자주 사용하시는 분이라면, 혹은 어도비 일러스트레이터같은 프로그램의 Type> character 부분을 이것저것 만져 보신 분이라면 한 번쯤 보신 적 있으실 겁니다. Small caps라고 부르는 작은 대문자입니다. 따로 폰트가 만들어져 있기도 합니다. 본문, 긴 글을 대문자로 조판할 때나 본문 속에서 DNA 등의 두문자어를 쓸 때 사용하곤 합니다.활자를 조금 더 자세히 살펴봅시다.글자들이 고르게 놓인 것처럼 보이는 선을 기준선, Baseline이라고 합니다. 소문자들의 몸통을 고르게 놓는 기준선 위의 선은 윗선 x-line, 혹은 몸통선Meanline 이라고 부릅니다. 소문자 x의 획이 보통 기준선에서 윗선까지 닿기 때문입니다. p나 h같이 x보다 위아래로 뻗는 소문자 획은 각각 위쪽이 어센더Ascender, 아래쪽이 디센더Descender입니다. 속공간Counter은 글자의 획이 둥글게 공간을 싸고 있는 경우인 d, e, g등의 빈 공간을 말합니다.위의 그림 맨 위에 있는 Alpha와 bet은 각각 다른 특징을 가지고 있습니다. 물론 타입패밀리부터 다른 활자이기도 하지만 Alpha 같은 경우는 글자의 끝맺음 부분에 세리프가 튀어나와 있지요. 반면에 bet은 비교적 각진 느낌으로 세리프 없이 마무리되어 있습니다. 세리프는 로마 석공이 새긴 비석의 글자로부터 유래했습니다. 세리프가 있는 서체는 세리프Serif 라고 하고 없는 서체는 산세리프Sans serif 라고 합니다. Sans는 프랑스어로 없다는 뜻이라고 합니다.두, 세 번째 줄에는 숫자의 다른 글자꼴을 배치해 놓았습니다. 두 번째 줄의 우리에게 익숙한 숫자는 모던 숫자Modern figures나 Lining figures라고 부릅니다. 대문자 크기에 맞춘 큰 모던 숫자는 도표나 숫자 정보를 잘 전달해야 하는 문서 등에 유용합니다. 올드 스타일 숫자Old style figures, Nonlining figures는 어센더와 디센더가 있고, 크기가 각각 다르다는 점에서 소문자와 비슷한 특징을 가집니다. 따라서 본문 속에서 숫자가 덜 두드러져 보여야 할 때나 작은 대문자와 숫자를 함께 사용해야 할 때 쓰이곤 합니다.마지막 줄에 있는 이음자Ligatures 는 둘 이상의 글자를 자연스럽게 결합하는 것을 말합니다. 그림에 있는 ff, fi, fl과 ffi, ffl 등의 나란히 있을 때 어색해 보이는 글자를 자연스럽게 만듭니다.활자 스타일마지막으로 활자 스타일에 대해서 살펴보도록 합시다. 이것은 보통 텍스트를 입력 시 서식 메뉴에서 살펴볼 수 있습니다. 중량, 획 굵기에 관해서는 가느다랗고 경쾌한 라이트light부터 레귤러regular, 미디엄medium, 두껍고 무거운 볼드bold 등이 있고 글자 폭에 관해서는 익스펜디드expanded, 레귤러regular, 콘덴시드condensed 등이 있습니다. 이 변화 폭은 엑스트라 라이트, 울트라 볼드, 울트라 익스펜디드, 엑스트라 콘덴시드 등으로 더 나뉘기도 합니다. 헬베티카Helvetica의 타입 패밀리를 살펴보신다면 쉽게 이해가 되실 겁니다. 또 글자의 획 굵기와 글자 폭이 함께 변하면 하나의 타입패밀리 속에 라이트 익스펜디드, 엑스트라 볼드 콘덴시드 등을 포함하게 됩니다.긴 글 읽어주셔서 감사합니다. 이 글은 타이포그래피 교과서, 타이포그래피 천일야화 등의 책과 네이버 사전, 타이포그래피 서울 등의 웹페이지를 참고했습니다.#스포카 #디자인 #디자이너 #디자인팀 #타이포그라피 #타이포그래피 #꿀팁 #인사이트
조회수 6780

픽셀과 포인트

안녕하세요? 스포카에서 디자인 총괄을 맡고있는 최재형입니다. 오늘은 픽셀pixel과 포인트point에 대해 알아보겠습니다.Pixel픽셀은 디스플레이에서 가장 기본이 되는 단위입니다. 디스플레이는 수많은 픽셀들이 모여 구성됩니다. 하나의 픽셀은 일반적으로 R빨강, G초록, B파랑 세 가지의 서브 픽셀subpixel을 가지고 있습니다. 우리가 px이라고 부르는 단위는 디스플레이에서 서브픽셀이 모여 색상을 표현하는 최소 단위라 보시면 됩니다. 픽셀에 대한 자세한 이야기는 제 이전 글을 참고해 보시길 바랍니다.Point포인트point는 타이포그래피에서 사용하는 가장 작은 인쇄 단위로, 파이카pica를 잘게 나눈 것입니다. 즉, 포인트와 파이카 모두 글자의 크기를 측정하기 위한 단위입니다. 참고로 파이카는 18세기에 만들어진 타이포그래피의 유닛입니다. 1 pica가 정의하는 길이는 다양하지만, 현재 가장 보편적으로 사용되는 방식은 1 pica가 1/6in라고 보시면 됩니다. 이를 미터법으로 표시하면 약 4.233 mm가 됩니다. 간단히 정리하자면 다음과 같습니다.1 pica = 1/6 inch = 4.233 mm그리고 포인트는 파이카를 12조각으로 나눈 단위입니다. 즉 1 pica는 12 pt와 같습니다. 결국 정리하면 1 pt는 다음과 같습니다.1 inch = 6 pica 1 pica = 12 pt 1 pt = 1/12 pica = 1/72 inch = 약 0.3527 mm1 pt는 몇 px일까요?1pt는 몇 px일까요? 디자인을 하시는 분이 거나, 디자인을 코드로 구현하는 분이라면 한 번쯤 품어봤을 궁굼증일 겁니다.포인트point와 파이카pica는 컴퓨터가 없을 때부터 있었던 개념입니다. 이 단위가 컴퓨터 디스플레이안에 들어오기 시작하면서 문제가 발생하기 시작합니다. 컴퓨터 디스플레이의 기본이 되는 픽셀의 크기가 모두 다르기 때문입니다.글자의 크기는 디스플레이의 해상도와 실제 모니터의 사이즈에 영향을 받습니다. 픽셀의 크기는 스크린의 종류마다 제각각이기에 픽셀의 크기와 물리적 단위인 인치inch 사이에는 고정된 관계가 없습니다. 그래서 컴퓨터 상에서 글자의 크기는 논리적 단위logical unit를 통해 파악하게 됩니다.72 pt의 글씨는 1 logical inch 크기의 글씨라고 정의됩니다. 그리고 이 logical inch는 실제 표시되는 물리적 단위physical unit인 physical inch로 변환되어 최종적으로는 픽셀로 스크린 위에 표시됩니다.하지만 논리적 단위가 물리적 단위로 변환되는 기준은 경우에 따라 다릅니다. 이 부분에 대해 알아보기 위해 여기서 잠시 그래픽 유저 인터페이스 역사로 들어가보겠습니다.WYSIWYG1970년대, Xerox PARC 연구소에서는 WYSIWYG을 개발합니다. WYSIWYG은 “What You See Is What You Get”의 줄임말 입니다. 우리말로는 “보는 대로 얻는다” 라는 뜻의 내용입니다.WYSIWYG은 컴퓨터 스크린 상에서 보이는 편집 상태의 화면이 최종 결과물 - 그 당시에는 출력물을 뜻합니다 - 과 같은 방식의 GUI 기반의 편집 툴을 일컫습니다. 우리가 현재 쓰고있는 워드프로세서나 Adobe의 Photoshop, Illustrator 등과 같은 그래픽 편집 툴이 WYSIWYG이라고 보시면 됩니다.72 dpiXerox PARC 연구소는 1 point가 1/72 inch인 것에 착안하여 72 ppipixels-per-inch의 화면해상도를 가진 디스플레이를 표준으로 채택합니다. 72 ppi 해상도에서는 1 pt가 1 px이 되게 됩니다.Apple은 72 ppi의 규격을 채용하여 OS에 적용합니다. 타자기 세대에 널리 쓰이던 10pt 크기의 글씨를 모니터 상에서 10 px로 보이게 하겠다는 의도였습니다.참고로 ppipixels-per-inch와 dpidots-per-inch는 서로 다른 개념이지만 최근에는 차이의 구분 없이 혼용되어 쓰이고 있습니다.Apple 72 dpi를 채택한 이유는 타자기 세대에서 널리 쓰이던 10 point 크기의 서체를 컴퓨터 스크린에서도 같은 숫자의 크기인 10 px의 크기를 갖게 하겠다는 의도였습니다. 결과적으로 Apple의 선택은 대중에 큰 호응을 얻었습니다. 그리고 Apple PC의 대중화와 함께 72 dpi는 보편화가 됩니다.96 dpi반면 Microsoft는 96 dpi를 표준 해상도로 채택하게 됩니다. Microsoft가 Apple과는 달리 96 dpi를 표준 해상도로 설정한 이유는 다음과 같습니다.Microsoft는 인간이 컴퓨터 디스플레이를 볼 때는 책이나 문서를 볼 때 눈(망막)에서 책이나 문서까지의 거리보다 1/3 가량 더 멀리 본다고 주장합니다. 그래서 72 dpi 스크린에서의 글씨는 실제 편집자에 의해 의도되었던 글씨 크기보다 작게 보이기 때문에 가독성에 해를 끼친다고 판단합니다.어디선가 본 것 같은 논리입니다.Microsoft는 위 문제를 해결하기 위해 트릭을 씁니다. 72 dpi 해상도를 96 dpi의 해상도로 높이는데 그 이유는 다음과 같습니다. 컴퓨터 스크린은 책이나 문서를 읽을 때의 거리 보다 4/3배 이므로, 해상도도 4/3배를 하여 72 ppi의 모니터에서 글씨 크기를 키워 상대적으로 같은 글씨 크기를 만들어 가독성을 높이겠다는 의도였습니다.Microsoft의 운영체제에서는 위의 96 dpi를 논리적인 해상도logical resolution라 부르고, 실제 디스플레이가 지원하고 실질적으로 표현되는 72 dpi의 해상도를 실제 해상도physical resolution이라 말합니다.1 pt = ?다시 궁금즘의 시작점으로 돌아와 1 pt는 몇 px인지에 대해 결론을 내보겠습니다. 1 inch를 표시하기 위해 Mac에서는 72px이 필요하고, Windows에서는 96 px이 필요한 셈입니다. 결국 1 pt가 정의하는 픽셀은 해상도의 상황에 따라 달라지게 됩니다.Mac: 1 inch = 72 px Windows: 1 inch = 96px Mac (72 ppi): 1 pt = 1 px = 약 0.3527 mm Windows (96 ppi): 1 pt = 1 px * 96/72 = 약 1.3333 px = 약 0.4702 mmWeb Browser하지만 웹 브라우져 상에서의 해상도는 약간 예외적입니다. (아직까지는) 가장 보편적으로 사용되고 있는 웹 브라우저인 Microsoft의 Internet Explorer는 역시 자사제품답게 96 dpi의 해상도를 가지고 있습니다. 하지만 Google Chrome이나 Apple의 Safari가 쓰는 Webkit 엔진의 경우도 72 dpi가 아닌 96 dpi의 해상도를 기준으로 삼고 있습니다. 이는 CSS가 계획될 당시 96 dpi를 기준으로 만들어졌기 때문입니다. 그러므로 웹에서의 폰트는 포인트에서 4/3배가 된 픽셀 값을 가지게 됩니다. 12 pt의 크기의 글씨는 웹 브라우져에서 16 px로 렌더링 되는 것입니다.DisplayDPI Calculator / PPI Calculator하지만 모든 모니터의 도트피치는 다 다릅니다. 위의 링크에서 볼 수 있듯이 모니터의 ppi는 종류별로 매우 상이하죠. 위에서 예로 든 12 pt의 글씨는 웹 브라우져에서 16 px로 렌더링 되긴 하지만, 각 모니터에서 표시되는 16 px의 실제 크기는 모니터의 도트피치에 따라 다릅니다.예를들어 1920*1200의 해상도를 가진 24 inch의 모니터는 94.34 PPIpixel-per-inch입니다. 그렇다면 위 모니터에서의 16 px의 크기는 다음과 같습니다.16 px = 16/94.34 inch = 0.1696 inch하지만 제 맥북프로는 1280*800 해상도에 13 inch의 디스플레이를 탑재하고 있으므로 116.11 PPIpixel-per-inch입니다. 그러므로 16 px의 크기는 실질적으로 다음과 같이 보입니다.16 px = 16/116.11 inch = 0.1378 inchReferencehttp://msdn.microsoft.com/en-us/library/windows/desktop/ff684173(v=vs.85).aspxhttp://blogs.msdn.com/b/fontblog/archive/2005/11/08/490490.aspxhttp://en.wikipedia.org/wiki/Dots_per_inch#DPI_or_PPI_in_digital_image_files#스포카 #디자인 #디자이너 #인사이트 #꿀팁
조회수 1565

원하는 정보를 5초 안에 인지할 수 있게 하자

우리나라에서 웹 서비스가 아이디어에서 출발해 출시되기까지 여러 단계를 거치게 되는데 크게는 기획, 디자인, 개발의 3단계를 거치게 된다고 볼 수 있다. 각 단계별로 세분화된 역할들이 있어도 결국은 각각 기획자, 디자이너, 개발자로 분류된다. 어니스트펀드에서는 그들이 제품개발팀을 이루고 있다.어니스트펀드 제품개발팀나는 그중 개발자로 속하고 퍼블리싱 & 프론트 개발을 하고 있다. 퍼블리싱은 디자이너가 그린 디자인된 화면을 웹페이지용 프로그래밍 언어라고 할 수 있는 HTML과 CSS로 웹 문서화하는 것이고, 프론트 개발은 HTML과 CSS로 만들어진 웹문서를 사용자의 의도/목적에 따라 기능이 동작하도록(주로 데이터 입출력, 예를 들자면 네이버 검색창의 자동 완성이나, 네이버 메인의 다음 뉴스 보기 등) 기능을 개발하는 것이다.어니스트펀드에서는 팀원들이 자신의 지식/경험을 공유하는 브런치 글을 돌아가면서 쓰고 있고 나도 함께하기로 결정하였다. 내가 가치 있게 공유할 수 있는 내용이 무엇인지를 고민하면서 나의 과거 경험들을 생각해보았다.나는 2002년 웹 디자인을 시작으로 퍼블리싱 업무를 겸하다 2004년부터 퍼블리싱 업무를 본격적으로 했고 2011년부터 스타트업에 합류하면서 기획 및 프론트 개발까지 제품 개발에 있어서 서버 개발을 제외한 사용자와 접하는 모든 업무를 두루 경험하였다. 보통 디자인 전공자들은 기획파트로 전업하는 경우가 많지만 나는 프로그래밍 언어로 코드를 작성하는 것이 재미있어 기회가 닿을 때마다 업무 영역을 넓혀왔다.따라서 기획과 디자인, 퍼블리싱, 프론트 개발에 이르는 사용자와 접점이 많은 다양한 업무를 해오면서 경험한 것을 바탕으로, 서비스를 구성하고 화면을 개발하는 데 있어 도움이 되는 유용한 내용을 공유하고자 한다.1. 많을 땐 나눠서 해결하자정보가 많다는 것은 정리 정돈할 물건이 많다는 것과 비슷하게 생각할 수 있다. 물건이 목적에 맞게 정리되지 않으면 찾기 어렵고 정리해놓더라도 쉽게 어질러질 수 있다. 정보도 마찬가지로 목적에 맞게 정리가 안되어 있을 때 이해가 어렵게 되고, 이해가 어려워서 이해를 돕기 위한 불필요한 설명이 덧붙여지다보면 더욱 이해하기 어려운 결과를 낳게 된다. 그렇게 되면 결국 설명하는 말만 늘어나고 고객의 이해는 저편에 남게 된다.웹페이지가 뜨는데 1초, 훑어보는데 3초, 원하는 정보를 캐치하는데 5초로 충분해야 한다. 사용자가 원하는 정보를 5초 안에 캐치하지 못할 정보의 양이라면 정보를 나누는 것이 좋다. 2. 제목을 생략하지 말자목적으로 나누어진 정보를 사용자가 빠르게 캐치할 수 있도록 돕는 가장 중요한 요소는 바로 제목이다. 제목은 본문을 다 읽지 않아도 내용을 어느 정도 짐작할 수 있게 한다. 따라서 훒어보는데 3초라는 의미는 한 페이지의 메뉴와 제목을 훑어보는데 필요한 시간이다. 이런 제목의 중요성 때문에 제목은 직관적이어야 하고 되도록 생략하지 말아야 한다. 생략을 할 때는 제목이 없어도 이해가 가능하며, 생략된 제목을 누구나 유추할 수 있을 경우가 아니면 제목의 생략을 피하도록 한다. 위 캡쳐화면은 네이버 메인 콘텐츠의 일부를 캡처한 이미지다. 네이버 메인 중 제목이 생략된 예는 왼쪽 하단 영역인 '주제형 캐스트'뿐이다. 다른 영역들은 '뉴스스탠드', '쇼핑' 등 제목을 생략하지 않고 노출시키고 있다. 메인 페이지처럼 목적이 다양한 페이지일수록 콘텐츠의 성격을 분명히 알 수 있게 하는 제목은 짧은 시간 안에 원하는 정보를 찾는데 도움을 준다.3. 한눈에 중요 정보를 읽을 수 있게 하자그다음으로는 정보의 배치이다. 해당 정보가 발생한 원인, 결과 등 고객이 인지하는 과정에 기반한 그룹으로 나누는 것이 좋다. 정보를 배치할 때는 개별 정보의 중요도 순서와 왼쪽에서 오른쪽, 위에서 아래로 흘러가는 흐름대로 배치고 중간에 역행하는 구성이 없는 것이 좋다. 국내 대형 인터넷 쇼핑몰의 상품 목록을 보면서 위 설명을 이해할 수 있다.정보 배치에 정답이 있는 것은 아니지만 마치 정답이 있는 것처럼 상품, 제목, 할인율, 가격, 현재 판매현황에 이르는 순서대로 나열하고 있다. 이는 선두업체를 따라 흉내 낸 것이 아니라 이와 같은 구성이 인지하기에 용이하기 때문에 모두 이와 같이 구성했다고 생각한다.   4. 어렵지 않게 보이도록 하자서비스에 대한 정보를 전달하고 나서 우리가 기대하는 바는 고객이 서비스를 이해하고 우리 서비스를 이용하게 하는 것이다. 쇼핑몰에서는 주문을 받는 것일 것이고, 어니스트펀드의 경우는 대출이나 투자를 신청하는 경우이다. 서비스를 이용하게 하려면 고객의 정보를 필수적으로 입력을 받아야 한다. 어니스트펀드의 경우는 대출 및 투자에 대한 금융서비스이기 때문에 더욱 많은 정보를 고객에게 요청한다. 고객의 정보를 웹 상에서 입력을 받을 때는 "폼"이라는 일종의 정형화된 웹페이지 구성항목을 이용하게 되는데 이것은 정형화되어있기 때문에 남들과는 다른 개성적인 방식을 이용하기는 어렵다. 금융서비스의 입력 폼이 아주 쉽지는 않다는 것을 고객들은 여러 다른 서비스를 이용하면서 어느 정도 알고 있다. 그러나 고객이 중간에 포기하지 않고 제대로 서비스 이용을 완료할 수 있도록 어렵지 않게 만들어야 하고, 언제나 경쟁사의 서비스를 확인하고 경쟁사보다는 어려워 보이지 않도록 만들어야 한다.5. 순서는 반드시 지키자순서는 여러 가지가 있다. 입력해야 할 항목이 무엇인지를 알려주는 입력항목 및 입력하는 창(=입력 필드), 입력하는데 필요한 도움말, 입력해야 할 항목들을 나열하고 전송/입력완료 버튼까지의 순서가 곧 정보의 순서이다. 이 중 쉽게 놓치는 부분은 첫 입력 필드에서 입력완료 버튼까지의 여정 중에 연관이 없는 링크나 버튼을 추가하는 경우이다. 이 순서는 디자인상으로는 잘 구분되지 않을 수 있지만, 웹코드 상으로는 100% 지켜져야 하는 순서이고 디자인과 웹코드의 순서가 일치하면 가장 좋은 결과이다.'다음'과 '네이버'의 로그인 영역을 비교해보자면 두 포탈 서비스 모두 메인 검색창에서 탭키로 아이디 입력 칸까지 이동할 수 있지만, 아이디 입력 후 비밀번호를 입력하고 로그인 버튼을 누르기까지의 탭키 이동 경로가 다르다. 다음 로그인 화면네이버 로그인 화면다   음 : 아이디 입력 -> 비밀번호 입력 -> 로그인 버튼 -> 로그인 상태 유지 순서로 이동한다.네이버 : 아이디 입력 -> 비밀번호 입력 -> 로그인 상태 유지 -> IP보안 선택여부 -> 로그인이다.탭키로 입력필드를 이동하는 경우가 곧 웹코드상에서의 각 입력 필드의 순서가 되는데, '다음'과 같은 경우는 아이디/비밀번호 입력 후 로그인에 대한 옵션을 키보드로 선택하기 위해서는 로그인 버튼을 지나쳐야 선택할 수 있다. 로그인에 대한 옵션은 로그인 버튼을 선택하기 전에 나오는 것이 더 자연스럽지 않을까? 눈에 보이는 순서도 중요하지만 각 입력필드의 논리적 우선순위를 지키는 것 또한 중요하다.6. 틀린 부분을 즉시 명확하게 알려주자고객이 언제나 우리가 기대한 값을 입력해주지는 않는다. 이 경우 너무너무 명확하게도 오류가 발생한 시점에 오류가 발생한 지점을 알려주는 것이 필요하다. 10개의 입력필드가 있는데 입력완료 버튼을 누르자마자 10개 항목 구구절절이 맞고 틀리고를 알려주는 것보다는, 오류가 발생한 시점에 알려주는 것이 훨씬 인지가 빠르다. 따라서 오류 항목을 보여주어야 하는 곳은 해당 입력필드의 다음이고 전송 버튼이나 후속 작업 이전이 되는 것이다. 위 캡쳐화면은 어니스트펀드에서 대출을 받고자 할 때 이름과 생년월일을 입력하는 부분이다. 필자는 생년월일 부분에 5월 32일이라고 없는 날짜 정보를 넣었고, 이와 같은 입력 실수는 사용자가 실수를 했다는 것을 시스템이 "정확한 정보를 입력해 주세요"라고 즉시 알려주고 있어 사용자가 입력을 실수하지 않도록 돕고 있다. 웹 페이지를 보는 고객들은 아무런 도움 없이 해당 서비스를 이해하고 이용할 수 있어야 한다. 똑같은 정보라고 하더라도 어떤 순서로 어떻게 보여주느냐에 따라서 인지와 인식은 크게 개선될 수 있다. 하물며 정보까지 가공을 하게 되면 더욱 큰 개선을 이끌어 낼 수 있다. 각자가 맡고 있는 서비스에서 5초 안에 고객이 원하는 정보를 웹 페이지 내에서 바로 인지할 수 있는지를 생각해보고 아니다면 테스트해보고 개선해보자.#어니스트펀드 #개발자 #개발팀 #UX개발 #철학 #인사이트
조회수 10375

회사소개서를 만들어보자!(빡셈주의)(2)

-각 페이지 내용구성을 조율하기저번편에서 준비단계까진 진행을 해보았습니다. 이미 이것만으로도 모두들 하얗게 불태웠을 것 같습니다. 하지만 진짜 싸움은 지금부터죠.                                              그..그만해 시발놈아...자, 이제부턴 본격적으로 제작을 해볼 겁니다. 당연히 디자이너가 해야할 일과 대표님이 하셔야 할 일이 나누어지겠죠. 먼저 그걸 간단히 정리해보고 시작해볼까용?대표님이 하셔야 할 일-각 페이지 내용구성을 조율하기-자료/사진 모아서 전달하기-회사소개할 1분스피치 만들기-수정요청하기-디자이너에게 돈주기디자이너가 해야 할 일-전체컨셉과 디자인레퍼런스 확보하기-대표님과 조율하여 페이지구성 정리하기-레이아웃정하기-그리드짜기-이미지확보하기-본격 디자인시작-수정요청 반영하기-세금계산서 발행하기-(선택) 인쇄업체 발주하기-(선택) 감리진행하나하나 간단하게 정리해보겠습니다!! 자세하게 쓰면 스크롤을 내리던 중지손가락의 2번째 마디관절에 무리가 가므로..간단간단하게!! 하지만 핵심만1. 각 페이지 내용구성 조율하기페이지구성이 먼저입니다. 무턱대고 자료를 먼저 주는게 아니고, 페이지순서에 맞춰서 각 페이지에 자료를 얹어서 주는 것이 빠르고 정확합니다. 페이지구성은 이렇게 합시다.표지- 회사의 색깔이 빡!!드러나면서도 심플하고 세련되게!소개페이지- 아까 정의했던 우리는 어떤 사람이고 무슨 일을 왜 하는지챕터1- 그것이 얼마나 좋은 것인지챕터2- 실제로 어떤 일들을 했는지챕터3- 앞으론 어떤 일들을 할 건지컨택포인트- 우리에게 연락해줘뒷표지 - 또 봅시다.대략 아주 기본적인 틀입니다. 보통 스피치를 하거나 피칭할 때의 순서와도 비슷하고 논리적으로 안정적인 구조이죠. 하지만 너무 안정적이다보니 가끔 식상하거나 지겨울수도 있습니다. 그럴 땐 저를 불러주시면....(하하하하)...어쨋든 페이지는 1~10page까지 각 페이지마다 고유한 내용이 담겨야 합니다. 세 가지를 기억해주세요.1. 한 페이지엔 반드시 한가지 내용만2. 한 페이지에 여백은 40%이상3. 앞,뒤페이지와 반드시 연결고리가 있을 것!할 말이 많다보니, 한 페이지에 매출그래프, 제품정보, 연혁 까지 다 때려박는 경우가 있는데 제발 그러지 않았으면 좋겠습니다. 눈도 쉬어갈 곳이 있어야 하잖아요. 여백이란 것은 '없는 공간' 이 아니라 시선이 움직이는 '통로'와 같습니다. 고속도로 마냥 뻥뻥 뚫려있어야 시원시원하게 다음 컨텐츠로 이동이 가능하죠!!                               글이 아무리 많아도 이쁠 수 있는 이유는적당한 여백과 정렬된 구도, 깔끔한 컬러와 정돈된 이미지만 있으면 이렇게 내용이 많아져도 정돈시켜놓을 수 있습니다. 물론 글이 재미없으면 안되겠지만요. 찰진 필력 또한 중요합니다.(병맛스러운 거 말고..잘 읽히는)더불어서 각 페이지는 앞페이지와 뒷페이지의 내용과 서로 인과관계 및 상관성이 있어야합니다!! 페이지가 혼자 둥...떨어져서 한참 장점얘기하고 있는데 갑자기 매출얘기 나오고 이러면 굉장히 이상합니다. 이 페이지에 뭐가 들어가야 하는데!!! 라고 고민하기 전에 앞과 뒤에서 어떤 내용이 나올지 유기적으로 생가해보셔야 합니다. 그래서 저는 흔히 각 페이지를 "한문장으로 만들고" 각 페이지마다 "접속사"로 연결되는지를 보시라고 합니다.1. 지금껏 우린 은행업무를  볼 때마다 잘 모르는 용어들과 복잡한 절차로 늘 어려움을 겪어왔습니다.2. 특히 공인인증서와 지점을 찾아가야 하는 번거로움, 복잡한 가입절차가 우릴 괴롭혔죠.3. 그래서! 우리가 만들었습니다. 바로 이것을이런식으로 각 페이지의 메시지를 정확하게 잡고, 앞 뒤 페이지와 유기적인 연결을 만들어내는 거예요. 결국 각 페이지들의 '한 문장' 들이 합쳐지게 되면 자연스럽게 1분스피치 용 스크립트가 완성될 수 있도록 말입니다.2. 자료/사진 모아서 전달하기이렇게 각 페이지의 내용이 완성되면, 각 페이지에 필요한 사진과 자료들만 추려서 전달해주시면 됩니다! 폴더링을 할때는1번페이지.zip2번페이지.zip...이런식으로 하면 아주 깔끔하겠죠?3. 1분스피치 스크립트 만들기아까 위에서 페이지구성할 때 각페이지를 '한  문장'으로 구성해보시라고 했잖아요. 그 문장들에 접속사를 연결시켜주면 딱 1분짜리 스크립트가 나올 수 있어요. 약 10문장 나올테니까, 처음 소개멘트와 중간중간에 여러 수식어구까지 포함하면 1분짜리 짜잔!!4. 수정요청하기수정요청은 눈에 보일때마다 건건히 던지는 게 아니예요. 보통 수정은 3회까지가 무료고, 그 이후부턴 회당 얼마로 유료수정이 들어갑니다. 그러니까, 비용절감과 함께 일을 효율적으로 진행하려면 전체적으로 쫙 보면서 수정내용들을 한번에 정리해서 주는 것이 좋아요. 대신 '수정' 이라고 하는 건 '갈아엎자' 란 얘기가 아닙니다. 전체내용의 5%미만의 변경이 있는 경우를 '수정'이라고 하죠. 이 때 전체컨셉, 구도, 그리드는 깰 수 없습니다. 색의 변화, 간단한 위치변화, 워딩수정, 이미지교체, 스타일단순화 등.. 가벼운 수준의 수정을 요청할 수 있습니다.5. 디자이너에게 돈주기계약사항에 따라 지급방식이나 일시는 다르게 구성되지만, 일반적으론 세금계산서를 청구로 발급받은 후 청구일자에 입금을 원칙으로 합니다. 계약당시 선급금과 중도금, 잔금 구분의 여부에 따라 지급일자가 분할되기도 하지만, 보통 회사소개서 1건으로 진행될 경우엔 금액이 그렇게 크진 않으므로 선급50%/잔금50% 또는 선급금없이 전액후입금100% 등으로 진행됩니다. 부득이한 경우 회사지급일에 맞추어 지급되지만 보통은 세금계산서 발행일로부터 7일 이내에 입금이 매너입니다 :)여기까지가 대표님이 하실 일들이고, 이 밑에서부턴 디자이너가 할 일입니다. 물론 대표님이 직접 손대실 부분은 아니지만, 어떤 과정을 거쳐서 소개서가 디자인되고 완성되는 지 궁금하시다면 한 번 살펴보시는 것이 좋을 것 같습니다. 그래야 서로 작업에 대한 이해도가 생길 테니까용!!~1. 전체컨셉과 레퍼런스 확보하기미팅을 통해서 컨셉을 잡았다면, 관련 컨셉과 비슷한 레퍼런스등을 수집하고 공유하면서 서로가 원하는 스타일을 찾아나가는 편이 빠르고 좋습니다. '심플하고 깔끔한' 스타일이란 건 굉장히 엄청나게 다양한 요소들이 있기 때문에...단순히 그런 '스타일' 이란 단어로 서로 커뮤니케이션 하다보면 나중에 갈아엎어야 하는 대참사가 생기기도 합니다. 미리미리 레퍼런스로 공유해서 색을 맞춰나가도록 합시다.                                         심플도 심플나름..2. 페이지구성 정리하기대표님과 함께 진행할 영역입니다. 대표님은 내용적인 측면을 정리하는 쪽이고, 디자이너는 그것을 어떤 방식으로 구현할 지를 결정합니다. 인포그래픽이나, 심플한 그래프, 또는 도형, 아이콘, 이미지 등 어떤 것을 어떻게 이용할 것인지를 결정해야 하므로, 각 페이지에 대한 역할과 설명을 충분히 듣고 서로 이해해야 합니다.3. 레이아웃 설정하기일단 내용이 어느정도 잡혔고 자료를 받았다면 이젠, 각 페이지의 레이아웃을 잡고 통일/개별화 시켜야 합니다. 이미지의 갯수와 그래프의 크기, 각 텍스트의 양을 고려해서 페이지의 각 부분의 레이아웃을 확정시킵니다.                         각 페이지마다 서로 다른 레이아웃이 등장하기 마련입니다.4. 그리드 설정하기전 전문적인 편집디자이너는 아니지만, 각각의 페이지에는 컨텐츠들이 위치하고 유지해야할 지정된 공식들이 어느정도 잡혀있습니다. 이것을 Grid 라고 하고, 디자인요소들은 이 요소들 위에서 배치되고 움직입니다. 이것이 깨지기 시작하면 그 때부터 뭔가 거슬리고 보기 불편한 모습이 되기 시작하죠. 이 그리드는 자체설정할 수도 있지만, 그러기엔 너무 복잡하고 어렵기 때문에 기존에 어느정도 공식화된 그리드를 활용하는 경우가 많습니다.예를 들어 일반적인 종이규격은 DIN시스템에 맞춰지는데 우리나라에선 A,B형을 주로 사용하죠. A형은 841 x 1,189mm / B형은 1,000 x 1,414mm 입니다. 이 때 다양한 판형을 선택해서 제작이 가능한 데 주로 황금비라고 하는 1:1.6을 활용하거나 적당한 너비의 우항루트값을 적용하여 변형비를 만들기도 합니다. 컬럼의 경우 한줄에 7단어정도가 적절합니다(4in = 24pica = 10cm 내외) 이정도로 행의 길이가 정해지죠. 행간은 보통 본문포인의 50%정도를 주는 것이 일반적이고 부제목, 사진, 캡션의 행간과 통일시킵니다. 마진(상하좌우여백)은 안:위:바깥:아래 기준으로 1 : 1.2 : 1.44 : 1.73 을 주로 활용합니다. 전체컨텐츠의 20%정도 여백을 두는 것이죠. (뭔가 개복잡해)                         이런식으로 각 여백과 위치, 균형을 잡아서 그리드를 구성합니다.5. 본격적인 디자인                                                 이쁘게 이쁘게                                                느아아아아!!!                                건들면 다 죽는거야. 화장실도 안갈꺼야.6. 수정요청아까 위에서 설명한 바와 같이, 갈아엎어달라는 요청이 아닌, 일부수정에 대한 요청을 받아 진행합니다. 컨셉과 제작에 관련된 여러가지 정보는 디자이너가 훨씬  잘 알고있기때문에, 무조건적인 수정보단 '~어떠세요?' 라고 상호존중의 부드러운 멘트가 오고간다면 아주 좋은 퀄리티가 나올 것입니다. 그냥 닥치고 무조건 바꿔주세요 라고 하면 그리드고 나발이고 그냥 아무렇게나 쳐박힌 이미지를 볼 수도 있죠.7. 세금계산서발급쌍놈의 Veraport 는 왜 깔때마다 업데이트 또는 미설치라고 나오는지 모르겠지만..홈택스에 들어가서 또 여러 녀석들을 컴퓨터에 깔아서 컴퓨터를 걸레로 만든 후 세금계산서를 발급하도록 합시다.8. 인쇄요청/감리가끔 인쇄까지 함께 요청하는 경우가 있는데, 뭐 디자이너들이야 몇몇 아는 인쇄소들이 있기 때문에 그리 어려운 일이 아닙니다. 가끔 색이 정말정말 중요한 경우엔 감리를 진행하기도 합니다요.  물론 추가비용이 있을 것입니다. 인쇄소에서도 감리진행하려면 추가 감리비를(5만원내외?) 를 받기 때문이지요. 감리를 진행하다가 색에 뭔가 문제가 있을경우엔 형판을 교체하는 비용도 들어갑니다.(5만원정도?)보통 용지와 중량선택에서 많이들 어려워하시는데 아트/스노우/랑데뷰/몽블랑 중에서 고르시면 무난할 것 같습니다. 아트지는 번들거리는 감이 좀 있고, 스노우는 무광이 강하고 부드러운 표면을 지녔습니다. 랑데뷰는 두께감이 조금 있고, 표면에 약간의 질감이 좀 있는 편입니다. 몽블랑은 수입지로 눈이 편한 미색을 띠고있고 적당한 표면의 질감이 있는 편입니다. 저 같은 경우는 주로 스노우나 랑데뷰를 자주 쓰는데 표지는 250g 정도 내지는 150g정도를 유지합니다. 종이가 두껍다고 다 있어보이는 것은 아니기 때문에 접지할 때 종이가 터질 위험도 잘 생각해보셔야 합니다. 가끔 표지면이 아주 두꺼워서 접지시 터질위험이 있을 땐 표면에 무광코팅(흔히 라미네이팅이라고 합니다.)을 진행하기도 합니다.제본은 여러가지 방식이 있지만 20page정도라면 10장 내외이니 중철제본이 적당합니다. 너무 얇은데 본딩/열제본을 하면 어차피 다 흩어져버리거든요. 그 이상의 많은 페이지의 경우엔 본딩제본을 주로 이용합니다. (그 흔히 떡제본이라고 하는)이렇게 해서 회사소개서가 짜잔 하고 나오게 되면..기쁨과 감격에 벅차고 막 그럽니다. 앞으론 이 소개서를 항상 5개씩 가방에 넣고다니다가 우연스레 길에서 만나게 될 수도있는 클라이언트에게 즉시 건네어 너와 난 빅뱅이후로 윤회를 거듭한 인연이었어..를 거듭 확인시켜주시면 아주 좋을 듯 합니다.                                              거친 글이었다...#애프터모멘트크리에이티브랩 #회사소개서 #사업소개서 #작성법 #꿀팁 #인사이트 #조언
조회수 1497

'회사소개서 만드는데 얼마에요?'

오더의 정석: 무엇을 알려주어야 할까? 우리가 병원에 가면 일단 접수를 하고, 기다렸다가 의사샘을 만나서 증상을 얘기하잖아요. 사실 모든 일은 이런 순서라는 게 있어요. 다짜고짜 원장실로 직행한 후 멱살을 잡고 주사를 내놓으라고 할 수 없어요. 증상도 얘기 안하고 얼마냐고 물어볼 수도 없어요. 어딜 어떻게 하고 싶은지 말을 해줘야 해요.얼마여!! 얼마냐고!!!!!디자이너에게 의뢰를 할 때도 비슷해요. 뭔가 접수가 있고, 미팅을 하고 협의를 하고 증상을 얘기한 후 거기에 맞는 솔루션의 비용을 책정하는 것이 기본이예요. 자, 이제 한 번 의뢰를 해볼께요.우리는 회사소개서를 만들고싶으니, 일단 회사소개서를 잘 만드는 사람을 수소문 해볼거예요. 소개건이나 포트폴리오 사이트를 뒤져서 괜찮은 컨셉의 디자이너를 컨택하겠죠. 컨택 후엔 유비의 심정으로 메시지를 보낼 거예요. 보통 페이스북이나 SNS에서 디자이너를 소개받은 경우엔 이 메시지의 간결성이 더욱 강렬해집니다.   “회사소개서 만들려고 하는데, 견적 요청드립니다.” “회사소개서 만들려고 하는데 가능하신가요.” “회사소개서 제작하는데 얼마정도 하시나요.” 회사소개서 얼마임? 이라고 하지 않은 것이 다행일정도로 간결한 의뢰예요.조만간 초성만 쓸지도 몰라요.  ㅅㄱㅅ ㅇㅁ?대다수의 이러한 메시지를 받은 디자이너는 머리위에 600개 정도의 물음표가 생기기 마련이죠.???????????????????무슨 종류의 어떤 제작건이며, 컨셉은 무엇이고, 가로인지, 세로인지, 페이지는, 기한은, 용도는, 인쇄는, 디자인범위는 아트웍이나 사진, 자료제공은 어떻게, 담당자는, 지불방식은, 계약여부는?등등 엄청난 궁금증을 뒤로 한 채 다시 물어보곤 해요.“언제까지인가요?” “다음주 수요일까지 해주시면 됩니다.” "몇 장이예요?""20장 정도됩니다."보통은 이런 식의 대화가 수십 번 오고 가는데 이러한 소통에는 디자이너의 책임도 있을 거예요. 아예 의뢰서양식을 만들어서 기입해 달라고 메일로 보내면 차라리 간편할 일일 수도 있겠네요. 하지만, 우리는 대화끝에 ‘^^’도 붙여야 하고 ’ㅜㅜ’도 붙여야 하는 등 힘들고도 답답한 대화를 이어가는 것이 보통이예요. 의뢰는 하는 방법을 스크립트로 말하면 대략 아래와 같을 거예요. ‘이번에 저희 회사 회사소개서를 만들려고 합니다. OO사이트의 포트폴리오를 보고 연락드립니다. 해당 회사소개서는 아래 내용과 함께 제작을 진행하려고 하오니, 확인하시고 관련된 견적과 추가적인 포트폴리오가 있으시다면 유첨하여 회신주시면 감사드리겠습니다.1. 제작기한 : 20XX년 9월30일(18:00까지)2. 제작목적 : 대외발송용 회사소개서 제작3. 제작방식 : 30페이지의 가로좌철 중철제본 표지4p+내지26p 구성 / A4사이즈4. 자료제공 : 디자인에 필요한 사진자료 및 텍스트는 제공해드립니다.5. 제공시점 : 견적확인 후 구두계약상 확정이 되면 당일 중으로 전달해드릴 예정입니다.6. 제작컨셉 : 하기첨부한 레퍼런스 양식을 확인해주시면 되겠습니다.(이미지첨부)7. 작업범위 : 인쇄는 저희측에서 진행합니다, 디자이너님께는 제작된 디자인파일의 PDF본과 ai원본파일을 요청드립니다. 원본제공에 대한 추가옵션도 견적에 포함시켜주시면 감사하겠습니다.8. 업체특성 : 저희는 비즈니스솔루션을 제공하는 IT업체로서 B2B를 전문으로 하는 터라 전문적이고 레퍼런스가 눈에 띄는 형식이면 좋겠습니다. 상세한 회사소개는 회사소개서를 첨부하여 드립니다.9. 계약방식 : 견적 조율 후 계약은 서면으로 작성합니다.10. 기정예산 : 추후 협의가능합니다.11. 지불방식 : 견적 조율 후 계약금30%와 잔금70%형식으로 지불되며 일정은 추후 계약서에 상세기재하도록 하겠습니다.12. 담당자명 : OOO / 연락처 : 010-0000-0000이러한 방식으로 의뢰를 해준다면 엄청나게 감사하고 황공해요.  감사!!!!!!!!!!!!!!!!!하지만, 굳이 이정도 까지가 아니더라도 적어도 기본적인 기한, 비용, 작업범위 등 정도만이라도 알려주는 것은 일종의 예의라고 할 수 있죠. 디자이너는 미륵보살이 아니기에 관심법을 쓸 수 없어요.그러나 무작정 이렇게 적으라고 강요하는 것은 실무자입장에서 다소 억울할 수 있으니, 잠시 디자이너는 어떤 방식으로 작업을 하는 지 살펴볼 필요가 있어요.  디자이너는 우선 백지에서 작업을 시작하지 않아요. 적어도 저는 그래요. 전 백지가 꽤나 무섭거든요. 기본적으로 클라이언트가 요청한 내용과 컨셉에 대한 다양한 레퍼런스를 검토하고 찾아보는 작업이 먼저예요. 핀터레스트를 뒤지고 비핸스를 뒤지고 뒤지다가 구경하고 계속 보다가..하루가 가고.........(이러면 안됨)핀터레스트를 보는 눈빛....우리 회사가 원하는 방향과 색깔을 얘기해주지 않으면 애당초 컨셉 설정 자체가 어려워질 거예요. 핀터레스트에는 오만가지 예쁘고 다양한 시안들이 가득하거든요.   이 작업을 좀 더 빠르게 할 수 있는 방법이 담당자가 직접 레퍼런스 이미지를 찾아서 첨부해주는 방법인데, 귀찮다면 디자이너에게 직접 요청하도록 해요.  물론 홈페이지 주소만 덜렁 던져주고 ‘당신이 알아서 찾아보세요.’ 라는 식의 행동은 자칫 오해를 불러일으킬 수 있으니, 상세한 회사설명을 직접 언급해주는 편이 좋아요. 이런 식으로 말이죠.우리 회사는 이런이런 일을 하고 있는데 타겟층은 이러하고 이런 서비스를 통해 이런 가치를 주려고 합니다. 현재 이런이런 정도까지 브랜드작업이 진행되있는데 이것때문에 주춤하고 있고, 이 소개서를 통해 넥스트 이런것들을 달성해보려고 해요!~ 지금까지 저희가 해왔던 대략적인 시안컨셉이 이러했습니다. 하지만 꼭 이렇게 가지 않아도 돼요. 조금 가벼운 느낌을 주면서 아기자기한 컨셉으로 재구성해보려고 하는데, 어울리는 컨셉 2,3가지를 제안해주시면 감사하겠습니다. 위에서 컨셉이 잡히고 나면 레이아웃과 스타일 설정을 한다고 했는데, 이 레이아웃이란 것은 백지에 선을 긋는 작업이므로 일단 작업사이즈를 정확하게 알아야하죠. 주로 mm단위나 픽셀단위로 알려주어야 해요! 그리고 책자라면 제본위치와 방식두요!(기껏 작업해놓고 타공으로 글자 다 뚫리면 개난감) 이 후 본격적인 작업을 진행하는데 디자이너는 하루에 얼마나 작업을 해야 하고, 수정시기는 언제쯤이 좋을 지 시간분배를 해요.  디자이너는 도깨비방망이로 작업하지 않아요.(물론 그런게 있으면 좋겠지만) 나오라면 뚝딱 나오는 것이 아니며, 폰트 자간 수정하는 데에만 몇 시간이 걸리기도 하죠. 물론 이게 좋은 건 아니지만, 확실히 물리적 시간이 걸리는 노가다가 많거든요. PPT디자인도 그러해요. 물리적으로도 1페이지당 1시간씩만 잡아도 30페이지면 30시간이예요. 대부분 디자인은 중간에 갈아엎거나 컨셉 전체가 바뀌는 경우도 있기 때문에 물리적계산보다 훨씬 오랜 시간이 걸리기 마련이겠죠. 물론 저 30시간은 밥도 안 먹고, 잠도 안 자고, 화장실도 안 간다는 전제로 가능하다는 얘기예요.참으면 건강에 안좋음..하지만 디자이너도 사람이니 카톡 볼 시간은 있어야 하지 않겠습니까. 작업기한은 명확하게 알려주도록 해요. 단, 기한은 1주일뒤인데, 자료를 주는 시점이 3일 뒤라면 그것 또한 문제가 되겠죠... 제작기한은 자료를 제공하는 시점으로부터 몇 일로 책정하여 알려주는 것이 온당해요! 그리고 가장 중요한 비용문제는 직접 제안해도, 역제안을 요청해도 상관은 없는 것 같아요. 다만, ‘일단 그것은 협의중이니 디자인부터 해주세요.’ 라는 것은 좋지 않아요. 아직 반찬은 사오지 않았지만 물부터 올려놔라..하는 것과 같달까요. 세상 어느 법도에도 얼마 줄 지도 얘기하지 않고 무작정 일부터 시키는 경우는 없어요. 이러한 깜깜이 계약를 진행하다가 추후에 도저히 맞지 않는 견적으로 서로 문제가 생기게 되면 디자이너도 클라이언트도 서로 피곤해지기 마련이죠. 그러니 비용문제는 세상 무엇보다 정확하고 딱딱 떨어지게 얘기하는 것이 좋아요.  그렇지 않으면 이런 미션을 수행하게 됨 물론 위의 내용은 제작물을 외주로 진행할 때의 경우이지만 인하우스 디자이너에게 요청할 때도 거의 비슷해요! 내부 디자이너에겐 위 내용의 1~7번까지를 서면으로 제공해주는 것이 좋으며, 추가적으로 결재라인과 1,2차 시안제출일도 함께 적어주는 거예요. 다른 업무와의 균형도 맞추어야 하고 작업시간도 책정해야 해요. 이 때 ‘당연히 우리의 놀라우신 디자이너님은 새벽2시에 퇴근하시겠지?’ 라는 생각의 업무시간 책정은 싫어요. 디자이너도 밤에 잠을 청하는 생명체예요.  -.- 내부 제작물이든, 외주건이든 결국 가장 중요한 것은 ‘소통의 정확성’ 이예요. 사실 1번, 2번, 3번으로 항목별 나열을 한 것은 줄글로 쓸 때보다 정보누락의 확률이 줄어들기 때문이죠. 대부분 줄글이나 구두지시는 추후에 오더상의 문제를 야기할 가능성이 커요. 읽다가 놓치는 것들이 많아지거든요. 넘버링은 신비한 힘을 지니고 있으니 숫자의 힘을 믿어보아요. 
조회수 1226

2017 NDC 리뷰) UX 분석을 통한 유저 알아보기

 게임 산업은 UX 분석 및 적용을 가장 빠르고, 정확하게 하고 있는 산업 중 하나라는 것을 알고 계신가요? 많은 분들이 생각하시기에 "UX = 비주얼적인 산출물을 만드는 과정."이라고 생각하실 수 있겠지만, 사실 UX는 "가설을 검증하고, 확인하고, 문제가 파악되면, 해결방법을 찾아 개선하는 과정." 즉, 가설 검증과 적용이라는 과학, 통계학에 더 가까운 업무라고 생각합니다. 해당 세션은, 아직 UX 리서치엔 무슨 방법이 있고, 현업에서의  UX 분석 과정은 어떤 식으로 하는지를 기본지식이 없는 분들도 쉽게 이해할 수 있는 좋은 세션이었습니다.우선 인간은 감정을 두 가지로 나타내는데요,표면적 표상: Event에 대한 자신의 감정을 행동을 통해 표현 해 내는 일내재적 감정: Event에 대한 감정을 표현하진 않지만, 이를 통해 느낀 감정을 가지고 있고, 표면적인 표상은 유저가 직접 쏟아내는 피드백을 통해 알 수 있지만, 유저들의 내재적인 감정을 알아내기 위해서 서비스 제공자들은,  1. 설문조사  2. FGT(Focus Group Test)  3. FGI(Focus Group Interview)  4. UT(User Test)  5. 로그 분석등의 방법을 사용합니다.또한 이런 분석의 종류는, 유저들의 선택을 수치적으로 표현할 수 있는 정량적 분석, 예를 들어   1. FGT   2. FGI   3. 로그분석모든 부분을 수치적으로 표시할 순 없지만, 유저의 심리적인 부분을 파악할 수 있는 정성적 분석,   1. User Test   2. Shadowing 두 가지 방법으로 조사할 수 있습니다. 이후부터는 그렇다면 넥슨은 어떤 식으로 리서치를 했는가? 에 대한 프로세스를 보여드릴게요. (굉장히 시퀄 하고, 단순합니다.... 글을 못써서 노잼일 거예요...)메이플 스토리 M (User Testing)의도 1.- 초반 유저 플로우가 기획한 방향대로 흘러가고 있는지에 대한 파악- 의도한 플로우 VS 유저의 실재 플로우를 비교해 보며 어떤 부분에서 다른 점이 있는지 파악해결 프로세스  > 모바일 유저들과 UT (UX 리서치 결정)  > 파악 결과, 매우 다르게 진행(문제 인지)     - 리서치를 통한 이유 파악: 제공하는 플로우에 대한 인지가 매우 부족  > 초반 플레이 구간을 매끄럽게 진행할 수 있도록 "자동 이동"이라는 구간을 설정 (해결 방안 고안)  > 보상 제공 즉시 바로 사용이 가능하도록 플로우를 유도 (해결 방안 고안 2)의도 2. - 플로우에서 유저가 어려움을 느끼는 부분을 파악 해결 프로세스  > 1:1 UT;  행동 관찰 + 인터뷰 통해 이슈 발견 (UX 리서치 결정)  > 파악 결과, 유저들의 대부분이 조작에 대한 어려움을 느낌 (문제 인지)  > 상세정보 부족으로 의도하는 바에 대해 유도하는 부분에서 오류가 발생 (문제 파악)  > 자동기능 추가 (해결 방안 고안)Tera의도 1. - 새로운 콘텐츠에 대해 유저들의 어떤 방식으로 전략을 어떻게 구상하는지에 대해 사전 파악- 필요한 콘텐츠, 필요 없는 콘텐츠에 대한 확인 작업- 행동사항에서 유저들이 필요한 부분 확인해결 프로세스  > 해결 숙련자 40인 FGT + 게임 플레이 (UX 리서치 방법 결정 1)  > 플레이 페턴 확인 및 분석 (UX 리서치 방법 결정 2)  > 채팅 로깅 확인을 통해  유저의 코멘트 파악 (UX 리서치 방법 결정 3)의도 2. - 가장 중요하게 생각하는 승리의 조건은 무엇인지해결 프로세스  > 설문조사 + FGI 병행을 통한 내재적 감정 파악 (UX 리서치 방법 결정)  > 설문조사와 FGI의 간극에서 유저가 내재적으로 가지고 있는 부분들을 분석으로 파악 가능마비노기 영웅전의도 1. - 초기 유저들이 10분~15분 이후 이탈해결 프로세스  > Shadowing (UX 리서치 방법 결정)  > 유저 의도 + 나와있는 조건 + 결과가 유저가 생각하는 방향으로 이동하지 않음 (문제인지)  > 토스트 팝업이 주는 가이드의 부족 + UI 상의 그림이 주는 어포던스 + 워딩 메시지가 주는 모호함 존재 (문제 파악)덧,1. 이후 레고도 있었지만, 끝까지 정확하게 듣지 못해서 패스.. 나중에 업데이트할게요!2. FGT? FGT? UT? Shadowing? 등에 대한 자세한 설명은 다음 세션에서 세세하게 설명드리도록 할게요! 많은 분들이 보시기엔, "UX에 관련된 일을 하고 있습니다."라는 것이 밖에서 볼 땐  백조와 같이 우아하고 멋져 보일 수 있겠지만, 속을 보면, 가라앉지 않으려고 열심히 발버둥 치고 있는 게 진짜 현업의 UX다.라고 한 글을 봤었는데요, 세션을 듣는 내내  그런 생각을 했던 것 같아요.유저의 마음을 읽기엔 그 무슨 방법을 사용한다고 해도 쉽지 않습니다. 속칭 "UX를 한다."라는 것은 "이럴 것 같으니깐 진행해야 합니다."보단, "이런 결과가 나왔기 때문에, 이렇게 진행해야 합니다."라는 당위를 만들어 가는 과정이기 때문에 리서치를 준비하는 과정, 리서치를 진행하는 과정, 리서치를 통해 문제를 해결해 나가는 과정은 고행의 연속입니다. 쉽지 않아요. 내가 생각한 서비스의 플우가가 맞는 걸까?유저가 내가 생각한 져니와 같이 생각할까?문제가 생긴다면 어떤 식으로 조정해야 할까?문제가 생긴 게 내가 예측한 가설이 맞는 걸까?문제를 파악하기 위해선 어떤 식으로 리서치를 하는 게 적합할까?내가 고려하지 못한 부분에서 문제가 있으면 어떡하지?결과를 보고 잘못된 인사이트를 내면 어떡하지?보고 시간이 곧 다가오는데 분석은 끝이 안 보이는데 어떡하지?기타 등등... 그래서 "직관을 믿을 때도." 또는 "문제를 문제라 여기지 않으려 할 때도." 생기기 마련이죠. 그때마다 무엇이 중요한지, 또 어떤 것들을 기반으로 어떻게 유저들의 마음을 읽으려 노력해야 한다는 것은 항상 중요한 포인트라고 생각합니다. 그리고 유저를 알기 위해 노력하는 여러분들에게 박수를 보냅니다!#코인원 #블록체인 #기술기업 #암호화폐 #스타트업인사이트
조회수 1294

[건축전시회 참관 후기]2018 서울경향하우징 페어 다녀왔습니다.

 안녕하세요.  다시 찾는 인테리어, 두번째입니다. 7월 5일 오늘 서울 삼성동 코엑스에 하반기 최대 규모의 건축 전시회 '2018 서울 경향하우징 페어'기 열리기 시작했습니다. 저희도 인테리어 스타트업으로서 최근 디자인이나 기술적 경향과 업계 동향 등을 파악해보고자, 시간을 내서 방금 막 방문하고 다녀왔습니다 ㅎㅎ  집과 건축, 인테리어에 관심이 많으신 분들은 한번 참관해보시는 것도 괜찮을 것 같네요. 전시회 첫날이고 평일임에도 불구하고 사람들이 정말 많았습니다.  저희는 업계 관계자이다 보니, 문자로 초청장을 받아서 현장 등록 후 무료 입장을 했습니다. 현장 등록하면 이렇게 명찰을 나눠줍니다.  저희는 바이어 자격으로 입장했습니다.  입장 전 입구 앞쪽에 전시되어 있는 부스배치도를 통해 이번 전시회에 참가한 업체들 목록을 미리 한번 확인해보았습니다. 이번 2018 경향하우징 페어 부스에 참여한 업체들 중 이미 저희와 거래하고 있는 회사들도 보이네요 ㅎㅎ  저희처럼 시공을 주요 비즈니스로 하고 있는 경쟁 업체는 이번 전시회에는 참여하지 않은 것 같습니다.  관심있게 지켜볼만한 몇몇 업체들도 눈에 띄었습니다. 처음 눈길을 끈 부스는 곰팡이·결로 방지제업체 부스였는데요. 저희에게 도배 문의를 하시는 고객분들이 꽤 많아서 인지 저희도 관심있게 본 부스 중 하나입니다.  제품 가격을 문의해보니, 생각보다 단가가 꽤 비싸더라구요..  비싼 만큼 효과가 있을지는 잘 모르겠습니다 ^^  또 관심을 가지고 지켜본 부스 중 하나는 '영림몰딩' 부스였습니다. 몰딩 생산으로 유명한 업체인데요.  몰딩과 같은 목재 생산 외에도 방문, 마루와 같은 목재 제품과 싱크대나 욕실과 같은 인테리어 자재도 생산하고 있었네요. 생각보다 영림의 사업범위가 넓었습니다.   현재 저희 두번째마루에서도 사용하고 있는 마루 자재 중 하나인 '구정마루' 전시장입니다. 구정마루 전시 부스에서는 직원 분이 나오셔서 마루 자재에 대한 강의(?)도 해주시고 계셨습니다.  당연히 홍보 목적을 위한 부스이지만, 그래도 일반 고객분들이 참고할만한 내용들을 잘 설명해주시더라구요.   이번 서울 경향하우징페어에는 프리미엄 인테리어 컨설팅 존을 운영하고 있었습니다. 몇몇 인테리어 업체에서 참여해서 고객 모집 활동을 하고 있더라구요.  실속형 인테리어 서비스라고 해서 나온 한 인테리어 업체의 구성인데요. 24평형 아파트 기본 금액이 1100만원부터 시작인데, 벽지는 전체 실크가 아니고 바닥도 장판 기준이라고 하더라구요. 시공 가격에 크게 민감하지 않고 디자인 컨설팅에 수백만원 이상의 가치를 두시는 분들이라면 모르겠으나, 일반적인 시공가격 자체만 놓고 본다면 솔직히 '실속형'이라고 보이지는 않았습니다.  경향하우징페어 참관 후 사무실 복귀 전 근처 커피전문점에서 커피 한잔 했습니다. 날씨가 더워서 인지 카페에도 사람이 많았습니다 ㅎㅎ   건축, 인테리어에 관심 있으신 분들은 2018 서울 경향하우징페어 한번 참관해보시는 것도 괜찮을 것 같습니다.  이번주 일요일(8일)까지 코엑스에서 진행 예정인데, 주말에는 사람이 굉장히 많은 것으로 보이므로 비즈니스 미팅을 위한 방문을 내일 하시는 것을 추천드립니다.   저희 두번째는 이번 경향하우징페어 참관 후 업계 동향과 트렌드를 파악하고 더 많은 생각을 해보게 되었습니다. 앞으로도 트렌드를 놓치지 않고, 인테리어 시공 비즈니스를 개선시키기 위해 노력하겠습니다 ^^  현재 두번째는 도배,장판,마루,필름 시공을 제공하고 있습니다. 견적 문의는 아래 아이콘을 눌러주세요~ 
조회수 972

독자의 시선을 예상하라 (2/2)

Overview“언덕 위에 나무가 있다.” 이 문장을 보고 어떤 풍경을 상상했나요? 독자는 간단한 문장 하나조차도 저마다 다른 상상력을 발휘합니다. 나무에 잎은 있는지 없는지, 언덕은 낮은지 높은지, 날씨는 맑은지 흐린지 등 독자가 겪은 개인적 경험이나 생각에 따라 다르게 생각하는 것이죠.1) 하지만 위의 문장을 본 사람이라면 최소한 ‘언덕’과 ‘나무’의 형태만큼은 떠올렸을 겁니다. ‘언덕’과 ‘나무’는 크리에이터가 꼭 전해야 하는 문장의 핵심 단어와 같습니다. 두 단어가 독자에게 온전히 전해지면 언덕 위에 나무가 있는 모습(메시지)이 떠올려지니까요. 신기합니다. 문장만으로 크리에이터의 머릿속에 있는 걸 그대로 독자의 머릿속에 옮길 수 있다니. 마치 ‘언덕’과 ‘나무’ 두 단어가 날개를 달고 날아다니는 것 같은 기분입니다.2) 하이퍼텍스트(Hypertext)의 가장 큰 특징이기도 하죠.하이퍼텍스트의 원리역삼동 사무실 구석에 앉아있는 내가 한 번도 만나지 않은 당신에게 언덕과 나무를 떠올리게 했던 것처럼 하이퍼 텍스트는 시공간의 제약을 완전히 벗어납니다. 이 글도 브랜디 랩스에 올린 순간부터 세계 여기저기를 날아다닐 수 있습니다. 내가 자고 있는 시간에도 남들은 검색만 하면 읽을 수 있으니까요. 어떻게 이런 일이 가능할까요?하이퍼텍스트의 원리우선 하이퍼텍스트의 원리를 살펴봅시다. 책을 예로 들면, 겉표지(starting point)에서부터 독서를 시작하는 건 모두 같지만 독자들은 각각 다른 방식으로 책의 내용을 상상하며 이어 나갑니다.(link) 만약 독자 A와 B가 “언덕 위에 나무가 있다”는 문장을 보고 같은 풍경을 상상했다면 그 둘은 서로의 상상을 공유하고 있는 셈입니다.(node-shared experience) 반면에 100명의 독자가 잔디 깔린 언덕을 상상해도 누군가는 혼자서 바위 언덕을 상상할 수도 있습니다. 그래도 괜찮습니다. 그것은 ’언덕’이라는 하나의 단어에서 떠올릴 수 있는 수많은 풍경 중 하나일 뿐이니까요.(node-unshared experience) 점들이 촘촘하게 모여 하나의 선을 이루는 것처럼 이런 상상들이 모여 크리에이터의 이야기가 독자에게 전달됩니다.3) 이제는 디지털로 모두가 연결되었습니다. 그만큼 상상의 규모도 더욱 커졌습니다.4) 크리에이터와 독자가 동시에 같은 콘텐츠를 볼 수 있기 때문에 곳곳에서 새로운 상상이 동시다발적으로 추가됩니다. 독자는 읽는 순서를 자유롭게 선택할 수 있습니다. 책의 기본적인 순서는 페이지로 정해지지만 하이퍼텍스트는 독자가 읽는 도중 건너뛰거나, 다른 글로 이동하거나, 읽는 도중 ‘뒤로 가기’를 클릭할 수도 있습니다. 컴퓨터와 인터넷의 특성 때문에 독자의 시선이 훨씬 자유로워진 것입니다.5) 메시지를 읽게 하는 방법독자가 자유롭게 상상할 수 있다고 해서 크리에이터의 역할에 위기가 찾아온 건 아닙니다. 앞서 본 언덕 위의 나무처럼 독자가 뭘 떠올리든 상상할 메시지(starting point)를 제공하는 건 여전히 크리에이터의 몫이기 때문입니다.5) 크리에이터라면 누구나 콘텐츠를 통해 독자에게 하고 싶은 말이 있을 테고, 그것이 잘 전해져야만 콘텐츠의 가치가 더욱 높아질 겁니다. 독자의 상상력을 자극하면서도, 메시지를 제대로 전하는 방법! 어떤 것이 있을까요.1.맥락 독자가 무언가를 떠올렸다는 건 상상이 되게끔 만들었다는 의미입니다. 예시를 하나 살펴보겠습니다. 한림대학교 강동성심병원은 병원 리모델링 공사를 하면서 ‘병원이 다시 태어났다’는 메시지를 전달하고 싶었습니다. 그래서 병원에서는 의사를 모델로 세워 확 바뀐 모습을 표현했습니다. 맥락의 예 / 한림대학교 강동성심병원 제공위의 두 포스터에 등장한 의사는 동일인물입니다. 하지만 이미지가 확 바뀌어 완전히 다른 사람처럼 보입니다. 청정무균시스템을 도입하고, 첨단 하이브리드 수술실을 오픈했다는 메시지를 전달하려고 의사의 확 바뀐 이미지를 대신 보여준 것입니다. 포스터에서는 ‘확 바뀌었다!’고 대놓고 말하진 않았지만, 사람들은 바뀐 병원의 모습을 상상할 수 있을 겁니다. 여기서 중요한 것은 두 개의 포스터를 비교하며 이미지 속에 담긴 메시지를 함께 읽어냈다는 점입니다. 아마 오른쪽의 포스터만 봤다면 ‘강동성심병원 거듭나다’라는 카피가 잘 와닿지 않았을 겁니다. 병원과 의사의 모습이 서로 어떤 상관관계가 있는지 알 수 없기 때문입니다. 그러나 비교 대상 덕분에 의사의 확 바뀐 이미지를 한눈에 볼 수 있었고, 메시지 또한 이해하는 데 도움이 됐습니다. ‘바뀌었다’는 말에 날개가 달려 하이퍼텍스트로 독자에게 날아간 순간이기도 합니다. 맥락은 사전적 의미로 ‘사물 따위가 서로 이어져 있는 관계나 계통’을 말합니다. 콘텐츠 맥락도 이와 비슷합니다. 위의 두 포스터를 통해 ‘동일인물이지만 달라 보인다’는 정보를 얻을 수 있었으니까요. 그 정보는 두 대상을 서로 비교하면서 자연스럽게 생각해낸 결과입니다. 콘텐츠의 맥락은 굳이 설명하지 않아도 상관관계를 읽어낼 수 있게 도와주는 정보인 셈입니다. 2.구체적 워딩 구체적 워딩은 주로 광고에서 사용하는 기법입니다. 누구나 알고 있는 쉬운 단어를 이용해 사람들의 머릿속에 무언가를 떠올리게 만드는 것이죠. ‘계란으로 바위치기’라는 말을 들었을 때 사람들은 자연스럽게 도저히 승산이 없는 경우를 떠올립니다. 구체적 워딩이기 때문입니다. 구체적 워딩의 예 / 엿츠 제공이 제품은 엿을 식품이 아닌 ‘욕’의 관점에서 접근해 다양한 상황과 연결하고 있습니다. 맛이나 신선도 등 제품 그 자체에 대해 설명하진 않았지만 훨씬 좋은 홍보 효과를 거뒀습니다. 덕분에 이 제품을 보는 사람은 엿과 야근의 맥락을 통해 짜증나는 상황을 떠올릴 수 있었죠. 특히 이 카피는 많은 간식 중 왜 엿을 먹어야 하는지를 정확히 짚어냈습니다. 그러므로 야근에 시달리는 회사원이 가판대의 많은 간식 중 엿을 집는 건 당연한 일입니다. Conclusion꼭 화려한 영상, 잘 찍은 사진이 아니어도 됩니다. 글만으로도 독자가 상상할 수 있게 도울 수 있으니까요. 상상은 머릿속에 그림을 그려줄 뿐 아니라 전하고자 하는 메시지까지 읽게 만듭니다. 엿 봉지처럼 한 단어가 다른 뜻도 포함하고 있다면 중의적 표현을 해보는 것도 좋은 방법입니다. (물론 판단은 독자의 몫입니다.) 콘텐츠에 중요한 정보 없이 쓸데없는 말만 가득하다면, 이제부터는 긴 설명이 필요 없도록 독자가 읽어야 할 부분을 정확하게 짚어주세요. 크리에이터가 제공한 단어 하나, 문장 한 줄이 독자에겐 큰 선물이 될 겁니다. 1) 콘텐츠는 크리에이터의 단독 작업만으로는 모든 것을 충족할 수 없다. 대신에 독자와의 상호작용으로 콘텐츠를 완성할 수 있다. 즉, 나무의 상태나 언덕의 모습을 상상하는 건 독자의 몫이며 이는 독자에게 유한 또는 무한의 자유를 주는 것과 같다. 2) 크리에이터가 온라인에 콘텐츠를 업로드하는 순간, 콘텐츠는 독자와 함께 즐기는 공유의 속성을 지닌다. 3) 크리에이터가 구체적으로 표현할수록 shared node는 더욱 많아진다. 4) 좋은 콘텐츠가 뭐냐고 물으신다면 5) 하이퍼텍스트를 독자가 읽는 방법은 검색, 훑어보기, 하이퍼링크, 건너뛰기, 조각내기 등이 있다. 6) 이와 관련해 이화여대 김애령 교수는 다음과 같이 언급했다. “하이퍼텍스트의 이면에는 그것을 구성하는 코딩(coding)에 있다. 하이퍼텍스트가 독자에게 무한한 경로의 선택권을 제공할 수 있으려면 그 텍스트를 설계하는 작가는 모든 가닥들과 결과들의 데이터를 미리 만들어 두어야 한다. 따라서 독자들의 선택권은 ‘가상적’이다.” (출처는 참고문헌 참조)참고문헌 조은하(2007), 디지털 스토리텔링, 한국근대문학연구, 제15호, 261-262심은진∙윤학로(2007), 하이퍼텍스트의 새로운 글쓰기: 프랑스 디지털 문화이론을 중심으로, 외국문학연구, 제26호, 33-48김애령(2017), 디지털 매체 시대의 읽기와 해석학의 과제, 현대유럽철학연구 제45집, 185장근우, 「콘텐츠의 정석」, 예문아카이브(2017)글장근우 대리 | People&Relations [email protected]브랜디, 오직 예쁜 옷만#브랜디 #마케팅문화 #마케팅팀 #업무환경 #인사이트 #경험공유 #콘텐츠
조회수 3116

리디북스 서점 GNB 리뉴얼

해외여행 중에 길을 잘 몰라 헤맸던 경험,마트에 물건을 사러 갔는데 내가 찾는 상품이 어디 있는지 몰라 당황스러웠던 경험 있으신가요?이와 비슷하게 웹사이트를 방문했을 때 어떤 곳은 메뉴 파악이 쉽고 원하는 페이지로 이동이 쉬운 반면 어떤 곳은 메뉴가 너무 복잡하거나 메뉴를 찾는데 오래 걸려 짜증이 날 때도 있습니다.이렇게 웹사이트에서 사용자 경험에 큰 영향을 미치는 요소는 바로 GNB (Global Navigation Bar) 디자인입니다. 때문에 GNB는 매우 중요한 영역이고, 구조를 변경하는 일은 드뭅니다.커머스의 경우 제품이나 서비스 등이 변경, 추가되면서 GNB가 달라지게 됩니다. 그 예로 아마존 웹사이트의 탭 내비게이션 디자인의 변화를 보면 아마존의 제품, 서비스가 어떻게 달라졌는지 한눈에 확인할 수 있습니다.출처: 아마존 탭 네비게이션의 변화리디북스 서점의 경우, 최근 몇 년간 GNB에 큰 변화는 없었습니다. 그런데 이번에 GNB 개편을 하게 된 이유는 판타지 연재 서비스를 준비하면서 ‘판타지’ 서브 메뉴로 ‘연재’를 추가하기 위한 작업이 필요했기 때문입니다. 이번 작업을 하면서 GNB의 사용성과 디자인 완성도를 위해 고민했던 그 과정을 공유합니다.다음 문제를 해결해야 했습니다.1. 메인 카테고리와 서브 메뉴의 위계가 맞지 않음a) 메인 카테고리는 일반, 로맨스, 판타지, 만화입니다.b) 서브 메뉴는 ‘베스트셀러, 맞춤추천, 이벤트’ 입니다.메인 카테고리가 서브 메뉴 보다 상위 개념인데 모바일에서는 상/하로 배치되어 있는 반면,PC는 좌/우로 배치되어 시각적으로 위계를 구분하기 어렵습니다.그림 1) 모바일 GNB 개편 전그림 2) PC GNB 개편 전2. 탭 디자인이 카테고리별로 다름그림 3) 카테고리별 탭 디자인3. 서브 메뉴에 아이콘이 있어 공간을 많이 차지하고 주목도가 높음4. 아이콘, 버튼 외곽선이 요소를 많아 보이게 함5. 메인 카테고리에 ‘BL’을 추가하기 위해 공간 확보해야 함디자인 과정1. 문제 해결에만 집중해보기처음에는 a)메인 카테고리와 b)서브 메뉴의 위계를 맞추기 위해서 서브 메뉴를 메인 카테고리 아래에 위치하도록 수정했습니다.하지만 서브 메뉴의 위치만 조정할 경우 GNB 높이가 기존보다 높아지기 때문에 최상단의 메뉴들을 검색창 우측으로 옮겼습니다. 이렇게 수정하니 a)메인 카테고리와 b)서브 메뉴의 위계는 맞출 수 있었지만 상단의 요소들은 정렬이 안 맞고 정리되지 않는 문제가 있었습니다.기존의 레이아웃 유지하면서 수정을 하기엔 한계가 있다고 생각했습니다.그림 4) 메뉴 위치만 카테고리 하단으로 아래로 수정함2. 익숙한 레이아웃으로 재배열하기위의 초기 시안을 만들고 나서 어색하다고 느낀 부분들은 무엇일까 고민하다가 다른 서비스들을 참고해봤습니다. 일반적으로 쇼핑몰에서 볼 수 있는 스키마(schema)를 분석해보면 다음과 같습니다.- 상단 : 카트, 위시리스트 등 유틸리티- 중앙 왼쪽 : 로고, 검색창- 하단 : 카테고리하지만 일반적인 레이아웃을 리디북스 서점에 적용할 경우 a) 마이리디, 카트, 위시리스트 크기가 작아지고 위치가 이동하여 사용이 불편해지고 b) 로고, 메인 카테고리, c) 검색창을 한 공간에 배치하기가 어려웠습니다.검색창은 서점에서 중요한 요소인데 좌측엔 배치할 공간이 없고, 그렇다고 메인 카테고리를 우측으로 하면 하위 메뉴들과 멀어져 연관성이 적어 보이겠죠.그림 5) 검색창을 우측에 배치한 시안3. 전체 높이 줄이기4단으로 하니 기존 메뉴들을 다 넣을 수 있지만 높이가 늘어나고 메뉴가 너무 많아 보여 한눈에 내비게이션을 파악하기 어려워 보였습니다. 또, 높이가 늘어나는 만큼 서점 콘텐츠 영역이 줄어드는 결과를 가져옵니다.그림 6) PC GNB 4단 (height: 177px)그럼 ‘3단으로 하면서 기존 메뉴들을 그대로 살릴 수 있는 방법은 없을까?’ 고민한 시안이 아래 이미지입니다.그런데 가운데 단 우측에 메뉴가 4개가 있다 보니 복잡해 보였습니다. 또 하나의 문제점은 PAPER는 리디북스 서점이 아닌 PAPER샵으로 이동하는 메뉴이고, 고객센터 / 뷰어 다운로드 / 리디캐시 충전은 리디북스 서점 페이지인데 같이 나열되는 것이 사용자에게 혼란을 줄 수 있다고 생각했습니다.그림 7) PC GNB 3단 (height: 149px)최종 시안GNB 개편 이전과 이후 시안입니다. PC에서는 ‘고객센터’와 ‘뷰어 다운로드’가 없어지고, ‘PAPER’ 좌측에 아이콘이 추가되었습니다. ‘고객센터’와 ‘뷰어 다운로드’는 기존 GNB에 있던 메뉴라서 없애는 것을 결정하기가 쉽지 않았는데, 다른 서비스에서의 경험을 바탕으로 사이트 하단 Footer에 있을 것이라고 예측 가능하다고 판단했습니다.그림 8) PC GNB 개편 전/후그림 9) 모바일 GNB 개편 전/후그림 10) PC Footer평가 및 느낀 점1) 디자인이번 작업을 통해 파란색 배경 영역을 줄이고 무거운 요소들을 조금 더 가볍게 표현했습니다. 그리고 메뉴를 더 쉽고 빠르게 인지할 수 있도록 정리했습니다.시안을 여러 번 수정하고 다시 새로 만드는 작업하면서 제가 느낀 점은 이렇습니다.“디자인 요소를 구분하려고 스타일을 너무 다르게 하면 정리되지 않는다.”“디자인 요소를 최소화하는 것이 중요하다.”특히 제한된 공간에 다양한 요소들을 욱여넣어야 했기 때문에 간격, 컬러, 선, 면, 점, 폰트 크기 등 모든 것을 세밀하게 조정해야 했습니다. 1px처럼 아주 작은 차이가 완성도를 높이는데 중요하다는 것을 어느 때보다 깊이 느꼈죠.2) 테스트 과정이번 작업을 진행하는 과정에서 기억에 남는 부분은 실제 서버에 배포하기 전에 몇 번의 테스트 과정을 거치면서 다른 프로젝트를 진행했을 때 보다 더 많은 분들께 의견을 구한 점입니다.“GNB 개편은 워낙 중요한 거라 다양한 의견을 들어보는 과정은 필수입니다.” (스토어팀 팀장님)리디북스에서 일하시는 분들은 디자이너, 개발자, 운영자, 누구 할 것 없이 우리 프로덕트의 퀄리티를 중요하게 생각하기 때문에 디자인과 사용성에 대해 높은 기준을 갖고 있습니다. 이번 작업에도 많은 분들이 디자인을 꼼꼼히 확인해주시고 의견을 주셔서 큰 도움이 되었습니다.마무리리디북스 면접 때 면접관님이 해주셨던 말씀을 기억합니다.“UI 디자인은 수없이 Make - Break - Make 해야 합니다. 이 과정을 귀찮게 생각하지 않는 마음 자세를 갖고 일했으면 좋겠습니다.”디자인 작업을 하다 보면 가끔은 끝이 없을 것 같고 인내심이 필요한 순간들이 있습니다. 그렇지만 수없이 만들고 수정하고 다시 만드는 과정의 끝에 제가 작업한 결과물이 서비스에 반영되는 순간 디자이너로서 뿌듯함을 느낍니다.#리디북스 #디자이너 #디자인 #GNB #개선 #개편 #후기 #사용성 #UI #UX #UX디자인 #UI디자인 #뿌듯함 #작업후기
조회수 1971

문돌이가 어설프게 디자이너 대타로 일하는 법

지난번 '문돌이가 개발자랑 일할만큼만 프로그래밍 익히기'에 이어 PM 시리즈의 일환으로 이번에는 PM으로서 디자이너 역할을 대신할 수 있는 방법론에 대해 논해보고자 한다. 아 우선 두가지 미리 가드 치고 들어가고 싶은게 있는데 첫째, 여기서 PM이라 함은 Product Manager, 즉 본인이 직접 자식처럼 키우고 가꾸고 있는 프로덕트가 있고 이를 잘 살려나가기 위해 개발자, 디자이너, 마케터 등등 다양한 분야의 전문가들과 함께 일하는 사람들을 의미한다는 것과, 둘째, 이 글의 요지는 '디자이너가 아직 없어서...' PM이 어설프게 디자이너 역할을 대신할 수 있는 방법론이지 'PM이 디자이너 제끼고 디자이너 되는 법'이 아니라는 것이다.가장 이상적인 스타트업 팀은 아마도 3명의 팀원이 개발자1, 디자이너1, 하려는 분야 전문가1 이렇게 이루어진 팀이겠지만 (또는 기술스택이 높은 분야면 개발자2, 디자이너1) 이렇게 이상적으로 디자이너를 품어서 팀 꾸리고 시작할 수 있는 스타트업이 많지 않을거라 생각한다. 특히 웹/모바일 분야의 제품을 구상하고 있는 초기 스타트업이라면 당장 프로토타입이라도 만들어서 런칭하는게 중요하기 때문에 아무래도 정식 디자이너까지 꾸려서 팀빌딩 하는건 많이 부담스러울 것이다.따라서 (내 경우처럼) 높은 확률로 당신의 스타트업에는 개발자(들)와 (디자인 해본적 없는) 기획자만 있게 될 것이고, 이 때 가장 중요하게 터지는 문제가 바로 '개발자가 참고해서 개발할 수 있는 디자인물과 디자인파일들이 없다' 이다. 사실 이런 경우 보통 만렙 개발자들은 본인들이 와이어프레임만 보고도 알아서 웹사이트 돌아다니면서 이미지 앉히고 아이콘들은 폰트어썸 같은 라이브러리에서 그럴싸한거 적용하고 메뉴바나 네비게이션 같은것도 그럴싸한 라이브러리 찾아서 적용해 버림으로써 해결하기 때문에 크게 문제될 것은 없지만, 아마도 속으로는 이렇게 생각하고 있을 가능성이 크다. '아니 도대체 저xx가 하는일은 뭐야?!'당신 개발자가 속으로 이렇게 생각하고 있을수도 있다...자, 이제 본론으로 들어가서, 그러면 아직 디자이너가 없는 팀에서 PM이 디자이너 역할을 대신할 수 있는 방법론에 대해 논의해 보자. 본 방법론은 '모바일 앱'을 디자인하는걸 전제로 작성하였고, 이 방법론이 성공적이기 위해서는 다음의 전제조건들이 필요하다.1. 나는 와이어프레임을 많이 그려봤고, 대략적인 앱의 인터페이스 구성 및 흐름에 대해 어느정도 알고 있다.2. 나는 맥북을 가지고 있다.3. 나는 $99짜리 프로그램 구입할 만한 돈이 있다.Step 1. 와이어프레임 만들지 말고 기능플로우 차트만 만들어서 개발자랑 상의하기웹/모바일쪽 제품 담당하는 PM들이 가장 많이 하는 일들이 아마도 와이어프레임을 아주 멋있게 그려서 파워포인트 (또는 키노트)에 멋드러지게 얹은 다음에 개발자와 디자이너에게 전달하는 일일 것이다. 그런데 사실 자세한 와이어프레임은 1/내가 대규모 조직에 있어서 많은 사람들에게 동일한 정보를 전달해야 하거나 2/누군가에게 컨펌을 받아야 해서 뭔가 보여줄게 있어야 하는경우들이 아니라면 위에 언급한 스타트업에서는 별로 필요하지 않다. 오히려 개발자 앉혀놓고 종이에다가 쓱쓱 그려서 보여주면 10분이면 끝날일을 하루 걸려서 파워포인트에 그리고 있는 시간이 더 아까울 뿐이다. (어차피 개발자들은 핵심만 보기 때문에 저 기능플로우가 종이에 끄적거려져 있던 멋있게 파워포인트에 그려져 있던 아무 차이도 없고 중요하게 생각치도 않는다.)따라서 1분1초가 아까운 스타트업에서 저거에 시간낭비하지 말고 그냥 슬랙이나 에버노트에 대충 기능플로우 차트만 만들어서 개발자랑 바로 상의하고, 기술적으로 된다 안된다 시간낭비다 등등 의견 수렴하고 다시 수정해서 보여주고... 요런 식으로 코어 기능들과 그 흐름을 빠르게 결정하는게 훨씬 효율적이다. 개발자와 상의할 기능플로우 차트에는 보통 다음 내용들이 들어간다.1. 기능 섹션과 해당 섹션의 세부기능들 정의 - 기능 섹션이라 함은 유저가 앱을 사용하는 여정상에 각각 큰 덩어리를 정의해 주는것을 말한다. 예를들면 온보딩, 회원가입, 메인화면, 유저 프로필 등등 큰 덩어리를 정의하고 각 섹션에 필요한 세부 기능들을 나열하는 작업이다. 2. 코어 기능과 추가 기능의 구분 - 프로토타입 단계에서 요 기능이 없으면 우리 앱이 제시하는 핵심가치 제공이 절대로 불가능하다고 생각되는 진짜 꼭 필요한 기능만 골라낸다. 뭐 있으면 좋거나 핵심가치 제공에 도움이 되는 기능들이지만 이게 없다고 해서 앱을 제대로 사용하는게 아예 불가능하다..가 아닌 기능 요건들은 다 쳐내서 서 프로토타입 런칭 이후에 순차적으로 적용시킬 기능들을 나열하고 스케줄링 한다.3. 서비스 플로우 (선택) - 와이어프레임 그리듯이 순차적인 서비스 흐름도를 그리는건데, 개발자와 상의하기 전에 종이에 미리 그려서 가져가도 상관없지만 개인적으로 위에 1, 2번만 잘 정해서 가져가면 어차피 개발자랑 상의하면서 이건되고 이건 안되고 하면서 다 작살이 나기 때문에 3번을 미리 그려갈 필요가 없다... 그냥 1, 2번을 개발자랑 상의해서 컨펌한 후에 3번을 같이 머리 맞대고 (종이에) 그리면 된다 (파워포인트 제발..여기다 그리지 말아줘..).이런 현란한 와이어프레임 그리고 있을 시간에 얼른 개발자랑 기능요건만 정해서 상의하자. Step 2. 디자인 아카이브에서 맘에드는 화면 매칭하기위에서 개발자랑 머리 맞대고 대충 종이에 서비스 플로우 그렸다면 이제 본격적인 디자이너스러운 업무의 시작이다. 각 단계별 화면마다 우리가 벤치마킹 할(이라고 적고 '적당히 베끼기 쉬운'이라고 읽는다) 참고화면들을 디자인 아카이브 사이트들을 열심히 돌아다니면서 수집한다. 디자인 아카이브는 정말 많은데 여기서는 필자가 자주 쓰는 사이트 3군데만 소개하도록 한다.1. CollectUI.com고퀄의 모바일/웹 관련 디자인, 인터렉션들이 각 기능섹션별로 정리된 아카이브 이다.콜렉트UI는 아까 얘기한 각 기능섹션 또는 유저태스크 별로 필요한 화면 디자인이나 인터렉션 디자인들이 잘 정리된 아카이브인데, 그 하나하나 퀄리티가 매우 뛰어나다. 예를들어서 온보딩 관련 디자인을 찾아보고 싶으면 왼쪽 사이드바에서 onboarding을 검색해 보면 해당 메뉴가 나오고 수 많은 앱들의 온보딩 화면들이 모아져 있다. 주로 아이폰 위주이긴 한데 가끔 안드로이드에 최적화된 디자인도 찾을 수 있다.2. Behance의 Interaction Gallery전 세계의 디자이너들이 작업한 코퀄의 앱/웹 디자인 아트워크만 모아놓은 갤러리이다.비핸스는 비전공자들도 많이 찾아보는 유명한 사이트가 되었지만, 이 갤러리를 아는 사람들은 드물거라 생각한다. 원래 옛날에 앱디자인갤러리 (http://www.appdesignserved.co/)라는 사이트가 비핸스에서 저런 고퀄 디자인 아트워크만 묶어서 보여줬었는데 어도비에서 비핸스로 통합시킨 것 같다. 아무튼 전 세계의 잘나가는 디자이너들의 수려한 아트워크를 볼 수 있는 갤러리인데, 여기서 내 앱과 기능요건이 유사하거나 비슷한 분야에 있는 앱 위주로 아트워크를 찾아서 클리핑 한다.3. 핀터레스트 검색핀터레스트는 검색어가 중요하다.핀터레스트를 모르는 사람은 없어도 내 주변에 '핀터레스트 하고 있어'라고 말하는 사람은 한국에서 본 적이 없을 정도로 아직 우리나라 사람들한테는 생소한 사이트 이다. 여기는 사람들이 스크랩 하고 싶은 자료들을 마치 냉장고나 칠판에 핀 꼽아서 수집해 놓듯이 모아놓는 사이트인데 역시 디자이너들이 많이 쓴다. 내가 만일 앱 온보딩 디자인을 여기서 찾고자 하면 Mobile app onboarding라고 치고, 특정 버전의 온보딩만 검색해 보고자 하면 app onboarding iOS, 또는 app onboarding android 이런 식으로 검색하면 된다.Step 3. 스케치 프로그램 구입하기이제부터 가장 중요한 단계다. 내가 디자이너 대타를 하기로 마음 먹었다면, 그리고 당신이 맥북 유저라면 (혹시 맥북 유저가 아니면 포토샵으로 해야 하는데 이건 벡터기반이 아니여서 어렵다.. 그냥 이 기회에 미래를 위해 투자하는셈 치고 맥북 하나 장만하심이 어떨지..) 고민하지 말고 스케치라는 프로그램을 구입하도록 한다. 가격은 A사처럼 치사하게 월별 과금방식이 아닌 쿨하게 한번에 $99이다. (혹시 맥북의 앱스토어에서 구입하면 더 비쌀수도 있다. 애플의 치사한 수수료 때문에.. 꼭 웹사이트 들어가서 구매하길 바람)스케치는 비전공자의 벡터기반 디자인작업을 마법처럼 쉽게 만들어준다. 고민하지 말고 구입하자.보통 디자인 작업은 벡터로 이루어지는데 이는 기기마다 화면 사이즈가 다 제각각인지라 이를 픽셀 기반으로 작업해 버리면 화면 사이즈를 키울때 마다 깨지게 된다. 벡터로 작업하면 적합한 사이즈로 손실 없이 export가 가능하다. 어도비로 이 작업을 하려면 일러스트레이터를 만질 줄 알아야 하는데, 솔직히 우리가 정식 디자이너 될것도 아니고 그냥 임시로 대타 하는건데 저걸 월별로 돈내면서 설치해서 또 겁나 복잡한 인터페이스 공부하면서 낑낑대느니 난 고민하지 말고 스케치를 사용할 것을 추천한다. 스케치는 일단 인터페이스가 웹/모바일 디자인하는데에 특화되어 있고 일러스트레이터는 그래픽 디자인, 아트 디자인, 일러스트 디자인 등등 훨씬 더 복잡한 세계의 디자인까지 커버해야 하는 프로그램이기에 당연히 인터페이스가 스케치보다 10배는 복잡하다.하지만, 역시 우리는 비전공자이기 때문에 스케치가 아무리 쉽다 한들, 여기서 뭘 어떻게 작업을 시작해야할지 생각하면 막막해 질게 뻔하다. 이 방법론은 step 4 부터 자세하게 보여줄테니 겁먹지 말자.Step 4. 컬러 선택 및 심플한 앱 로고 디자인혹시 디자인 전공자가 보기엔 말도 안되는 얘기일수는 있으나... 필자의 개인적인 생각으로 모든 디자인의 시작은 메인 컬러 잡는것 부터라고 생각한다. 즉, 내 앱에서 메인으로 쓸 컬러를 일단 정하고 나면 향후 디자인은 그 한 컬러를 중심으로 통일해서 쓰기만 하면 결과물이 제법 나쁘지 않게 나오기 때문이다. 보통 비전공자들의 디자인이 패망하게되는 대표적인 이유가 메인컬러를 여러개 써서 촌스러워 보이는 건데 사실 본인들은 내 디자인이 왜 촌스러워 보이는지 잘 모른다. 예를 들어 보자. 메인 컬러는 한개만 써야 촌스러워 보이지 않는다.여기 두개의 컬러 조합이 있다. 일단 딱 봐도 1번이 2번에 비해 10배는 깔끔한 느낌이다. 물론 디자인 전공자들은 이를 이론적으로 구분 가능하다. (배색-보색 관계가 어쩌고 저쩌고) 하지만 우리 비전공자는 그런거 모르고 느낌으로 해야 하기 때문에 이런식의 접근이 필요하다.1. 메인컬러라 함은 우리가 보기에 눈에 띄는 컬러를 말한다. - 위의 예시에서 당연히 오렌지 색은 엄청나게 눈에 띄는 색이니까 메인컬러, 2번 디자인의 네이비색도 눈에 띄니까 메인컬러, 역시 2번 디자인의 어설픈 초록색도 눈에 띄니까 메인컬러이다. 하얀색, 회색계열은 눈에 띄긴 하지만 보색관계에 의해 눈에 띄는 거니까 그냥 메인컬러로 아예 생각하지 말자.2. 메인컬러 2개 이상 쓰지 말자. - 2번 디자인처럼 메인컬러를 여러개 써버리면 우리같은 비전공자들이 컬러 배치할 경우 99.9%의 확률로 촌스러워 진다. 나중에 앱 기능이 복잡해 지면 더 점입가경이다. 따라서 메인컬러는 반드시 한개로만 가고 나머지는 메인컬러에서 색을 좀 빼서 색을 만들거나 흰색, 회색 계열로 가는게 제일 안전하다.자, 그러면 메인컬러를 어디서 어떻게 결정하지? 이를 위해 내가 자주 쓰는 컬러 사이트들 2곳을 소개한다.1. ColorHunt.co각 컬러 배색의 윗 줄이 메인 컬러 들이다.컬러헌트는 다양한 색깔 조합을 스펙트럼으로 구성해서 모아논 컬러 아카이브 이다. 여기서 밑 색깔들은 볼거 없이 맨 윗띠의 메인컬러들만 보면서 색깔을 골라서 헥스코드를 기록해 놓는다. (헥스코드는 보통 #2794EB 요런식으로 적혀있는 코드를 말한다) 'hot' 이나 'popular' 탭을 누르면 인기 많은 색들을 볼 수 있다.2. Colovely 스페이스를 눌러가면서 랜덤하게 컬러를 보여준다.여기는 컬러헌트에서 색 찾기도 귀찮거나 잘 모르겠을때 들어가서 그냥 스페이스바를 눌러대면 랜덤하게 컬러를 제안해 주는 사이트 이다. 어떤 알고리즘으로 색을 추천해 주는지는 모르겠지만 그냥 스페이스 계속 눌러대다 보면 제법 끌리는 색깔 많이 보여준다. 맘에드는 색이 있으면 역시 헥스코드를 기록해 놓는다.이렇게 메인 컬러를 결정했으면 다음 단계는 심플한 로고를 만드는건데, 만일 본인이 의기양양하게 로고를 디자인해 보고 싶으면 말리진 않겠으나 로고 디자인의 세계는 정말 심오한 세계이기 때문에 괜히 건들지 말자. 그냥 내가 하는 방법대로 해보도록 한다.1. 그냥 깔끔해 보이는 폰트에 메인컬러를 적용해서 만들기위의 문돌이닷컴의 예를 들어 보자. 당신이 메인컬러를 저 오렌지색으로 결정했다면 가장 무난한 로고 배치는 오렌지색을 백그라운드컬러로, 폰트컬러는 하얀색으로 하는 것이고, 나눔고딕이나 산돌고딕과 같은 무료 폰트를 활용해서 앱 로고를 저런식으로 심플하게 만들어 볼 수 있을 것이다.메인컬러를 배경색으로, 폰트를 흰색으로 배색하는것 만으로도 깔끔한 앱 로고가 나온다.2. Dribbble에서 벤치마킹(이라고 쓰고 베낀다고 읽는다) 하기드리블은 아까 소개한 비헨스같은 디자인 아카이브인데, 주로 그래픽 디자인이 단컷으로 모여있는 아카이브이다. 여기에서 simple logo, 또는 simple app logo라고 치면 참고할만한 디자인이 많이 검색된다. 최대한 타이포크라피 중심의 심플한 디자인을 참고하여 본인의 앱 로고를 디자인 해 보도록 한다.드리블에서 최대한 심플한 앱 로고를 찾아서 벤치마킹 해본다.Step 5. 스케치 디자인 컴포넌트 및 아이콘 아카이브 활용하기자 이제부터 본격적인 앱 스크린 디자인 시작이다. 이제 메인컬러도 선택 했고, 앱 로고도 만들었지만 역시 비전공자 입장에서 어디서부터 시작할지 막막할 것이 뻔하다. 이를 위해 준비한 비장의 무기가 있다. 바로 스케치로 디자인한 파일들을 무료로 쓸 수 있게 해주는 아주 감사한 스케치 디자인 컴포넌트 아카이브들 두 군데를 소개하겠다.1. Sketch App Sources제법 오래된 아카이브로 수 많은 스케치 디자인 파일을 무료로 다운받을 수 있다.2. Sketch Repo생긴지 얼마 안된 사이트이지만 모던하고 세련된 디자인들이 많이 올라온다. 역시 무료.위 2개의 사이트에서 UI kit, app design 등의 검색어를 입력하면 아예 필요한 앱 화면이 미리 디자인 된 무료 UI kit 파일을 다운받을 수 있다. 여기서 중요한건 다음과 같은 기준에 부합하는 파일을 다운받아야 하는 것이다.1. 이미지 배경이 아닌 단색 위주의 배경으로 구성되어 있고 메인컬러를 한개만 쓴 것2. 내가 하려는 앱과 유사한 분야의 UI kit. (예를들면 메신저 앱을 개발할 거면 메신저 킷)3. 메뉴바 구조가 일반적이거나 자연스러운 것내가 다운받은 뉴스피드 관련 앱 UI kit이다. 단색위주의 평이한 메뉴 구조로 디자인 되어 있다.본격적인 디자인을 하기 전에 개발자에게 메인이 되는 스크린 사이즈를 물어보도록 하자. iOS를 예로 들어보면 어떤 개발자는 iPhone 6 plus의 큰 화면 기준으로 디자인해서 컨스트레인을 좁혀나가는 방식을 선호하는 개발자가 있고, 반대로 iPhone 5의 작은 화면 기준으로 스페이스를 넓혀나가는 방식을 선호하는 개발자도 있다. 이에 맞추어 아트보드의 스크린 사이즈를 결정하도록 한다. 스케치는 친절하게도 아트보드를 클릭하면 기기에 맞춘 아트보드 스크린 사이즈가 이미 선택되어 있으니 클릭만 하면 된다.스케치에는 이미 기기별로 아트보드 사이즈가 세팅되어 있어서 선택만 하면 된다.이제부터 마법을 부려보자. 방금 다운받은 UI kit을 우선 위에서 선택한 스크린 사이즈에 맞추어 크기를 바꿔 준다. 이때 주의할 것은 각 스크린의 폴더를 전체를 잡아서 크기를 변경해 주어야 비율대비 변경이 가능하다. (마치 파워포인트에서 각 요소를 그룹으로 묶어서 크기를 변경해 주어야 깨지지 않고 비율대비 변경이 가능한 것과 같은 원리이다.) 위의 킷은 메인컬러를 붉은색 하나만 쓴 것을 알 수 있다. 저 부분을 모두 아까 우리가 정한 오렌지색 계열의 메인컬러로 바꾸고, 불필요한 요소는 삭제하고 컨텐츠를 내가 하려는 컨텐츠로 변경해 준다. 또한 크기를 변경하면서 정렬이 흐트러 진 것도 다시 맞춰준다.메인컬러 하나만 바꿔도 느낌이 확 다르다.위의 UI kit은 iOS라기 보다는 안드로이드에 어울리는 디자인이다. 특히 하단의 탭메뉴바가 지나치게 안드로이드 스럽다. 이를 iOS 스럽게 바꿔보자. 예를들어 저 문돌이닷컴 앱의 3개 메뉴가 '이벤트,' '뉴스,' '채팅' 이런 식으로 구성되어 있다고 가정해 보자. 우선 탭바의 높이를 좀더 높혀주고 (이건 구글링 조금 해보면 아이폰 탭메뉴바 높이가 얼마인지 금방 찾을 수 있다) 아이콘을 다른걸로 교체해 줘야 한다. 여기서 부딪치는 문제가 비록 iOS에 기본 아이콘을 쓰면 괜찮지만 적당한 아이콘이 없을 경우 당신이 직접 디자인해 줘야 하는데, 아이콘 디자인이 어디 쉬운일인가? 걱정할 것 없다. 이를 또한 마법처럼 해결해 주는 사이트가 있다. 바로 Noun Project이다.눈프로젝트 사이트에서 필요한 아이콘을 찾아 SVG 파일로 다운받는다.개발자들이 오픈소스 운동에 열심히 참여하는 것 처럼 여기도 본인의 디자인력을 수 많은 사람들과 공유하는 아주 훌륭한 디자이너들이 올린 수 많은 아이콘들을 png와 svg로 다운받을 수 있다. 뭐 모르는 사람도 있으리라 생각되지만 참고로 png는 픽셀기반, svg는 벡터기반이다. 우리는 스케치에서 벡터기반으로 작업하고 있기 때문에 svg 파일을 다운받도록 한다. 다운받은 아이콘을 스케치로 불러온 후 크기를 조정하고 컬러도 우리의 메인컬러로 변경해서 다음과 같이 적용해 봤다. 덤으로 로딩파일도 한번 만들어 봤다.물론 디자이너가 보면 코웃음 치겠지만 뭐 이정도 디자인이면 프로토타입으로는 나쁘지 않다. Step 6. 제플린에 디자인 가이드 올리고 개발자에게 디자인 파일 넘겨주기드디어 마지막 단계이다. 보통 디자이너들은 개발자에게 디자인파일 넘겨줄때 다음 두개를 준다.1. 디자인 가이드 - 이건 스크린에 각 요소들의 크기가 몇 픽셀이고, 간격을 얼마고 뭐 이런것들을 상세하게 표시해 준 가이드를 말한다.2. 디자인 파일 - 각종 아이콘, 이미지 등등 개발에 필요한 파일들을 다양한 파일 사이즈로 익스포트해서 전달해 준다.우선 디자인 가이드는 역시 우리가 이거 만드려면 엄청난 노가다인데, 이를 마법처럼 쉽게 해주는 프로그램이 또 있다!! (고맙게도 1개 프로젝트까지는 무료이다.) 바로 제플린이라는 프로그램이다.제플린을 사용하면 디자인가이드 만들 필요 없이 알아서 생성해 준다.제플린을 다운받으면 스케치와 자동으로 연동이 되고, 스케치에서 제플린으로 업로드하고 싶은 아트보드를 클릭한후 plugin에서 제플린으로 업로드를 클릭하면 알아서 제플린으로 업로드 된다. 그리고 나서 제플린으로 개발자를 초대하면 끝. 개발자는 여기서 저 버튼들의 크기가 얼마이고 여백을 얼마이고 컬러의 헥스코드는 뭐고 이런 내용들을 쉽게 확인 가능하다.디자인 파일은 사실 제플린에서 개발자가 바로 내려받는게 가능한데, 이것도 조금 노가다일 수 있으니 직접 익스포트해서 깔끔하게 전달해 주자. 스케치에 보면 내가 익스포트하고 싶은 요소를 클릭해서 우측 하단에 보면 어떤 사이즈로 익스포트할지 선택할 수 있는 기능이 있다. 아이폰 개발할때는 보통 기본 스크린 사이즈에서 2배 파일, 3배파일을 같이 줘야한다. 파일명에 @2x가 2배파일, @3x가 3배파일을 의미하고 스케치에서 알아서 파일명까지 형성에서 익스포트 해 준다.2x가 2배파일, 3x가 3배파일이고 서픽스도 알아서 스케치가 생성해 준다.이때 주의할 것은 파일명인데, 개발자들은 보통 나름의 파일명 규칙이 있다. 이건 꼭 개발자에게 물어보고 컨벤션에 맞춰서 파일명을 정하도록 하자. 찾기 쉽게 작성하는게 중요하기 때문에 보통은 이런식으로 작성한다.[종류]_[섹션명]_[이름]예를들면 탭바에 있는 채팅 아이콘을 2배파일로 추출한다고 하면 파일명은 '[email protected]'가 되는 것이다.여기까지의 사이클을 한 2-3번정도 경험해 보면 이제 어느정도 우리 문돌이가 디자이너 대타 역할을 수행하기에는 어느정도 가능해 질 것이다. 이 외에도 사실 앱 스크린샷, 앱스토어 아이콘 등등 개발자에게 전달해야 할 파일들이 많은데, 이것 역시 위의 레퍼런스 사이트들을 잘 찾아보면 수 많은 무료 양식이 있어서 쉽게 벤치마킹(이라고 쓰고 베낀다라고 읽는다) 할 수 있다.다시한번 강조하지만 이 방법론은 어디까지나 '디자이너가 아직 없어서 문돌이가 디자이너 역할 대신하는 법' 이지 '문돌이가 디자이너 되는 법'이 절대로 아니다. 디자인의 세계는 정말 깊고 심오해서 초보 디자이너 되는게 초보 개발자 되는법 보다 더 어려울 수도 있다. 특히 요즘 많은 사람들이 남발해 대는 UX라는 단어도 심리학에 기반을 둔 매우 심오한 영역인데 사람들은 그냥 'UX = 보기좋은 디자인' 요렇게 생각해 버리는 경향이 있다. 뭐 UX까지 안가더라도 그래픽디자인의 세계 역시 구도, 배치, 컬러 등등 공부해야 할 것이 매우 많은 세계이니 괜히 넘보지 말고 우리는 그냥 기획자 본연의 업무에 충실하도록 하자.다음 글에서는 역시 같은 맥락으로 문돌이 PM이 초기 스타트업에서 마케터의 역할을 대신하기 위한 야매스러운 방법론에 대해 논의해 보고자 한다.글쓴이는 스팀헌트 (Steemhunt) 라는 스팀 블록체인 기반 제품 큐레이션 플랫폼의 Co-founder 및 디자이너 입니다. 비즈니스를 전공하고 대기업에서 기획자로 일하다가 스타트업을 창업하고 본업을 디자이너로 전향하게 되는 과정에서 경험한 다양한 고군분투기를 연재하고 있습니다.현재 운영중인 스팀헌트 (Steemhunt)는 전 세계 2,500개가 넘는 블록체인 기반 앱들 중에서 Top 10에 들어갈 정도로 전 세계 150개국 이상의 많은 유저들을 보유한 글로벌 디앱 (DApp - Decentralised Application) 입니다 (출처 - https://www.stateofthedapps.com/rankings).스팀헌트 웹사이트 바로가기
조회수 350

"제 능력치를 더 시험해보고 싶어요."

사랑방처럼 옹기종기 모여 이야기꽃을 피워내고 있거나 호탕한 웃음소리가 들리는 쪽으로 시선을 돌리면 항상 존재하고 있는 사람이 있다. 바로 B.A.T 영상 디자이너이자 분위기 메이커를 담당하고 있는 나은아다. 그녀는 제 나이다운 흥과 체력뿐만 아니라 제 나이답지 않은 광범위한 정보와 감성을 보유하고 있는 긍정적인 TMI 의 표본이다. 그래서인지 번-아웃 되어 지친 분위기의 전환이 필요하거나 뇌의 과부화로 아이디어가 고갈이 되었거나 등 꼭 필요할 때마다 찾게 된다. 인터뷰가 필요한 지금, 아니나 다를까 또 그녀를 찾았다.머리 색이 여름처럼 산뜻해진 나은아 님, 당신에 대해 말해주세요!어제 염색했는데, 색 잘빠졌죠? 아, 맞다 인사부터 해야지. 안녕하세요, B.A.T에서 영상 디자이너를 맡고 있는 나은아입니다! 플레이그라운드 브루어리, 오늘의 건강 등 디지털 페이지에 업로드되는 영상 및 모션 콘텐츠를 비롯해 KT&G 상상 스타트업 캠프의 영상 콘텐츠 시리즈를 만드는 등 다양한 제작 업무를 맡고 있습니다. 촬영이 필요한 경우엔 현장에 직접 나가 사진이나 영상을 찍어오기도 해요.B.A.T에서의 업무는 어때요? 만족도로 따진다면요. 나이에 비해 일찍 일을 시작한 편이라 B.A.T에 오기 전에도 여러 곳에서 일을 했어요. 주로 PD가 있는 포스트 프로덕션에서 일을 해왔는데, 방송 프로그램은 거의 정해진 템플릿이 있고 PD가 이미 기획해 놓은 상황에 투입되다 보니 단순히 제작만 하는 실무자 느낌이 강했습니다. 그런데 B.A.T에서는 제가 콘셉트를 잡고 그에 맞는 스토리보드를 짜고 촬영 및 편집까지 다 할 수 있게 된 겁니다. 내가 생각한 대로 연출하고 작업물을 낸다는 것이 얼마나 즐거운 일인지 몰라요. 덕분에 제 능력치를 깨달을 수 있게 되었죠. 저를 온전히 믿고 맡겨주시는 것도 감사하고, 스스로가 잘 해낼 수 있다는 자신감까지 있기에 만족도가 높은 편입니다!오, 자신감 좋은데요! 그 자신감은 언제, 어떻게 하면 나오나요?클라이언트 쪽에서 반응이 좋으면 '아, 내가 잘했구나' 하는 생각이 들면서 뿌듯함에 제 자신을 칭찬하곤 합니다. (웃음) 그리고 프로젝트 구성원끼리 혹은 내부 다른 동료들이 보고 작업물을 보고 아낌없이 칭찬해줄 때도 매우 기분 좋고 자신감 뿜뿜 돋아요.[KT&G 상상 스타트업 캠프 데모데이 티저 영상을 위한 3D 타이포 모델링 작업]  최근 마블 티저처럼 만든 KT&G 상상 스타트업 캠프 데모데이 영상 완전 멋있었어요! 내부에서도 잘 만들었다고 칭찬이 자자했잖아요.흐흐, 맞아요. 진짜 뿌듯하고 기분 좋았습니다! 사실 갑자기 기분 좋아질 때도 있는데, 영상 작업 끝내고 출력할 때 렌더링 바만 올라가도 너무 신나요~그건 그냥 직업병 아니에요? (웃음) B.A.T에 오래 머무른 사람으로서, 좋은 부분과 조금은 아쉬운 부분에 대해 과감 없이 말해주세요.스타트업이다 보니 무엇보다 개개인의 역량을 최대의 최대로 이끌어 낼 수 있고, 하고 싶은 걸 빠르게 도전해 볼 수 있다는 것이 큰 장점 아닐까요? 특히 ‘이런 건 어떨까요?’라고 의견을 내면 주저하지 않고 ‘그럼 그럴까?’ 하는 답변이 돌아오는 게 너무 좋아요! 대신, 다들 열정과 기량이 넘치다 보니 많이 바쁘고 외근이 잦은 분들이 많아 얼굴을 자주 보지 못하는 것이 아쉬워요. 퇴근 후 홍대에서 술 마시자고 말로만 하고 있는데… (비장한 표정으로) 이번달엔 진짜로 만날 거에요.아참, 잊어버릴 뻔 했는데 B.A.T 사무실이 예뻐요. 제가 꾸며서 그런 거 맞고요. (웃음) 잠시 머리 식힐 동안 담소를 나눌 수 있는 푹신한 소파가 있고, 다양한 간식들과 머신 커피도 준비되어 있고, 귀여운 배티도 있어요!배티가 뭐예요?로봇 청소기요! 로봇 청소기에 이름을 지어주자는 의견이 나와 내부적으로 네이밍 공고를 했어요. 디자이너 임철규 님이 B.A.T에 TY를 붙여서 배티로 하는게 어떻냐고 말하는데 와 이거다 싶더라고요. 심지어 BATTY라는 단어 뜻 자체도 '약간 제정신이 아닌' 이더라고요. 우리와 딱이다 싶었죠. 흐흐아! 제가 배티 그림도 그렸는데, 보실래요?[B.A.T의 자타공인 능력자답게, 뚝딱 그려낸 로봇청소기 BATTY]더 이상 인터뷰가 산으로 가기 전에 (웃음) 마지막으로 B.A.T 지원자들에게 한마디 한다면.어서오세요!환영합니다!그리고 저랑 같이 맛있는 점심을 드실 분들도 항시 모집하고 있습니다!역시 마지막까지 TMI인 그녀였다.. 
조회수 4033

페이스북 프로덕트 디자인 인턴 체험기 #1

드디어 시작.꿈에 그리던 페이스북에 2016년 11월에 지원을 하였고 (이 당시 나는 조지아텍 HCI석사 1학년 1학기), 12월까지 세 번에 걸친 면접들을 보고 1월 초에 합격 연락을 받았다 (자세한 페이스북 인터뷰 프로세스는 페이스북 커뮤니케이션팀이 동의해 주어 나의 Medium에 퍼블리쉬할 수 있었다). 사실 합격 전화를 받았을 당시, 복도를 뛰어다니면서 함성을 질렀다. 아는 사람들에게 자랑도 하고, 축하도 받고 무엇보다 인턴쉽을 가서 뒤처지지 않으려고 더 열심히 공부를 하리라 마음을 먹었다. 여름이 되기까지 시간은 정말 느리게 갔지만 시작날인 5월 30일까지는 정말 그 누구보다도 행복하게 하루하루를 보냈던 것 같다.인턴 시작 날은 5월 30일... 시간은 정말 느리게 흘러갔다.살짝 내 얘기를 해보자면... 이렇다.페이스북 프로덕트 디자인 인턴쉽(Product Design Internship) 얘기를 하기 전에, 나에 대해 살짝 얘기하자면... 사실 나는 학부 때 디자인 전공을 하지 않았다. 캐나다에서 초등학교를 다니고 고등학교를 졸업한 후 나는 미시간 대학교에 (University of Michigan-Ann Arbor) 기계공학 전공으로 입학했다. 그 당시에는 대학교에서 들어가서 내가 무엇을 해야 할지, 내가 전공하는 것이 무엇인지에 대한 지식도 많이 없었을뿐더러, 제일 중요한 건, 배우고자 하는 열정이 없었다. 고등학교 때 미친 듯이 공부했을 때와는 다르게 대학교 때는 뭔가 흥미가 없었던 것 같다. 시간이 그렇게 무의미하게 지나간 적도 없었던 것 같다. 지금 생각해보면 너무나도 허무하게 첫 대학생활 2년을 보내지 않았나 싶다.나는 3학년에 올라가기 전에 한국에 돌아와 군에 입대를 했고 그 절제의 테두리 안에서 시간이 흐를 때면 하나둘씩 도전해 보고 싶고 알고 싶은 것들이 생겨났다. 전역 때쯤에는 "그래! 나는 기계공학보다는 문과 체질이야"라고 자신에게 최면을 걸고 복학을 해서 대학교 3학년 2학기 때 많은 반대와 걱정에도 불구하고 나는 심리학으로 전과를 했다. 솔직히 부모님을 포함에 많은 사람들이 걱정의 목소리를 높였지만 나는 뭔가 사람에 대해 더 알고 싶었다 (라기보다는 그냥 너무나도 흥미로웠다). 운이 좋게도 심리학 수업을 듣는 동안만큼은 항상 재미있었고 솔직히 기계공학 때 배웠던 수학, 물리 등 보다는 훨씬 쉬웠다. 열심히 하다 보니 성적도 쭉쭉 올라가고 운이 좋게 교수님들과 재미있는 연구도 하고... 첫 대학 2년과는 다르게 나머지 2년의 나라는 사람은 자신감이 최고조로 올랐던 것 같다.하지만 중요한 문제는 졸업 후의 진로였다 (a.k.a 현실). 많은 문과 유학생들이 하는 고민일 수도 있겠지만 STEM (Science, Technology, Engineering, Mathematics) 관련 전공이 아니면 미국 취업이 불리한 면이 없지 않기 때문에 당연히 한국행이겠구나 생각했다. STEM 전공을 하면 3년이라는 OPT (취업) 기간이 주어지는 반면에 STEM이 아닌 전공들은 1년 안에 H1-B라는 비자를 받지 못하면 다시 한국이나 다른 나라로 돌아가야 한다.졸업 후, 역시 반전은 없었다. 나는 어느새 한국 가는 비행기에 몸을 실었고 정신을 차려보니 한국 강남역 메가로스쿨에서 한국 로스쿨을 진학 희망하는 학생으로 변신해 있었다.  진짜로 진짜로 로스쿨 준비는 정말 힘들었다. 한국에서 내로라는 사람들도 재수하고 삼수하는 마당에 초등학교 때부터 캐나다에서 유학해온 나는 한국말로 공부하는 것이 편하지는 않았을뿐더러 한자들 또한 이해하기 힘들었다. 모의고사를 볼 때마다 하위권이었고 스터리를 할 때면 다른 사람들 발목을 붙잡진 않을까 노심초사했다. 뿐만 아니라 나는 한국의 암기하고 문제를 푸는 공식(?) 같은 것들이 지긋지긋하다. 문제를 쓸데없이 꼬는 것, 어떤 특정 문장 속에 답이 숨어있기 마련이며 글짓기를 할 때면 꼭 무슨 수학 문제 푸는 마냥 뼈대는 이미 정해져 있으며 심지어 첫 문장과 마지막 문장도 모든 수험생들이 거의 동일하게 접근할 때도 있다. (나한테 글짓기는 창의력인데) 사실 애초에 이런 것들이 너무나도싫어서 어렸을 적부터 유학을 가고 싶었다. (중학교 때 잠시 한국으로 돌아왔을 때 족보닷컴이란 곳에서 과거 출제문제를 미친 듯이 뽑아서 기계처럼 풀었던걸 생각하면 정말... 나랑은 안 맞는다).여하튼, "난 꼭 변호사, 검사, 판사가 될 거야!!!"라는 미친듯한 열정이 있었던 것도 아니었다. 하지만 그땐 이게 아니면 난 과연 무엇을 해야 할지 몰라 밤낮으로 공부를 해야만 했다.그럼 도대체 나는 어떻게 UI/UX/Product Design에 입문해 여기까지 오게 된 것일까?정말 행운 이게도, 그때 미국에서 날 지도해주던 심리학 교수님께서 한국 대학교 몇몇 곳에 심리학 강의를 하러 방문하셨다. 페이스북 메신저로 한번 밥이나 먹자는 연락이 왔고, 만나서 반가운 얘기들을 하던 도중 나에게 Human Computer Interaction (HCI)와 User Experience (UX)에 관한 얘기들을 해주셨다. 로스쿨 진로를 매우 고민스럽게 여기던 나에게는 매우 알맞은 진로 일 것 같다고 한번 집에 돌아가면 컴퓨터를 켜서 찾아나 보라고 말씀을 해주셨다. 그리고 내가 알고 있던 미시간 대학교 선배가 나와 같이 심리학을 전공한 뒤, 석사를 카네기멜론 대학에 HCI로 가서 현재는 미국 아마존 (Amazon)에서 UX 디자이너 (UX Designer)로 일하고 있다는 것이었다. 물론 그 형님께도 연락해서 많은 정보들을 들을 수가 있었다.항상 테크 (Tech industry) 쪽에 관심이 있었던 나는 교수님과 헤어지고 나서, "이게 과연 내 인생의 전환점인가?"라는 뚱딴지같은 마음을 품고 집에 돌아왔다. 그리고는 컴퓨터를 켜고 시간이 가는 줄 모르고 새벽까지 나는 UI/UX에 관한 것들을 찾아본 것 같다. 직업군은 어떻고, 무엇을 잘해야 하며 어떤 대학원들이 있고 등등 무수히 많은 정보들을 노트에 적어가기 시작했다. 이 세상 그 누구도, 그 날이 내 인생을 180도 바꾼 순간이라는 것은 알지 못했을 것이다. 심지어 부모님도 그땐 얘는 도대체 뭘 하는 앤가 싶기도 하셨을 것 같다. (미시간에 기계공학으로 들어가 심리학으로 전과해서 갑자기 한국 돌아와서 로스쿨을 간다고 하고는 다시 공대 쪽으로 간다고 하니... 속이 터지셨을 것 같다)물론 로스쿨은 그다음 날로 바로 때려치웠다. 한번 꽂히는 것은 무조건 파고드는 성격 때문인지, 다른 것은 눈에 들어오지도 않았다. 당장 컴퓨터 학원을 끊고 아침에는 디자인과 코딩, 밤에는 대학원 준비 등으로 시간을 보내고 체력이 남으면 디자인 스터디도 알아보고 인터넷에서 블로그나 아티클들도 읽고, 네트워킹도 하려고 노력했다. 학원은 나에게 진도가 너무 느렸고 집에 오자마자 혼자 공부한 시간 동안에 훨씬 실력이 많이 는 것 같다. 항상 남들보다 훨씬 뒤처져있다고 생각한 것은 너무나도 당연했다. 나에게는 배워도 배워도 새로운 것들이 너무나도 많았지만 이 정도로 재밌었던 적은 없었던 것 같다. Dribbble이라는 곳에 가면 "저런 건 도대체 어떻게 만들지?" 하고 생각하는 것에서 끝나는 게 아니라 항상 스크랩해두고 똑같이 Sketch나 Photoshop을 켜고 따라 했다. 그리고 코딩에 관심이 있어서 그런지 홈페이지를 어떻게 만드는지 잘 몰랐지만 무작정 공부하고 비슷하게 만들어 보곤 했다. 그저 무엇이든 배우고 연습하고 읽고 쓰고 열심히 마우스 클릭을 했던 것 같다. 지금 생각해보면 나의 그 열정과 "절박함"이 지금의 나를 만든 것이 아닌가 생각한다.다시 시간의 흐름을 말하자면, 2015년 5월 대학교 졸업, 2015년 8월까지 로스쿨 준비, 2015년 12월까지 미친 듯이 코딩과 디자인 공부 및 대학원 지원 서류 준비, 2016년 3월 결과 발표, 2016년 8월 조지아텍 (Georgia Tech) HCI 석사 입학... 당연히 디자인에 대한 이해나 실력이 부족하다고 생각할 수밖에 없는 나의 배경이다. 추가로 말하자면 매일 이를 갈면서 공부를 했고 연습, 또 연습을 거듭했다. 모르는 게 있으면 포스팅도 해보고 피드백도 구하고 잘하는 분에게 페이스북이나 링크드인 메시지도 보내며 멘토 신청도 하고, 사람들이 많은 쓰는 유명한 앱들을 다운로드하여서 어떻게 작동하고 디자인돼 있는지도 미친 듯이 파고들었던 것 같다. 무엇보다 인터넷에 나와있는 수많은 튜토리얼, 블로그, 아티클 그리고 오프라인 스터디들 및 많은 정보들이 밑거름이 되었다. 그런 도중 운이 좋게 한국에 있는 스타트업에도 몇 개월 동안 일을 해볼 수도 있었고 Rightbrain이란 UX 컨설팅회사에서 주최하는 UX 수업도 3개월 동안 들을 수가 있었다.대학원 지원 당시에는 "나는 심리학 전공자이지만 디자인과 코딩에 대한 이해도와 실력이 있으며 나의 포트폴리오는 내가 혼자 코딩해서 만들었어요"라는 문구를 앞세워서 나를 패키징 했다. 그것이 좋은 selling point가 되었는지 많은 대학원에서 나에게 높은 점수를 주지 않았나 생각한다. 다시 말하지만 열정, 열정 그리고 열정... 게다가 나 자신이 어느 위치에 있는지 (self-awareness)에 대한 자각심이 나 자신을 계속 채찍질하지 않았나... 이렇게 생각이 든다. 앞으로도 갈길은 멀다.페이스북 디자인 인턴십에 대한 정보.페이스북 얘기를 들으려 왔는데 너무 나에 대해 얘기를 많이 한 게 아닌가 싶다...구글과는 다르게 페이스북은 디자인 직책이 하나다. 구글에는 Interaction Designer, Visual Designer, UX Designer, Product Designer, UX Engineer 등 UI/UX 관련 직책들이 되게 많은 반면에 페이스북에 디자이너는 프로덕트 디자이너 (Product Designer)라고 통합해서 불린다. 디자이너들은 미국에는 Menlo Park (CA), Seattle 그리고 New York 오피스에만 있고 유럽에는 런던 오피스에만 있는 것으로 알고 있다 (페이스북 오피스는 이외에도 훨씬 많은데 디자이너가 있는 오피스는 이렇게 4개인 것으로 알고 있다). 인턴 같은 경우에도 이렇게 4 지역에 분포해서 뽑는데 이번 연도에는 나를 포함해 총 17명이 선택되었다. 작년보다는 많다고 하는데 몇천 명의 엔지니어 인턴 숫자와는 너무나도 뻔하게 비교가 된다. 여하튼, 수만 개의 지원 서중에 달랑 17명이라니 로또 당첨이 아닐 수가 없다. 게다가 합격자들의 스펙을 보면 이미 각종 기업에서 인턴을 최소 한 개씩을 하고 많게는 세 번 까지도 한 친구들을 볼 수 있었다. 예를 들면 Palantir, Quora, Spotify, Google, Pinterest 등등... 그리고 작년에 페이스북에서 인턴하고 두 번째로 돌아오는 애들도 있었다. 그래서 그런지 합격이 되고 나서의 행복한 시간들 동안에도 나는 항상 이를 갈면서 열심히 공부했던 것 같다. 왜냐하면 결국은 모두 다 정직원 (Full-time) 오퍼를 받기 위해서 발버둥 칠 테니까...인터뷰 자체는 나의 Medium 아티클에서도 설명했듯이 모두 다 다 똑같은 인터뷰 프로세스를 거쳐서 뽑힌다. 인터뷰를 보는 동안에는 어떤 팀으로 갈지는 정확히 알지는 모르지만 오퍼를 받을 때에는 대충 어떤 쪽으로 갈지 알게 된다. 페이스북은 정직원으로 들어가기 많이 힘들다고 한다. 그 뜻은 인턴에서 최대한 전환 (conversion)을 시킨다고 들었다. 그래서 그런지 팀마다 인턴이 필요한 곳에서 신청을 하는데 프로젝트도 적절해야 하며 정직원을 뽑을 만한 자리가 나을 시에만 뽑는 것으로 알고 있다. 페이스북의 장점 중 하나는 인턴쉽을 잘하고 정직원이 되고 나면 원하는 팀으로 지원이 가능하며 일하는 와중에도 다른 팀에 지원 또는 한 달 동안 경험을 해볼 수도 있다. 회사에서도 여러 팀을 경험해 보는 것을 장려하며 많이들 왔다 갔다 하는 것 같다.잠시 오리엔테이션 때를 돌아보자면...처음에 인턴쉽을 시작하게 되면 전부다 Facebook HQ (Menlo Park, CA 에 있다)로 오리엔테이션을 하러 간다. 오리엔테이션은 디자인뿐만 아니라 엔지니어, 데이터 사이언티스트, 리서쳐, 마케팅 등 여러 다른 인턴들은 한데 모아 론칭한다. 장소는 Menlo Park, California라는 곳에 있는 어마어마한 크기의 본사인데 거기안에는 10가지가 넘는 식당뿐만 아니라 각종 샵들도 존재한다. 거기에서 페이스북 대부분의 제품 및 팀들에 대해 강의를 듣고 디자이너들은 따로 디자인 캠프라는 것을 듣는다. 디자인 캠프에서는 각종 소프트 웨어도 배우지만 페이스북의 디자이너로써의 자질과 능력 등 기본 지식들을 많이 쌓는다. 사람들도 많이 만나고 회사 밖에서는 절대로 상상도 할 수 없는 많은 신기한 디자인 및 인터널 (internal) 툴들도 경험하면서 몸이 들썩이고 손발에 땀이 나도록 긴장하기를 반복했다. 물론 기대감과 긴장감은 이루 말할 수 없었다.오리엔테이션 막바지쯤에는 나를 계속 평가하고 가이드해줄 인턴 매니저를 만나게 되며 사내 각종 이벤트에도 참여하면서 페이스북이라는 회사와 더 많이 친근해지고 디자인 인턴이라는 롤에 점차 익숙해졌다. 마크 저커버그나 셰릴 샌드버그 같은 유명한 사람들도 실제로 만나보고 사회에서 사람들이 아는 유명한 디자이너들도 가끔 이름이 보이기도 한다. 그 사람들이 우리를 가르쳐 주기도 한다. 마지막으로 오리엔테이션이 모두 끝나면 인턴마다 정해진 오피스가 다른데, 나는 시애틀로 배정을 받았다 (인턴쉽 오퍼가 나올 때 이미 장소는 정해진다).나의 팀은? 나의 역할은?페이스북 인턴 17명 중 나를 포함한 4명은 시애틀에 있다. 몇천 명이나 되는 시애틀 페이스북 직원 중 프로덕트 디자이너는 30명이 채 안된다. 어떤 사람들은 그 정도면 많다고 하는데 옆에 엔지니어들 뿐만 아니라 다른 직책들이 너무나도 많아서 그런지 살짝 외롭기도 하다. 하지만 그만큼 유니크한 거겠지... (정신승리!)나는 현재 Facebook Ads Measurement team에서 일을 하고 있는데 사실 시작하고 2주 동안은 많이 혼란스러웠다. 아무리 페이스북 유저가 된 지 10년 가까이 된다지만 페이스북의 광고 매니저 (Ads Manager)라는 제품은 한 번도 써보지 않은 데다가 유저가 나와 같은 보통사람이 아닌 광고나 마케팅에 종사하는 사람들이 대부분이니 말이다. 하지만 지금은 많은 정보들을 습득하고 적응해서 열심히 일하는 중이다. 많은 사람들과 만나서 똑같은 설명을 여러 번 듣고, 각 직책마다 한 사람씩 1:1 미팅을 잡아서 그 사람들이 무엇을 담당하는지 어떻게 일하는지 그리고 내가 그 사람들과의 관계에서 어떤 역할을 수행해야 하는지 등 많은 정보를 습득해야 했다.이제 2달이 지난 이 시점에 나의 경험을 되돌아보면 광고 (Ads)라는 쪽은 너무나도 매력 있고 전문성이 있는 것 같다. 처음에는 분명 다른 페이스북 프로덕트들과는 비교해서 이해하기 힘들었지만 지금까지 내가 차곡차곡 쌓은 지식이 조금은 자부심이 들긴 한다. 처음에는 다른 인턴들처럼 뉴스피드를 건들거나 메신저나 인스타그램, 또는 오리가미 (Origami)를 해보고 싶기도 했지만 광고라는 것이 되게 중요하고 많은 기업들에서도 큰 투자를 하는 분야이기도 한 것을 깨달으니 뭔가 기회가 많을 것 같기도 하다.내가 디자인하는 것은 차후 시리즈에 적을 생각이지만 쉽게 말하자면 대부분 Data Visualization과 Information Architecture이다 (그래프, 테이블, 유저 플로우 등등). Sketch로 디자인도 많이 하지만, 프로토타이핑도 많이 하고 발표도 거의 매주 하는 것 같다. 다른 디자이너들에게 크리틱도 받고 페이스북 그룹에도 올려서 피드백을 받는다. 여기서  중요한 건 절대로 혼자 디자인하지 않는다는 것이다. 항상 다른 사람들과 협업하고 (특히 Content Strategist와 UX Researcher) 가이드라인 내에서 많이 벗어나지 않지만 때때로는 창의력 있게 방법을 생각해내야 한다. 광고나 마케팅에 관련한 전문적인 내용들은 Product Manager나 PMM (Marketing Manager)와 상담하기도 한다. 나에게 주어진 프로젝트들은 각기 다르지만 전부다 Ads Manager 내에서 한다. (이 부분은 다음에 더 자세히 설명하고자 한다)"넌 인턴이지만 인턴이 아니야!"추가로 페이스북 디자인 인턴은 팀에서 인턴이 아닌 신입의 입장으로써 책임감을 가지고 일을 해야 한다. 나의 매니저가 말하길, "네가 인턴이라고 말하기 전에 네가 인턴인지 아무도 몰라"라고 하였다. 많은 사람들이 기본적인 가이던스나 정보들을 가르쳐주긴 하지만 모르는 것들이 있을 시에는 혼자 미팅들도 잡고 적극적으로 붙잡고 물어봐야 알려주기 때문에 알아서 자율적으로 탐방하고 필요한 정보들을 알맞게 얻어내야 한다. 손잡고 끌어주는 문화가 아닌 손을 놓고 어떻게 필요한 정보들을 얻어내는지 또 그것들을 어떻게 디자인 해내가는지를 보는 것 같다. 그래서 그런지 필요한 정보들을 알맞고 효율적으로 캐내는 것은 물론 중요하거니와 어떻게 다른 사람들과 소통하고 협업하는지도 중요하게 보는 것 같다.더 나아가 미팅이나 크리틱에 들어갈 때에는 항상 내 의견에 대한 이유들은 미리 숙지하고 이 미팅에 대한 agenda를 확실히 하고 들어가야 한다. 워낙 다들 바쁘고 시간 낭비하는 것을 매우 싫어하기 때문에 시간을 효율적으로 활용해야지 안 그러면 마이너스인 것 은 분명하다. 지금까지 느낀 건 확실히 디자이너는 발표도 많이 해야 하고 설명도 이해하기 쉽게 해야 하며 문서들도 많이 작성해야 한다. 커뮤니케이션이 디자이너의 정말 중요한 능력임은 몸으로 느끼게 된다.페이스북 시애틀 오피스는 다행히 캘리포니아에 있는 본사와는 다르게 10층짜리 큰 건물 하나에서 왔다 갔다 하기 때문에 시간은 그나마 절약할 수 있다. 미팅은 대부분 캘리포니아나 뉴욕이나 런던에 화상 챗으로 연결해서 같이 한다. 또, 또, 또 얘기하자면 모르는 것들은 과감하게 모른다고, 알려달라고 적극적으로 얘기해야 하며 내가 맡은 일, 그리고 내가 궁금한 점들이 있거나 알려줘야 할 경우에는 어떤 사람들에게 어떻게 알려주는 것이 편한지, 이런 것들을 센스 있게 잘 알아야 하는 것이 중요하다. 어떻게 보면 "그런 걸 어떻게 일일이 신경 써!"라고 생각할 수 있지만 30분이라는 짧은 시간 동안 미팅을 하다 보면 어쩔 수 없이 그래야 하는 걸 느낀다.자주 느끼는 거지만 디자이너는 그 어떤 직책보다 미팅의 숫자 또한 훨씬 많은 것 같다. 어떤 날에는 1시간도 내 자리에 앉아 집중해서 디자인을 못할 때도 있다. 수요일은 No meeting Wednesday라고 해서 미팅을 잡지 않는다. 그래서 나는 수요일에 정말로 최대한 집중해서 많이 끝내려고 노력한다. 하지만 그 수많은 다른 직책들과의 미팅들이 중요한 커뮤니케이션이며 "디자인 프로세스"이다. 엔지니어, 데이터 사이언티스트, 컨탠트 스트래티지스트, 프로덕트 매니저 등 모두 한 배에 한 목표를 가지고 올라타야 비로소 프로덕트가 좋아지니까 말이다.시애틀 페이스북 오피스는 어떤가?페이스북 오피스는 사실 엄청 크고 위치도 매우 좋다 (South Lake Union이라는 곳 앞에 위치). 캘리포니아에 있는 본사 다음으로 제일 크다. 지금은 10층짜리 거대한 건물 하나지만 앞으로 건설 중인 건물들이 있다. 페이스북 시애틀이 커지는 이유는 현재 많은 테크 기업들이 시애틀에 자리 잡아있는 이유도 있을 테고 본사가 뉴욕보다는 훨씬 가까운 것 때문인 것 같기도 하다. 뿐만 아니라 페이스북뿐만 아니라 구글, 아마존, 마이크로소프트 등 많은 기업들이 시애틀에 있다. 미국 진출을 고민하시는 분들은 시애틀도 정말 좋은 선택일 거라고 생각한다. 무엇보다 state income tax가 없어서 돈도 많이 아낄 수 있다.인턴쉽에 대한 보상에 대해서 많이 궁금해할 것 같은데, 정확한 월급 액수를 적는 것은 사실 무의미한 것 같다. 하지만 하나 확실한 건 미국 어느 테크 기업 중에서도 탑 중에 탑이다. 정말 이 정도의 돈을 받아도 되나 할 정도로 많이 주지만 마음속 안에 스며드는 메시지는 간결하다 "그 정도의 일을 3개월 동안 뽑아내길 바란다..." 사실 하루 3끼를 전부 회사에서 챙겨주며 집 도주고 그 외에도 모든 것을 제공해주니 그냥 열심히 일하고 즐길 때는 즐기고 그 외에 것들은 걱정하지 말라는 배려인 것 같다. 나는 매일 회사에서 주는 저녁을 먹고 집까지 걸어간다. 가끔 한국 테크 기업들에서 야근을 많이 한다는 기사가 나오는데 확실한 건 여기에서는 야근하는 사람은 정말 많이 없다. 출퇴근도 자유라서 미팅만 없으면 집에 가서 일을 하거나 집에서 일한다고 하고 화상으로 미팅을 들어오는 경우도 다반사다. 매우 유연한 회사이지만 자신이 맡은 역할은 훌륭하게, 남에게 피해 안 끼치게 잘 해결하는 걸 보면 정말 똑똑한 사람들은 많은 것은 분명하다.매일매일 시애틀 오피스에는 주황색 뱃지를 단 관광객들이 온다. 금요일이 되면 놀이동산인 것 마냥 방문객들이 정말 많아서 깜짝 놀랐는데 몇 주 지나고 나니 익숙해졌다. 직원들의 온 가족들도 오고 기업들에서도 탐방 오고 온사이트 인터뷰하는 사람들도 되게 자주 그리고 많이 보인다. 그럴 때면 항상 투어 하는 곳들이 있는데 그중 하나는 9층이다. 9층 야외 테라스에서는 전망이 죽여주는데 거기서는 여름 매일 내내 바베큐를 한다. 회사 내에 최고급 재료로 맛있는 음식을 제공하는 식당도 있지만 햇볕 아래 (시애틀은 그나마 여름에 날씨가 좋다는..)에서 먹는 바베큐는 힘든 오전을 잊게 해준다. 6층에는 메인 식당이 있는데 거기서도 하루 3끼 맛있는 음식을 제공한다. 항상 화덕피자와 요구르트 아이스크림 및 각종 음료수와 샌드위치, 과일, 채소는 무제한으로 제공된다. 이게 다 공짜라니! 음료수 종류만 해도 최소 50가지는 되는 것 같다.나는 7층에서 일을 하는데 7층의 장점은 다른 층과는 다르게 커피 내려먹는 곳이 엄청 크고 콜드 브루까지 항상 있어서 나처럼 커피를 너무 사랑하는 사람은 아침에 항상 들리게 되기 마련이다. 처음에는 혼자 커피 내려먹는 것을 할 줄 몰랐는데 회사 내에서 바리스타 수업도 있어서 금방 스타벅스 앱을 지우게 되는 자신을 발견할 수 있다. 이런 하나하나가 피로를 잊게 해주는 것은 분명하다.회사 내에 한국사람은 그렇게 많지 않은 것 같다. 시애틀 오피스에서 내가 본건 한 3명(?) 이 전부인 것 같다. 오히려 백인, 중국인, 인도인이 대부분 인 것 같고 확실한 건 지금 인턴쉽 기간 동안 한국말은 거의 쓰지도 않은 것 같다. 혹시 시애틀 근처에 사시는 분이 있으면 회사로 놀러 오시면 구경도 시켜드리고 얘기도 하는 것도 나쁘진 않을 것 같다.이만 줄이며...지금까지 두 달 동안 내가 보고 듣고 느낀 점 들 그리고 배운 점들은 너무나도 많지만 이 글 하나에 다 때려 넣기에는 너무 힘들지 않을까 생각된다. (지금도 너무 긴데...) 쓰면 쓸수록 더 자세히 쓰고 싶고 더 많이 다른 많은 것들을 포함시키고 싶지만 욕심이 과다하면 내용이 산으로 갈 수 있기에 여러 가지로 분할해서 쓸 계획이다. 만약에 자세한 것들에 관심이 있는 분들이 계시면 그것들을 주제로 써보고 싶기도 하다. 다음 시리즈에는 내가 어떻게 일하는지에 대해 더 자세히 적어볼 계획이긴 하다.밑에는 처음 방문자로 페이스북에 방문했을 적 사진이다.저땐 직원이 아니어서 오렌지색의 증을 들고 다녔지만 이제는 당당히 사원증을 들고 다닌다...너무나도 행복한 지금 나는 열심히 주어진 일에 최선을 다하고 있다.facebook wall#페이스북 #Facebook #인턴 #인턴후기 #인턴생활 #기업문화

기업문화 엿볼 때, 더팀스

로그인

/