스토리 홈

인터뷰

피드

뉴스

조회수 3226

HIG 비교 분석

HIG__HIG__는 __Human Interface Guidelines__의 약자로 비주얼 적인 디자인 규칙을 설명하고, 작업 동작에 대한 설명과 기능적인 설명을 통해 애플리케이션 __개발을 어떻게 하면 좋을지에 대한 방식을 추천한 개발 문서__입니다. 그 대표적인 예로 iOS HIG와 Android HIG 두 개가 있습니다. 이번 글에서는 두 가지의 HIG 대한 특징에 대해 알아봅시다.iOS HIGiOS HIG는 iOS의 애플리케이션을 개발하는 데 있어서 아주 중요한 문서입니다. 왜냐하면 이 문서가 앱 개발을 할 때 __기본적으로 지켜줘야 할 부분들을 설명__하고 있고, 그 내용이 지켜지지 않을 시 __App store에서 거절(reject) 될 수 있기 때문__입니다. 따라서 iOS HIG를 꼭 읽고 가이드라인에서 제시한 기준에 따라 개발을 하셔야 합니다.iOS HIG는 아래와 같은 내용을 담고 있습니다.플랫폼의 특성휴먼 인터페이스 원칙어플리케이션 디자인 전략iOS로 전환한 어플리케이션 사례사용자 경험 가이드라인iOS 기술 가이드라인iOS UI 요소 가이드라인아이콘과 이미지 가이드라인Android HIGAndroid HIG 또한 개발할 때 참고하면 좋습니다. iOS HIG처럼 기본적으로 지키지 않으면 거절(reject) 되거나 하지는 않지만, __Android가 제공해주는 다양한 기능을 설명__해주었습니다. 하지만 해당 문서는 플랫폼의 특성 등의 UI 요소들에 대한 내용이 부족하므로 __Android Design을 함께 참고 해서 보시면 개발하시는 데 도움__이 되실 것입니다.Android HIG와 Android Design는 아래와 같은 내용을 담고 있습니다.애플리케이션 개발 원칙어플리케이션의 비주얼 스타일 가이드 라인Android UI 패턴 가이드라인아이콘 디자인 가이드라인작업 디자인 가이드라인메뉴 디자인 가이드라인두 HIG의 애플리케이션 개발 가이드라인 비교iOS : iOS HIG안에 휴먼 인터페이스 원칙을 보면 사용자가 직접 선택해야 한다든지, 눈으로 보고 선택해야 된다든지 하는 내용이 있습니다. 그것을 보면 iOS는 사용자 중심 관점을 가진 개발 가이드라인이라는 것을 알 수 있고, 개발자에게 애플리케이션 개발 전략에 대한 내용도 가이드라인에서 제시하고 있습니다.Android : Android HIG안에 애플리케이션 개발 원칙을 보면 강력한 화면과 소리로 즐거움을 제공하거나, 다양한 기능에 대한 내용이 있습니다. 그것을 보면 Android는 심미성 중심 관점, 기능성 중심 관점을 가진 개발 가이드라인이라는 것을 알 수 있고, 개발자에게 애플리케이션 개발에 대해 iOS와 달리 개발 전략보다는 다양한 기능이 있으니 개발자의 자유에 맡겨 다양하게 개발하는 것을 가이드라인에서 제시하고 있습니다.두 플랫폼에 대한 UI 가이드라인 비교플랫폼에 따른 UI 크기 설정의 차이iOS : iOS는 디바이스들이 한정되어 있기 때문에 아이콘이나 레이아웃이 일정합니다. 따라서 iOS HIG에서 제시한 UI 크기를 지켜주셔야 합니다.Android : Android는 디바이스들이 해상도가 다 다르고 디스플레이들이 다양하다 보니 레이아웃 최적화를 해야 합니다. Android Design에서 이를 해결하는 방법으로 두 가지 방법을 제시하였습니다. 기본이 되는 중간 크기에서 일정 비율로 높이거나 줄이고 아니면 아예 큰 크기의 디스플레이로 시작하여 필요하다면 일정비율로 줄이는 방법을 권장하고 있습니다.터치 동작에 의한 플랫폼의 행동 비교iOS HIG는 터치 동작을 드래그나 대상을 선택하는 행동을 하는 것으로 정의하였습니다.Android Design에서는 터치 동작을 단순한 터치와 오래 누름을 통한 터치 두 가지로 나누어 정의하였습니다. 단순한 터치는 iOS HIG와 같으나 오래 누름을 통한 터치는 컨텍스트 메뉴나 컨텍스트 액션 바를 사용하는 데 이용됩니다.알림 기능에 대한 비교두 플랫폼 모두 짧은 단어들로 명시하기를 원합니다. 그러나 기술적인 문제나 어떤 설명이 필요한 상황이면 사용자에게 충분히 설명해야 합니다.iOS : iOS HIG에 경우 알림 버튼이 2개일 경우 항상 왼쪽 버튼이 어두운색이어야 하고 오른쪽은 밝은색이어야 한다고 정의합니다. 왜냐하면 가끔 사용자가 내용을 읽어보지 않고 버튼을 누르는 경우도 있기 때문에 오른쪽 버튼은 안전한 기본 작업을 수행하게 하여야 합니다. 위험성을 가진 액션을 제공할 경우 취소버튼을 오른쪽 버튼으로 하여 밝게 해야 합니다. 그렇지 않은 안전한 액션일 경우 취소 버튼을 왼쪽에 어둡게 배치해야 합니다.Android : Android Design에서는 알림 버튼의 배치나 색에 대하여 어떠한 가이드라인을 제시하지 않았습니다. 그러나 배치와 색에 관하여 다양한 디자인을 사용할 수 있도록 다양한 배치와 색에 대해 기술하였습니다.BAR 기능에 따른 비교1현재 뷰의 제목을 나타냅니다. 그리고 뷰의 이동을 나타낼 수 있는 버튼을 추가할 수 있으며, 뷰에 있는 내용을 관리할 수 있는 버튼을 추가할 수 있습니다.2뷰나 모드를 빠르게 전환을 할 때 주로 사용합니다. 모드 요소들에 대한 기능 버튼을 가지는 기능으로서 사용하면 안됩니다.3디스플레이를 전환할 때 주로 사용합니다. 위의 Bar와의 뷰나 모드전환보다는 더 크게 디스플레이가 전환한다고 생각하시면 더 알아들으시기 쉬우실 것입니다. 그리고 액션을 제공하거나 모드 요소들에 대한 기능 버튼을 제공할 때 사용합니다.차이점Tool BarBottom BarTab BarTop BarNavigation BarMain Action BariOSAndroid가이드라인에서 주로 버튼의 사이즈나 최대 몇 개까지 버튼을 배치하는지에 기술하였습니다. 그리고 Tab Bar와 Tool Bar 모두 아래에 있어 사용하기 때문에 두 가지를 같이 사용하지 못합니다.가이드라인에서 주로 버튼을 기능에 따라 다양한 모양으로 나누었습니다. 그리고 iOS와는 달리 Top Bar와 Bottom Bar의 위치가 나뉘어 있어서 두 가지의 기능을 동시에 사용 가능합니다.각 플랫폼별 고유 기능iOS : iOS HIG에서 iOS만의 고유 기능을 들자면 그 대표적인 예로 액션 시트를 들겠습니다. Tool Bar에 있는 버튼을 눌러서 일종의 선택을 표현하는 기능입니다. 액션 시트는 위에 있을수록 사용자 눈에 잘 띄고 위험성 있는 버튼은 빨간색으로 사용해야 합니다. 그리고 사용자가 가끔 홈 버튼을 누르려다 화면의 아래쪽을 누르는 경우가 있으므로 맨 아래 버튼은 취소 버튼으로 해야 합니다.Android : Android HIG에서 Android만의 고유 기능을 들자면 그 대표적인 예로 Holo와 Navigation Bar에 대해 들겠습니다. 둘 다 이번에 ICS 로 업그레이드되면서 나온 기능입니다. Holo에 경우 단조로운 Android의 스타일을 다양하게 바꾸기 위해 나온 기능입니다. Android의 Navigation Bar의 경우 iOS의 Navigation Bar와 엄밀히 말하면 다릅니다. Virtual Navigation Bar로 예전에 디바이스에서 버튼으로 있던 것을 Bar 형태로 가지고 온 것입니다.글을 마치면서이번 글에서는 대략 두 종류의 HIG에 대해 다뤄 봤습니다. 실제로 저희 앱에 가이드라인의 내용을 적용하였고 가이드라인에 대한 자세한 내용이 궁금하시면 아래의 링크를 참조해 주시길 바랍니다.iOS HIG : iOS Human Interface GuidelineAndroid HIG : Android Human Interface GuidelineAndroid Design : Android ICS Design#스포카 #HIG #디자인 #애플리케이션 #앱디자인 #프로토콜 #협업 #가이드라인 #인사이트 #꿀팁
조회수 1210

쟤 껀 맨날 한번에 컨펌나고, 나는 오백번 수정하고

시작하기전에...오늘 내용은 디자이너님들을 위한 내용이 주를 이룹니당 :)그런 경험이 겁나 많았어요. 분명 쟤 시안이 딱히 더 이쁜 건 아닌데 이상하게 쟤 건 쓱쓱 컨펌나고 내 껀 원죄라도 짊어진 듯 반려만 오만번... 왜 쟤만 항상...?도대체 뭐가 문젠지 아무리 들여다봐도 시안은 아주 정상적이고 전혀 문제도 없단 말이죠. 정렬도 정확하고 색도 기가막혀. 내가 봐도 이건 천년에 한 번 나올까말까하는 역대급시안이야. 근데.........내 것만 맨날 싫대. 다시 해오래. 그 느낌 아니래. 뭔가 좀 부족하대. 쓰읍...다 괜찮은데 쪼금..그 뭔가 하아..그게 없대. 도대체 그게 뭐냐고오............오늘은 시안컨펌의 비밀을 한 번 까보려고 합니다. 일단 컨펌이 안나는 이윤 3가지가 있습니다.1. 내가 맘에 안들어2. 답정넌이야(내가 원하는 그 그림이 아냐. 물론 그 그림을 얘기해주진 않을거야.)3. 진짜 걔가 더 잘했어 네 그렇습니다.  사실 사회생활이란 게 익히 아시다시피 노력한만큼 정당한 결과가 늘 주어지진 않더라구요. 사실 한 번 눈밖에 나면 내가 국보급 시안을 가져가도 뭔가 색안경을 끼고 보기 마련입니다. 컨펌하는 분과 어느정도의 친근친근한 관계를 유지해놓는 것은 굉장히 유리한 일입니다. 딱히 시안이 예쁘진 않지만 맨날 팀장님과 술친구하던 저 녀석은 조금만 어찌저찌 에이 팀장님, 눈으로 찡긋, 오늘 치맥콜? 하더니 컨펌되버리고..나는 엊그제 팀장하고 옳은 UX에 대해 논쟁을 벌이다가 그 분의 심기를 건드려버린 탓에 벌써 7번째 반려당하고 있는 게 또 현실입니다... 정말 분비물같은 현실이죠...네 맞아요, 우리는 지금 디자인이라기보단... 정확히는 '일' 을 하고 있는 중입니다.아부 클라스가 아주 붓글씨로 적어 현판을 걸어야겠다.2번, 답정넌은 뭐 거의 모든 경우에서 찾아볼 수 있습니다. 대부분은 설명은 잘 못하겠고 할 수 있어도 말해주지 않지만 넌 내 생각을 알고있어야 하죠. 그리고 그 그림과 다르면 반려당합니다.  세번째 원인처럼 진짜 포인트를 잘못잡고있는 경우일 수도 있어요. 지금 우리 기획방향과 이 디자인의 목적성이 예쁨인지 아니면 가독성인지, 자극을 주는 용도인지 뭔지 다시 생각해봐야 할 경우예요. 실상 수많은 디자인업무에서 진짜 고퀄의 예쁜 디자인을 필요로 하는 경우는 그리 많지 않더라구요. 오히려 워딩이나 구성, 가독성이 주가 되어야 하는 경우가 훨씬 많죠. 그렇다면 최대한 컨펌나게 한 번 해봅시다.일단 선작업이 좀 필요해요. 모든 사람들은 뭔가 원하는 그림이 있기 마련입니다. 대부분 그걸 간파해주길 바라죠. 진짜 얼토당토않는 요구지만, 어쨋든 불평만 하고있을 수 없잖습니까. 일은 해야하니까요. 그러니 간파해보자구요.  1.     비슷한 컨셉의 시안은 금물. 보통 처음에 레퍼런스를 보여주면서 컨셉을 정할 때 승부를 띄워야해요. 그때 보통 3개 정도 컨셉레퍼런스 이미지를 가져가잖아요. 이 때 주의할 건, 완벽하게 다른 걸 가져가라는 거예요.(좌부터) 안드레이 몰리 보슈 코 作, 서울사회적기업협의회, Veerle Pieters-  글 없고 여백많은 심플한 컨셉의 시안(누가봐도 포토샵) -  공공입찰제안서와 같은 알차고 빼곡하며 클래식한 분위기의 시안(누가봐도 PPT) -  플랫아이콘과 컬러감이 살아있는 벡터 중심의 시안(누가봐도 AI)  예전에 이상형월드컵 기억나세요? 일단 그런식으로 압축시켜 나가야 해요. 완전히 다른 시안3개를 주면 고민의 폭이 굉장히 줄어들어요. 사람은 대부분 자기 생각에 대한 확신이 없어요. 그냥 확신이 있다고 생각만 하고 있을 뿐이죠. 정작 원하는 걸 구체적으로 물어보면 대부분 자세히 대답하지 못해요. 이를테면 이런 식이예요. 이상형 누구야? 하면 누구같은 사람 어떤 사람 얘기하잖아요. 나름 분명하다고 생각할 거예요. 그럼 이렇게 물어볼까요? 쌍꺼풀은? 코 높이는? 피부톤은? 울대는 나와있어야 해? 어깨가 좋아 등근육이 좋아? ...정작 이렇게 하나하나 물어보면 고민한다구요. 우리가 확실하다고 '생각'하는 것들은 대부분 착각입니다. 눈으로 보여야 그제서야 구체화되기 시작해요. 그래서 눈으로 보여주는 거예요. 구체적으로 까이기도 하고..'당신이 원하던 건 이런거였어!' 라고. 상대방이 생각을 압축할 수 있도록 차근차근 제시해주는거죠. 그래서 이 때 보여주는 시안들은 비슷해선 안되요. 완전히 하나를 선택할 수 있게 확실하게 다른 종류들이어야 합니다. 하나가 사진위주의 스큐모픽이라면 다른 하나는 완전 벡터이미지 가득한 플랫디자인 이미지인거죠. 2.     컬러, 정렬, 톤 순서로 압축시켜요!뭔가 디자인컨셉이 잡혔다면 이젠 컬러를 잡읍시다! 세상엔 오조오억개의 색이 존재해요. 그러니 무턱대고 어떤 색으로 할까요? 라는 질문은 '그건 니가 정해야지!' 라는 카운터어택으로 돌아옵니다. 그러니 객관식으로 정리해서 선공을 날리도록 합시다.색구성방식엔 HSB가 있는 걸 알고계실 거예요. HSB는 색도(Hue), 채도(Saturation), 명도(Brightness)로 나뉘어지잖아요. 상대방에게 컬러를 제안할 땐 B-H-S 순서로 제안해보도록 해요!- 밝게 가요? 어둡게 갈까요?(전체톤)- 빨주노초파남보 중에 어떤 컬러톤으로 갈까요?(메인컬러)- 색은 진하게가요 부들부들하게 가요?(메인컬러 채도)B복잡하게 갈 필요없이 ‘어두운 톤에 밝은 글씨로 갈까요? 밝은 배경에 어두운 글씨로 갈까요?’ 이것부터 확정지어 보아요. 회색배경은 거의 선택하지 않아요. 그러니 선택항에서도 아예 빼버리도록 합시다. 괜히 하나 더 물어봐야 혼란스럽기만 하거든요. H다음은 색도를 정해보아요. 빨주노초파남보 중 뭘 고르고 싶은지 물어보는 거예요. 놀랍게도 대부분의 사람들은 파란색이나 보라색계열을 많이 선택하더라구요. 물론 팬톤에선 올해의 색을 출시하고 실제로 컬러는 산업전반에 큰 영향을 미치기는 하지만, 우리 옷장엔 무채색 옷이 즐비한 것을 보면 인간의 색채선택은 꽤나 제한적이예요. 새로운 색에 대한 공포심은 디자인시안에도 그대로 적용되죠.  실제로 조선일보에서 진행한 색채 선호도조사에선 우리나라 355명의 성인 중 16.9%가 파랑을 가장 좋아하는 색으로 선택했다고 해요. 2위와 3위는 동률로 초록색과 보라색이 선택되었어요. 모두 푸른 계열의 색상이죠. 싫어하는 색은 18.6%로 주황색, 핑크(12.2%)와 빨강(11.9%)가 그 뒤를 이었답니다. 모두 붉은 계열의 색상이예요. 특히 우리나라 사람들의 옷장엔 대부분 검정, 남색, 흰색, 파랑, 회색 등의 옷이 가득한 것을 생각해보면, 어떤 색을 먼저 제안해야 할 지 대략 감이 올 듯 하죠?근데 이런 고민이 들어요. 이번컨셉은 도저히 파란색이 어울리지 않아. 무조건 부농부농으로 가야해!! 그런데 팀장님이 파란색덕후야 완전 스머프야. 어떻게 할까요? 네 맞아요. 일단 파란색으로 가요. 우리는 일을 하고 있어요. 일단 그 사람의 신뢰와 호감을 얻는게 먼저에요. 파란색으로 가면 본인도 이게 아니라는 걸 알거예요. 그러면 그 때 넌지시 제안해봐요. '그럼 혹시...부농색은 어떨까요? 이번 컨셉에도 꽤나 잘 어울리고.. 좀 색다를 것 같은데요..'라고. 팀장의 의견을 충분히 들어주었으니 이제 본인도 너그러운 사람이 되고싶어요. '어 그래, 그렇게 한 번 해보자.' 라고 말할 수 있어요. 뭔가를 요구할 때는 상대방이 자신의 체면을 구기지 않으면서 무언가를 제공할 명분이 있어야 해요. 하나를 주고 두번째 수를 생각하는 게 훨씬 좋아요.S 만약 윗사람의 취향이 놀랍게도 특이해서 민트색이 정해졌다고 해볼께요. 이젠 마지막으로 채도를 정할 차례예요. 파스텔톤의 부드러운 민트색도 있고, 화창한 하늘색과 같은 민트도 있고, 페리오치약색도 있고, 굉장히 불량해보이는 피스타치오 아이스크림 색과 같은 진한 민트색도 있어요. 민트색은 그 종류만 수백만가지가 될 수 있어요. 미묘한 차이까지 포함하면 거의 무한대에 가깝죠. 그러니 거두절미하고 우리가 먼저 제안하도록 해요. 채도를 10단계로 쪼개요. 어렵게 할 필요없어요. 진한색기준으로 투명도(opacity)를 10%씩 줄여요. 그렇게 10개 색을 만들어서 고르게 만들어요.물론 이렇게 해서 최종적으로 색을 골라도 어차피 나중에 또 바뀔거예요. 반쯤 포기하고 그냥 고르라고 하세요. 색이 정해진 후엔, 가운데/왼쪽/오른쪽 정렬 중 어느 쪽으로 레이아웃을 정리할 지 정해요이미 대략적인 레이아웃 포맷을 잡아가도 좋아요.마지막으로 폰트와 톤을 정리해요.전체적으로 둥글고 부드러운 톤으로 갈 것인지, 각지고 정렬된 느낌으로 갈 것인 것 등의 톤을 정리하면 두 번째 관문이 끝나요. 짱복잡해요. 하지만 글로 쓰니까 긴거예요. 실제로는 5분안에 끝날 수 있어요.   3.     순서를 정하고 이유를 달아줘요!시안을 보고하러 가는 눈빛이젠 시안이 완성된 다음 보고하러 갈 때의 노하우예요. 보통 하나만 덜렁 가져가진 않아요. 그건 아주 초보적인 거예요. 적어도 3개의 안을 들고가는게 맞아요. 보통 노련한 분들은 이쁜거 하나, 특이한 거 하나, 그지같은 거 하나를 들고가요. 하나는 버리는 카드고 내가 미는 시안을 1번으로 달아요.사실 시안이란 것은 대부분은 ‘느낌’에 의해서 만들어져요. ‘쌍꺼풀 있는 사람이 좋아.’라고 얘기하면서도 정작 내 연인은 무쌍인 경우를 생각해보면 쉽게 이해가 가죠. 원함과 실제는 굉장히 달라요. 원함은 굉장히 추상적이예요. 그리고 이유를 설명하기 어렵죠. 그러니 우리가 이유를 만들어줘요. 이유를 달아줄 땐 어려운 얘기 쓰지 말고, 이것을 선택하지 않으면 생기는 문제점들 위주로 말해줘요. 2번시안은 좋긴 한데, 가독성이 좀 떨어질 수 있고, 3번 시안은 사람에 따라 호불호가 있을 수 있다는 등등…맞아요 결국엔 ‘1번을 선택하세요.’ 란 얘기예요. 만약 그럼에도 상대방이 2번이 좋다고 할 수도 있어요. 사람의 마음은 순천만갈대보다 더욱 휘청거리니까요. 하지만 막무가내로 우기진 않을거예요.  ‘2번에서 글자를 크게 키워서 가독성을 높여주세요.’ 정도로 정리되겠죠. 왜냐구용?앞에서 우리가 그렇게 하나하나 꼬집꼬집 물어보면서 정리해놓은 히스토리가 있잖아요. 본인이 직접 정하고 골랐던 경험이 있으니 자신의 선택에 대해 번복하는 건 좀 부끄러운 일이예요. 그냥 적당히 합리화시키는 편이 더 빠르고 효율적이예요. 사람의 선택은 대부분 이렇게 이루어지죠. 물론 이와같은 각고의 노력에도 불구하고 그냥 다 맘에 안드니 다시 해!!! 라고 할 수도 있어요. 사람도 아니예요. 그래선 안되는거예요. 나쁜새럼...혼란하다 혼란해.....아니 그럴거면 왜 이런 고생을 해요? 라고 하겠지만, 저 과정은 그 자체로 두 가지 의미가 있어요.일단 여러분이 명쾌하고 깔끔한 커뮤니케이션을 하는 사람임을 어필할 수 있어요. '와, 쟤 진짜 뭔가 체계적이다...' 라는 이미지를 줄 수 있죠.그리고 명분을 획득할 수 있어요. '팀장님이 이거 좋다면서요!?' 라는 명분과 '지금까지 주구장창 당신의견을 들어줬으니 이제 내 의견도 들어워요!' 라고 말할 수 있는 명분말이예요. 그러니 앞으로 컨셉 레퍼런스를 정할 땐, 조금 더 몇장 준비해서 가져가도록 해봐요. 질문 몇 개가 더 추가되는 것만으로도 뭔가 쉽게 정리되는 느낌을 받을 수 있을거예요. (물론 그전에 다소 돈독한 관계가 쌓여있는 상태라면 더욱 좋을 것 같아요.. 혹시라도 찌릿찌릿한 웬수관계라면 이번 기회에 커피타임이라도 한 번 가져보도록 해요... 이것도 저것도 아니면 팔근육과 갑빠를 키워보아요...)스킬사용조건 : 최소한 상대방이 사람의 말을 이해할 수 있어야 한다. 시전자와 상대방의 관계가 좋을 경우 100%의 추가효과를 부여받는다. 그러나 상극일 경우 효과는 일정확률로 효과는 0가 된다.
조회수 1003

페이스북 포스팅 복기

들어가기전 그냥 생각페이스북은 자전거와 같이 한번 배웠다고해서 평생 잘 할 수 있는게 아닌것 같다.사람들에게 도달되는 방식(알고리즘)도 변하고 유저들이 사용하는 방식도 바뀌는것 같다.과거 사람들의 소식을 알기 위해 페이스북을 사용했다면 지금은 매거진? 원하는 정보 스크랩북? 정도로 사용한다고 한다.목적이 달라지면 그 목적에 맞는 컨텐츠를 제공해야 경쟁속에서 살아남을 수 있겠지.. 고객을 항상 생각하는 마음을 잊지 않아야겠다.상황 설명3월15일 포스팅한 컨텐츠1주2차 어플리케이션 포스팅은 기존 W에 비해 M의 어플리케이션이 어떻게 변했는 지 소개하였다.해당 컨텐츠를 포스팅 하기 전 가설은 "'댓글'이 '좋아요' 보다 도달률(reached)이 더 높을 것!"이다. 이를 확인하기 위해 '댓글'을 더 많이 달 수 있도록 설계를 하였다. 그 요소가 바로 베타테스터 모집이었다. 포스팅에 댓글을 달면 추첨을 통해 무료체험을 진행하는 것이다.컨텐츠 기획지난 포스팅 (제품 디자인)의 독자를 확인하였다. 기존 스위처를 사용하는 사람의 비율이 비사용자 보다 '3배' 더 많았다. 이에 독자는 기존 스위처를 사용하는 사람이라 생각하였다.  "기존 스위처를 사용하면서 사용상 문제점을 얘기했었고, 페이스북에서 새로운 스위처가 출시된다는 소식 을 듣고 기존제품에 비해 달라진 외관을 본 상태에서 달라진 앱 소개를 기다리고 있다."이라고 TPO를 설정하고 고객의 목소리를 상기하니 다음 4가지 내용을 다뤄야겠다는 결론이 나왔다.1.  설치과정 삭제2. 2개의 전원 버튼3. 배터리 용량 상시 확인 가능4. 타이머 기능이번에는 문제 없이 기획을 마무리한 것 처럼 생각했지만 아니었다!문제점1. 목표가 "댓글 늘리기"이면 '누가', '왜' 댓글을 달았는 지 확인하지 않았다. 독자와 TPO를 절실히파악해야 하는데.. 기본이 안되어있다.2. 기획 단계에서 비효율적인 시간이 많다.why? 독자를 파악하는데 시간이 너무 오래 걸린다. 매번 포스팅 마다 고객의 목소리 확인을 0부터 시작하 는 느낌? 해당 내용은 불변하니깐, 자료를 자주 들여다 보고 그루밍하여 고객의 목소리를 통해 얻어진 '감'을 잃지 않도록 하자.컨텐츠 제작이번에도 '카드뉴스' 형식으로 컨텐츠를 만들었고, 다음에는 이러한 부분을 좀 더 신경써서 컨텐츠를 제작하려고 한다.1. 이미지 퀄리티카드뉴스 이미지 중이미지의 상하좌우 부분에 하얀 테두리가 생긴다. 왜인지 모르겠다.. 사소한 부분이라 많은 시간을 투자하지 않아도 괜찮다. 하지만 눈에 계속 거슬려서 확실한 Frame 을 하나 만들어 놓고 앞으로 사용할 이미지를 그 안에 넣어서 깔끔하게 포스팅을 해야겠다.2. 컨텐츠 제작은 1시간내로.컨텐츠 제작은 하면서 점점 빨라질 것으로 믿는다. 그리고 기획이 확실하면 컨텐츠에서 낭비하는 시간이 줄어든다. 3시간내로 기획부터 포스팅까지 마무리 할 수 있도록 시간 단축에 신경쓰자.3. 카드뉴스에 사용하는 PPT form 만들기카드뉴스에서 사용하는 이미지 제작 방식은 그렇게 많지 않다. PPT로 기본 Form을 만들어 놓고 그냥 가져다 쓰면 시간 단축에 도움이 되겠지!결과1. "전 보다 더 많은 댓글을 유도하자!" 라는 목표는 달성하였다. (지난 포스팅 대비 3배 상승) 하지만, 도달률은 훨씬 낮아 우리의 가설은 잘못되었음을 알게 되었다.2. 난 '좋아요'를 누르고 '댓글'도 남길 줄 알았는데, 전혀 달랐다. 좋아요 '50명' .. 댓글 '60명'.. '좋아요'를 누르는건 습관적인 행동이라고 생각했는데, 아닌가 보다.3. '제품 디자인' 포스팅과 '어플리케이션' 포스팅 둘 다 참여한 인원은 16명이다. (어플리케이션 포스팅 전체 인원 중 31% 밖에 안됌) 생각보다 독자 이탈률이 많아 문제 인것 같다. 앞으로의 포스팅은 기존 독자들의 지속적인 참여를 이룰 수 있게 해야할 듯 하다.그 방법은 무엇일까? :)#스위쳐 #Switcher #마케팅 #마케터 #SNS마케터 #SNS마케팅 #인사이트 #페이스북 #페이스북마케팅
조회수 1039

창업자들의 놀이터 규제 샌드박스

[동아닷컴 기고 칼럼]개인은 창의성 실험하고, 사회는 다양성 확보해야 우리는 법이 필요하다. 사회는 법에 근거한 공권력으로 질서를 확보하고, 개인은 (사회가 정한) 법과 질서 안에서 자신의 삶을 정당하게 보호받는다 믿으며, 자유롭고 주체적으로 살아간다. 그리고 법이 제시하는 절차와 규범은, 사업가들에게 사업 시작과 운영에 있어 상당한 예측 가능성을 선사해 자본주의 발전에 기여했다. < 우리는 법이 필요하다, 출처: 핀다 >하지만, 법 역시 불완전한 인간이 만드는 불완전한 결과물이어서 우리는 평생에 걸쳐 법을 고치고, 없애고, 새로 만드는 과정을 반복한다. 그래서 법은 겉모습과 다르게 시대적 흐름을 반영하는 역동적인 결과물이다. 법이 일상생활에 미치는 영향은 지대하기 때문에, 처음에는 문제가 없더라도 시간이 흐른 뒤 사회와 환경, 사람이 바뀌면 여지없이 치열한 논쟁의 대상이 된다.이에 규제개혁 이슈는 요즘 들어 뜨거운 감자다. 최근 국내 포지티브 규제 방식을 지적하는 기사가 자주 보인다. 어려운 경제 상황과 4차 산업이라는 새로운 개념의 등장은 사람들로 하여금 도전의 필요성과 기대감을 동시에 심어줬지만 막상 국내에서 신사업을 하기에는 녹록치 않기 때문이다. < 금융상품 추천 플랫폼 구조도, 출처: 핀다 >금융상품 추천 플랫폼 핀다는 미국에서 이미 3,500만 명의 가입자를 보유하고 있는 크레딧 카르마처럼 온라인 금융상품거래 시장의 아마존을 지향한다. 하지만, 현존하는 법률이 돈을 빌릴 사람과 금융회사를 연결하는 일에 대해 '1사 1인' 원칙으로 한계를 정하고 있어 사업모델을 변경할 수밖에 없었다. 금융상품을 사고 팔려면 대면 거래를 해야 하고 금융기관 한 곳의 상품만 팔아야 하므로, 다양한 상품을 비교하고 판매하는 마켓플레이스 자체가 불가능하기 때문이다.온라인 거래를 제안하는 기업에 여전히 오프라인 시대의 규제를 적용한 것이다. 중고차 플랫폼 사업을 하는 '헤이딜러'는 폐업 위기에 몰리기까지 했다. 미래창조과학부에서 이 업체를 '창조경제 우수사례'로 선정했음에도, 국회에서 오프라인 사업소와 주차장이 없는 온라인 중고차 업체를 허용하지 않았기 때문이다. 또한, 세계 100대 스타트업 중 57개 기업은 국내에서 사업을 시작도 못했을 거라는 최근 뉴스에 이르기까지, 새로운 모델을 사업화하기 어려운 것이 국내 현실이다. 아이디어가 혁신적이더라도 법적으로 문제가 없는지 살피는 과정이 필요한 이유다. 법적 적합성에 관한 불확실성 존재는 아이디어 발상에서부터 창의성을 제한했다. 다만, 규제에 대한 공론화가 지속적으로 이뤄지면서, 정부도 문제를 인식함에 따라 점차 긍정적인 변화 조짐이 나타나고 있다. 얼마 전, 문재인 대통령이 4차산업혁명위원회 회의에서 혁신성장을 지향점으로 삼으며 '규제 샌드박스'를 언급했다. 규제 샌드박스는 신기술과 서비스가 시장에 안착할 수 있도록 일정기간 기존 규제를 유예하거나 완화하고, 문제가 생길 경우에만 규제를 적용하는 제도다. 규제프리존과는 다르다. 규제프리존이 지역 단위로 규제를 풀었다면, 규제 샌드박스는 프로젝트 단위로 신청을 받고 이를 방해하는 규제의 문제점과 개선책을 논의한 뒤 규제를 완화하는 절차를 거친다. < 샌드박스란 명칭은 아이들이 다치지 않고 마음껏 놀도록 만든 모래통에서 유래, 출처: 핀다>샌드박스란 명칭은 아이들이 다치지 않고 마음껏 놀도록 만든 모래통에서 유래한다. 핵심은 '마음껏'이다. 규제 샌드박스는 사업자들이 새로운 모델을 시험할 수 있도록 자유로운 법적 공간과 상상할 기회를 제공한다. 이 제도는 해외에서도 활발하게 논의, 토의하고, 실제 적용 중이다. 영국은 2014년 핀테크 서비스 '실험의 장'을 마련하기 위해 처음 규제 샌드박스를 도입했고, 싱가포르는 2016년 핀테크 분야 규제 샌드박스 시행안을 발표했다. 일본도 규제 샌드박스를 'Society 5.0(4차 산업혁명)'이란 국가전략 일부로 올해 도입했다.영국과 싱가포르가 핀테크 분야 위주로 규제 샌드박스를 운영하는데 반해 일본은 인공지능, 사물인터넷, 빅데이터 등 4차 산업혁명의 여러 분야를 다룬다. 우리나라도 인공지능, 사물인터넷, 자율주행차, 드론 등 다양한 영역을 규제 샌드박스 내에서 육성할 계획이다. 이외에도 미국, 독일, 호주, 대만 등 새로운 산업 흐름에 적응하기 위해 규제를 재설계하려는 움직임이 활발하다. 혁신과 변화, 개혁이란 단어를 많이 접하는 요즘이다. 그동안 우리가 살아온 사회 구조는 더 이상 변화한 환경에 적합하지 않다는 목소리의 발로일 것이다. 법의 가치는 절차적 정당성을 확보하고 이로부터 사람들에게 명확한 방향을 제시하는데 있다. 법적 안정성은 그런 차원에서 의미가 있다. 그러나, 하루가 다르게 기술이 발전하고 창업자들이 처한 환경도 매순간 달라진다. 이럴 때 '법이 원래 그렇습니다'란 말은, 새로운 시도를 하는 개인에게도, 돌파구가 필요한 국가에게도 도움 되지 않는다. 이제는 변화가 필요한 시기다. 규제개혁을 위한 정책적 움직임이 개인과 법인의 개성을 발전시키고, 사회적 다양성과 역동적인 생태계에 적응력을 기르는데 기여 할 것이라 기대한다. 김서광, 핀다 홍보 및 마케팅 담당 매니저금융상품 비교추천 플랫폼 핀다(www.finda.co.kr)에서 마케팅 및 홍보 매니저 담당. 성균관대에서 인문학과 사회과학을 전공한 뒤, 동 대학원 정보통신대에서 HCI(Human-Computer Interaction)를 연구하고 있다.글 / 핀다 김서광([email protected])동아닷컴 IT전문 권명관 기자 [email protected]원문보러가기!![스타트업 창업이야기] 창업자들의 놀이터 규제 샌드박스[동아닷컴]개인은 창의성 실험하고, 사회는 다양성 확보해야우리는 법이 필요하다. 사회는 법에 근거한 공권력으로 질서를 확보하고, 개인은 (사회가 정한) 법과 질서 안에서 자신의 삶을 정당하게 보호받는다 믿으며, 자유롭고 주체적으로 살아간다. 그리고 법이 제시하는 절차와 규범은, 사업가들에게 사업 시작과 운영에 있어 상당한...sports.news.naver.com #핀다 #시장분석 #스타트업 #운영 #인사이트 #기고문
조회수 1148

컨텐츠 마케팅의 한계와 극복 방법에 관하여

글을 시작하며, 제가 이 글을 쓸까 말까? 망설였던 이유에 대해 이야기하고자 합니다. 저는 마케팅이 좋아서 대학교 때부터 본격적으로 마케팅 관련 공부와 활동을 시작했고, 지금도 그것을 꾸준히 이어오고 있으며, 현업에서 마케팅 담당을 한 지 4년을 넘어가고 있는 사람입니다. 다시 말해 지금까지 쌓아왔던 경험과 시각은 학생과 사원-대리급에 지나지 않고 많이 부족하다는 것을 잘 알고 있으며, 그래서 함부로 다른 서비스의 마케팅 사례들을 속단해서는 안 된다는 것도 알고 있습니다. 그럼에도 불구하고, <컨텐츠 마케팅의 한계와 극복 방법에 관하여>라는 글을 쓰려고 하는 이유는, (1) 그만큼 마케팅, 그리고 컨텐츠를 사랑하기 때문에 (2) 이렇게 컨텐츠 마케팅을 생각하는 사람도 있다는 것을 보여주고 싶기 때문입니다. 이 점을 먼저 이야기하면서 글을 시작하겠습니다. 난리를 치른 직방과 한국 일보, 무엇이 문제인가? 최근 페이스북을 보다가 경악스러운 (정말 경악스럽다는 표현밖에는 할 수가 없음) 컨텐츠를 두 개 보았는데, 하나는 직방에서 올린 웹툰이었고, 또 다른 하나는 한국 일보에서 올린 동영상이었습니다. 먼저 직방의 컨텐츠를 대략 요약하자면 아래와 같습니다. 인터넷에 돌고 있는 '자취방 썰'을 브랜드가 노출될 수 있도록 웹툰으로 재가공한 컨텐츠였는데, 문제는 (1) 이 컨텐츠를 보고 브랜드에 대해 일말의 긍정적인 느낌 (유용하다, 직방을 써야겠다 등)을 주지도 않고 (2) 브랜드 컨텐츠에 쓰기에는 내용과 표현 방식이 적절치 않았다는 점입니다. (풀 내용은 관련 기사 ◀링크 참고) 이에 직방은 사과문을 올렸지만, 돌아선 소비자들의 마음까지 어루만지지는 못했습니다. (직방의 사과문 ◀ 이것도 링크 참고)이 동영상도 페이스북을 보다가 경악했던 영상인데, 한국일보에서 올라왔던 <중국 놀이기구 사고> 영상입니다. 현재는 영상을 삭제한 것으로 보이는데, 이것에 대해 문제제기를 하면서 캡처를 해둔 것이 있어 위에 첨부했습니다. 문제가 되는 지점은 (1) 자극적인 카피 → 사고가 난 것인데, '한 소녀가 놀이기구에 대.롱.대.롱 매달린 채 돌아가고 있다"는 너무한 문구이며, (2) 실제로 놀이 기구가 고장이 나서 소녀가 사고를 당해 사망을 하였는데, 이 장면을 모자이크 없이 그대로 올렸고 (3) 무엇보다 이것을 '한국일보' 페이지가 올렸다는 점이 충격적이었습니다. 이것은 우리에게 경각심을 주는 내용도 아니고 (단지 사고가 이렇게 났다, 는 사실을 보여줄 뿐) 페이스북은 미성년자도 볼 수 있기 때문에 사실 전달 이외에 큰 교훈이 있는 것도 아닌 영상을 이렇게 올리는 것은 분명 잘못된 일이었습니다. 왜 이런 일이 일어났을까? 이 두 케이스를 보면서 "왜 이런 일이 일어났을까?"를 생각해보았을 때 크게 3가지 요인이 있는 것 같았습니다.첫 번째는 컨텐츠의 특성을 간과했기 때문입니다. '사람들에게 긍정적인 반응을 불러일으키는, 좋은 컨텐츠'라 함은 감동, 재미, 정보 3가지 요소가 들어갑니다. 그리고 이러한 좋은 컨텐츠들은 제가 굳이 예시를 들지 않아도 이젠 너무나도 쉽게, 많이 볼 수 있습니다. 그러나 위 2가지 사례(직방과 한국일보)에서는 이 3가지 요소를 찾아볼 수 없습니다. 어떠한 감동도 없고, 재밌지도 않고, 정보도 없습니다. 두 브랜드에서는 이 점을 간과했던 것 같습니다. 두 번째는 SNS의 특성에 관한 이야기입니다. SNS 세상은 "내가 공유하는 것 = 나"인 세상입니다. 자신의 전문 분야에 관련된 정보를 많이 공유하면 '전문가'로 금방 인식되는 경우를 많이 보셨을 것입니다. 이걸 다른 말로 하면 감동적인 컨텐츠를 많이 공유하면 '나 이렇게 감수성이 풍부한 사람이야'를 보여주는 것이고, 웃긴 컨텐츠를 많이 공유하면 '나 이렇게 재밌는 사람이야'로 포지셔닝된다는 것이지요. 이렇게 '내가 공유하는 것 = 나'로 인식되는 세상에서 무섭고, 잔인하고, 자극적인 컨텐츠를 공유하면서 '나 이렇게 잔인한 걸 봐도 아무렇지 않은 졸라 쎈 사람이야'이라고 자신을 표출하는 사람은? 사이코패스가 아닌 이상, 그럴 리가 없을 것입니다. 나의 실명과 이름, 행동 로그가 공유되는 SNS, 특히 페이스북에서 대놓고 이런 행동을 하기는 매우 어렵죠. 이런 관점에서 봤을 때도 직방과 한국일보는 SNS 세상의 특성을 잊어버렸던 것으로 보입니다. 마지막으로 지나친 성과주의를 이야기하고 싶습니다. 다른 나라에서 안 살아봐서, 일해보지 않아서 우리나라만의 특성인지 모르겠으나, 우리나라에서는 SNS 운영에도 성과주의가 적용되는 경우를 심심치 않게 봅니다. '결과만 잘 나오면 뭐든 올려도 된다'는 생각이지요. 위에서 쪼아서, 달성해야 하는 목표가 있어서, 등등 나름의 이유는 있겠습니다만 무엇이든지 '숫자'로 보이는 것을 좋아하는 조직이라면 SNS 운영을 할 때에도 이런 성과주의에서 벗어나기 힘듭니다. 왜냐면 SNS야말로 숫자로 눈에 드러나기 딱 좋은 곳이니까요. 공유 수 몇 건, 동영상 재생 수 몇 회, 이런 게 외부에 보이다 보니 뭐가 됐든 일단 반응만 많이 나오게 해보자, 고 맘만 먹으면 그렇게 하기 쉽죠. 아마 위 두 케이스도 성과주의에서 자유롭지는 못했을 것 같습니다. 그렇다면 어떻게 해야 할까? 첫째는 SNS 운영을 잘 한다고 해서 다가 아니라고 생각해야 합니다. 아이러니하게 들릴지 모르지만, 페이지 팬 수가 10만이 되든 20만이 되든, 동영상 재생이 5만 건 되든, 10만 건이 되든, 좋아요가 1만 개든 10만 개든. 그것만 보고 있으면 안 된다는 말입니다. 이 브랜드에서 컨텐츠 마케팅을 하는 이유가 무엇인가? SNS 운영을 통해 무엇을 얻을 것인가? 다음 단계, 합의가 있어야 합니다. 그런데 이다음 단계를 규정할 때에는 '브랜딩' 혹은 '인지도 상승'처럼 두루뭉술하면 안 됩니다. 그런 목표라면  앞서 말한 성과주의에 빠지기 쉽습니다. "SNS를 통해 우리 브랜드를 인지시키고 사이트에 유입시킨다, 혹은 회원 가입시킨다" 같이 SNS 운영 다음의 구체적인 마케팅 목표가 있어야 합니다. 이것을 다양한 요소로 SNS 여기저기에 녹여야 하며, 그 결과가 어떤지도 추적해야 합니다. 예컨대 SNS 컨텐츠를 보고 앱을 다운 받는 게 목표라면 SNS 컨텐츠에 앱 다운로드 유도 장치가 있어야 하며, 이것에 대해 사람들이 얼마나 반응을 했는지 SNS 컨텐츠 자체의 결과와 대비해서도 봐야겠지요. 둘째는, SNS 운영 특히 컨텐츠를 만드는 사람에게 '소명의식'이 있어야 합니다. 온라인에 컨텐츠를 올리는 그 순간 누군가 저장할 수도 있고, 캡쳐를 할 수도 있다, 그리고 이것은 내가 알지 못하는 제 2, 3의 공간에 남을 수도 있고, 계속해서 복사될 수도 있다는 생각을 해야 합니다. (이게 되게 무서운 일이고, 스트레스받는 일이지만 감내해야 할 부분이라 생각합니다 ㅠㅠ) 내가 만드는 컨텐츠는 우리 브랜드가 낳은 알이라고 생각하며 이것은 평생 죽지 않는다고 여기는 것이지요. 또한 내가 만든 컨텐츠가 상상 이상의 영향력이 있다는 점을 명심해야 합니다. 나는 개인 타임라인에 내 프로필로 포스팅을 하는 게 아니다, 내 이름의 블로그에 글을 쓰는 게 아니다, 좋아하든 싫어하든 우리 브랜드에 관심이 있는 사람들이 쳐다보고 있는 공개 게시판에 우리 브랜드의 이름으로 컨텐츠를 만들어 올리는 것이다, 라고 늘 자각하고 있어야 합니다. 내가 쓴 글 한 줄로 사람들이 감동을 받기도 하고 상처를 받을 수도 있고요, 힘이 나게 만들 수도 있고 인생을 포기하고 싶어 지게 만들 수도 있습니다. 이런 생각을 하면 결코 쉽게 컨텐츠를 만들 수도, 올릴 수도 없습니다.마지막으로, 내 브랜드 고민, 경쟁사 견제를 하기 전에 사람에 대해 먼저 생각해야 합니다. 우리 브랜드의 컨텐츠를 만드는 것이니까 누구보다 잘 알아야 하는 것 맞습니다. 경쟁사가 하고 있는 마케팅과 차별화되어야 하니까 그들이 무엇을 하는지도 알아야 합니다. 하지만 그전에 어떤 사람들이 우리 브랜드를 좋아하는가? 어떤 사람들이 우리 브랜드를 좋아하게 만들고 싶은가? 그들은 무슨 특성을 가지고 있고, 어떤 이유로 우리 브랜드를 좋아하는가? 어떤 컨텐츠를 좋아하는가? 어떤 음악을 듣고 어떤 글에 반응하는가? 어떤 생각을 가지고 우리 서비스를 쓰는가? 컨텐츠 마케팅 담당자라면 이런 질문에 충분히 고민하고 나름대로의 답을 갖고 있어야 한다고 생각합니다. 컨텐츠를 만드는 사람이 브랜드가 되기보다는 유저가 먼저 되어야 하는 것이죠. 그러다 보면 함부로 컨텐츠를 만들 수 없습니다. 우리 브랜드를 좋아하는 사람들은 이런 거 싫어해, 이런 컨텐츠엔 반응하지 않을 거야, 라는 감이 있기 때문입니다. 글을 시작하면서 말했듯이 저는 아직 많이 부족하고, 그동안 경험한 것보다 앞으로 경험할 일이 더 많은 사람입니다. 하지만 그동안 다양한 브랜드의 SNS를 운영해보고, 현재는 스타트업에서 컨텐츠를 만드는 일을 하면서 제가 해왔던 일, 하고 있는 일에 대해 나름대로 깊은 고민을 해왔습니다. 그리고 애정도 각별하죠. 어디 가서 부끄럽지 않게 SNS 운영을 하려면 어떻게 해야 할까, 다른 사람들은 어떻게 컨텐츠를 만드나, 무엇이 좋다고 느껴지는가, 무엇을 우리 브랜드에도 적용해볼 수 있을까, 매일매일 관찰하고 적용도 해보고 더 나아지려고 노력해왔습니다. 그렇기 때문에 앞서 이야기한 두 브랜드의 사례가 더욱 안타까웠습니다. 내부의 사정은 모릅니다. 대행사 직원이 그랬는지, 담당자가 그랬는지, 인턴이 그랬는지, 팀장이 그랬는지 아무것도 모르죠. 그러나 뭐가 됐든 너무나도 마음이 아픈 사례라고 생각했습니다. 대행사 직원이 그랬다면, 담당자가 그랬다면, 인턴이 그랬다면, 팀장이 그랬다면, 뭐가 됐든 다 안타깝습니다. '포스팅' 버튼을 누르기 전에 한 번만 더 생각했다면, 기획 아이디어를 내기 전에 한 번만 더 생각했다면, 이런 일이 생겼을까 싶고요. 특히나 직방은 스타트업계에서는 소위 성공 사례라고 불리는 브랜드이기 때문에 더더욱 애정 어린 시선으로 보고 있었습니다. 아니 정확히 말하면 부러운 게 많았죠. 설현도 광고 모델도 쓰고, 좋겠다. 하면서요. 그래서 더욱 잘 했으면 좋겠다, 고 기대했던 것도 있습니다. 하지만 이미 일은 일어났고 되돌릴 수 없으니, 이제 와서 할 수 있는 것이라곤 과거의 실수를 복기하고 되풀이하지 않을 방법을 찾을 수밖에 없게 되었네요. 그래서 기록하고 싶었습니다. 아프지만 잊지 말아야 하니까요. 부디 이런 진심을 알아주시길 바라며 글을 마칩니다. SNS 운영도, 컨텐츠 마케팅도 다 좋을 순 없겠지만 지금보다 더 좋을 수 있을 거란 믿음으로.#앵커리어 #마케팅 #마케터 #콘텐츠 #콘텐츠마케팅 #인사이트 #조언 #경험공유
조회수 1849

Prototyping

안녕하세요. 스포카 디자인팀 인턴 박소연입니다. 이번 글에서는 사용자 경험User Experience 디자인 과정 중 프로토타이핑Prototyping에 대해 설명해보도록 하겠습니다.Prototyping이란,Prototype이란 “처음”을 뜻하는 그리스어 protos와 “느낌”을 뜻하는 typos가 합쳐져 “원본”, “초기”를 뜻하는 prototypos가 되었고, 이것에서 발전한 “초기 형태”인 prototypon에서 유래하였습니다. (출처: 위키피디아)프로토타이핑의 주목적은 UX 컨셉을 구체화하여 사용자에게 직접 실험을 하기 위한 것입니다. 먼저 조사한 결과를 토대로 아이디어와 컨셉을 도출합니다. 그 이후 실제 모델을 제작하고, 해당 모델에 해당하는 사용자와 전문가에게 사용하게 한 후 의견을 기록합니다. 프로토타입을 제작할 시에는 사용자가 구현될 시스템에 대하여 어느 정도 명확한 심상을 얻을 수 있을 정도의 디테일을 유지하여 제작합니다. 실험 시, 최대한 실제 환경이나 그와 비슷한 상황에서 실험하는 것이 중요합니다. 또한, 실험 중에 전체적인 서비스의 감성의 흐름과 피드백을 기록해야 합니다.프로토타이핑은 크게 두가지로 나누어질 수 있습니다.첫째는 아날로그 프로토타이핑으로, 종이에 연필로 쉽고 빠르게 스케치하는 것이 관건입니다. 두 번째는 디지털 프로토타이핑입니다. Low fidelity 혹은 high fidelity로 제작할 수 있는데, low fidelity는 최소한의 구성요소는 다 갖추고 있는 정도를 뜻합니다. 주로 보여주기용인 파워포인트, 키노트 등으로 구현할 수 있습니다. 발사믹과 같은 프로그램을 사용하여 간단한 인터랙션을 구현할 수도 있습니다. High fidelity는 완성에 거의 가까운 형태로, 장식적인 요소도 모두 포함하여 정확히 제작하게 됩니다. 실험에 적합한 형태를 선택하는 것이 중요한데, 장단점을 표로 정리해서 보여 드리겠습니다.다양한 프로토타이핑 유형:프로토타이핑특징장점단점아날로그프로토타이핑연필과 종이.빠르고 간단하다.수정이 쉽다.구체적이지 않다.구현할 항목이 많을 시오래 걸린다.디지털프로토타이핑-low fidelity보여주기 혹은인터랙션 가능.하나 혹은 다수의프로세스를 표시.수정이 비교적 간단.시스템의 특징을 살리기어려울 수 있다.디지털프로토타이핑-high fidelity인터랙션과 장식적요소까지 구현.가장 구체적이고이해가 빠르다.특징을 모두 구현할수 있다.제작에 오래 걸린다.수정이 힘들다.프로토타입을 제작하고 난 후에는 제작한 모델을 사용하여 실험을 진행 할 수 있습니다. 실험 종류 역시 여러 가지가 있지만, 이번에는 세 가지만 추려서 소개해 드리겠습니다.Desktop Walkthrough말 그대로 책상 위에서 구현할 수 있는 작은 모형을 말합니다. 레고와 같은 3D모형을 이용하여 실제상황의 특징들을 구현합니다. 이를 무대로 삼아, 사용자의 페르소나Persona를 구현한 모형을 직접 움직이며 사용자 경험을 재현합니다. 간단한 모형으로 다양한 사람들이 이해하기 쉽고, 전체적인 프로세스를 포괄적으로 검토할 수 있습니다. 또한, 모형을 여기저기 움직이면서 문제점을 수정하기에 쉽습니다.Service Prototype서비스 프로토타입은 소품과 물리적인 목업mock-up을 이용하여 상세한 서비스를 재현하게 됩니다. 주로 해당 제품을 사용하는 실제 환경과 최대한 비슷한 곳에서 사용자가 직접 사용하고 역할극 등을 진행하게 됩니다. 사용자가 직접 사용하고 만져볼 수 있는 모델이 있기 때문에 사용자가 서비스에 대해 좀더 깊은 이해를 할 수 있습니다.Service Staging서비스 스테이징은 좀 더 많은 인원이 필요합니다. 여러 이해관계자가 지켜보는 가운데 디자이너와 사용자가 함께 프로토타입을 사용한 시나리오scenario를 재현합니다. 역할을 바꾸어 여러 번 반복 재연하면서, 다양한 이해관계자의 피드백을 받을 수 있습니다.프로토타입 실험 요약:DesktopWalkthroughService PrototypeService Staging장소LEGO 모형실험실, 스튜디오, 실제상황실험실, 스튜디오, 실제 상황대상LEGO 모형사용자사용자, 디자이너 등목적시범, 설명이해 도모,사용성 파악사용성 파악, 이해관계 정립,시나리오 점검Conclusion이제까지 UX Design의 과정 중 한 가지인 프로토타이핑에 대해 간략히 설명해보았습니다. 프로토타이핑의 가장 중요한 목적은 사용자들이 직접 체험하고 이해할 수 있도록 최대한 실제와 가깝게 재현하는 것입니다. 하지만 프로토타이핑으로 다양한 실험을 했다고 디자인이 완료된 것은 아닙니다. 수집한 의견을 반영하여 수정과 보완을 거쳐 새로운 프로토타입으로 다시 실험하는 등 응용 범위는 다양합니다. 프로토타이핑은 UX Design에 필수적인 과정입니다. 보통, 디자이너와 개발자들은 사용자들이 자신이 생각한 대로 움직일 것이라고 일종의 “착각”을 하게 되는데, 이는 프로토타이핑을 통해 적절히 조정할 수 있을 것입니다.참고자료 및 이미지 출처:· 서비스 디자인 교과서, 안그라픽스, 2012· http://www.enginegroup.co.uk/site· http://www.loop-ux.com· http://www.davidarno.org/2009/09/17/napkee-converting-balsamiq-mockups-into-flex-views-just-became-a-complete-breeze/· http://inspirationfeed.com/inspiration/25-examples-of-wireframes-and-mockups-sketches/#스포카 #디자인 #디자이너 #디자인팀 #인턴 #인턴생활 #인사이트 #꿀팁 #경험공유
조회수 5428

REST 아키텍처를 훌륭하게 적용하기 위한 몇 가지 디자인 팁

최근의 서비스/애플리케이션의 개발 흐름은 멀티 플랫폼, 멀티 디바이스 시대로 넘어와 있습니다. 단순히 하나의 브라우저만 지원하면 되었던 이전과는 달리, 최근의 서버 프로그램은 여러 웹 브라우저는 물론이며, 아이폰, 안드로이드 애플리케이션과의 통신에 대응해야 합니다. 그렇기 때문에 매번 서버를 새로 만드는 수고를 들이지 않기 위해선 범용적인 사용성을 보장하는 서버 디자인이 필요합니다.REST 아키텍처는 Hypermedia API의 기본을 충실히 이행하여 만들고자 하는 시스템의 디자인 기준을 명확히 확립하고 범용성을 보장하게 해줍니다. 이번 글에선 현대 서비스 디자인을 RESTful하게 설계하는 기초적인 내용에 대해 정리하려고 합니다.REST란 무엇인가?REST는 Representational state transfer의 약자로, 월드와이드웹과 같은 분산 하이퍼미디어 시스템에서 운영되는 소프트웨어 아키텍처스타일입니다. 2000년에 Roy Fielding에 의해 처음 용어가 사용되었는데, 이 분은 HTTP/1.0, 1.1 스펙 작성에 참여했었고 아파치 HTTP 서버 프로젝트의 공동설립자이기도 합니다.REST는 HTTP/1.1 스펙과 동시에 만들어졌는데, HTTP 프로토콜을 정확히 의도에 맞게 활용하여 디자인하게 유도하고 있기 때문에 디자인 기준이 명확해지며, 의미적인 범용성을 지니므로 중간 계층의 컴포넌트들이 서비스를 최적화하는 데 도움이 됩니다. REST의 기본 원칙을 성실히 지킨 서비스 디자인은 “RESTful 하다.” 라고 흔히 표현합니다.무엇보다 이렇게 잘 디자인된 API는 서비스가 여러 플랫폼을 지원해야 할 때, 혹은 API로서 공개되어야 할 때, 설명을 간결하게 해주며 여러 가지 문제 상황을 지혜롭게 해결하기 때문에 (버전, 포맷/언어 선택과 같은) REST는 최근의 모바일, 웹 서비스 아키텍처로서 아주 중요한 역할을 하고 있습니다.중심 규칙REST에서 가장 중요하며 기본적인 규칙은 아래 두 가지입니다.URI는 정보의 자원을 표현해야 한다.자원에 대한 행위는 HTTP Method(GET, POST, PUT, DELETE 등)으로 표현한다.1번 사용자에 대해 정보를 받아야 할 때를 예를 들면, 아래와 같은 방법은 좋지 않습니다.GET /users/show/1 이와 같은 URI 방식은 REST를 제대로 적용하지 않은 구 버전의 Rails에서 흔히 볼 수 있는 URL입니다. 이 URI은 자원을 표현해야 하는 URI에 /show/ 같은 불필요한 표현이 들어가 있기 때문에 적절하지 않습니다. 본다는 것은 GET이라는 HTTP Method로 충분히 표현할 수 있기 때문이죠. 최근의 Rails는 아래와 같이 변경되었습니다.GET /users/1 자원은 크게 Collection과 Element로 나누어 표현할 수 있으며, 아래 테이블에 기초한다면 서버 대부분과의 통신 행태를 표현할 수 있습니다.ResourceGETPUTPOSTDELETERESTful Web Service HTTP methodsCollection URI, such as http://example.com/resources/컬렉션에 속한 자원들의 URI나 그 상세사항의 목록을 보여준다.전체 컬렉션은 다른 컬렉션으로 교체한다.해당 컬렉션에 속하는 새로운 자원을 생성한다. 자원의 URI는 시스템에 의해 할당된다.전체 컬렉션을 삭제한다.Element URI, such as http://example.com/resources/item17요청한 컬렉션 내 자원을 반환한다.해당 자원을 수정한다.해당 자원에 귀속되는 새로운 자원을 생성한다.해당 컬렉션내 자원을 삭제한다.이 외에도 PATCH 라는 HTTP Method에도 주목하시기 바랍니다. PUT이 해당 자원의 전체를 교체하는 의미를 지니는 대신, PATCH는 일부를 변경한다는 의미를 지니기 때문에 최근 update 이벤트에서 PUT보다 더 의미적으로 적합하다고 평가받고 있습니다. Rails도 4.0부터 PATCH가 update 이벤트의 기본 Method로 사용될 것이라 예고하고 있습니다.입력 Form은 어떻게 받아오게 하지?위의 예시를 통해 많은 행태를 표현할 수 있습니다만 새로운 아이템을 작성하거나 기존의 아이템을 수정할 때 작성/수정 Form은 어떻게 제공할지에 대한 의문을 초기에 많이 가집니다.정답은 Form 자체도 정보로 취급해야 한다는 것입니다. 서버로부터 “새로운 아이템을 작성하기 위한 Form을 GET한다”고 생각하시면 됩니다. Rails 에선 기본적인 CRUD를 제공할 때 아래와 같은 REST 인터페이스를 구성해줍니다.HTTPVerbPathactionused forGET/photosindexdisplay a list of all photosGET/photos/newnewreturn an HTML form for creating a new photoPOST/photoscreatecreate a new photoGET/photos/:idshowdisplay a specific photoGET/photos/:id/editeditreturn an HTML form for editing a photoPUT/photos/:idupdateupdate a specific photoDELETE/photos/:iddestroydelete a specific photo모바일 환경에 따라 다른 정보를 보여줘야 한다면?접속하는 환경에 따라 다른 정보를 보여줘야 할 때가 있습니다. 가령 모바일 디바이스에서 볼 때 다른 사용자 인터페이스를 제공한다든지 하는 경우인데요. 일부 애플리케이션은 독립적인 모바일 웹서비스를 개발한 후 단지 이를 이동시켜주기만 할 때가 있는데, 이는 어떤 경우에 좋지 못한 사용성을 보여줍니다. 모바일 뷰와 일반 웹페이지 뷰의 URI가 달라서 같은 정보를 공유할 때 각 환경에 적절한 디자인과 인터페이스로 보이지 않기 때문입니다.모바일에서 블로그를 구경하던 도중, 컴퓨터를 이용하고 있는 친구에게 자신이 보고 있는 내용을 보내주고 싶을 때가 있습니다. 티스토리 블로그는 모바일 뷰의 URI가 기존 URI와 달라서, 친구가 해당 URI를 데스크탑에서 열어도 모바일에 최적화된 정보를 받을 수밖에 없게 됩니다. 이 URI를 데스크탑에서 열어보시기 바랍니다.REST 하게 만든다면 URI는 플랫폼 중립적이어야 하며, 정보를 보여줄 때 여러 플랫폼을 구별해야 한다면 Request Header의 User-Agent 값을 참조하는 것이 좋습니다. 예를 들어 iPhone에서 보내주는 User-Agent 값은 아래와 같습니다.Mozilla/5.0 (iPhone; U; CPU like Mac OS X; en) AppleWebKit/420+ (KHTML, like Gecko) Version/3.0 Mobile/1A543a Safari/419.3 대부분 브라우저, OS 플랫폼은 HTTP Request를 보낼 시 보내는 주체에 대한 설명을 User-Agent에 상세하게 포함하여 통신하고 있기 때문에 요청자의 환경을 정확히 알 수 있습니다.버전과 정보 포맷을 지정할 수 있게 해야 한다면?오픈 API를 제공하거나, 클라이언트가 항상 최신 버전을 유지할 수 없는 환경이라면 서버에서 버전 협상을 지원해야 합니다. 서버가 버전 협상을 지원한다면 최신 버전으로 업데이트가 되더라도 구 버전의 정보 요청에 하위 호환하게 하여 서비스 적용범위를 넓게 유지할 수 있습니다. 이와 함께 클라이언트가 html로 정보를 받을지, json으로 받을지, xml로 받을지 선택할 수 있다면 더욱 좋을 것입니다.Header의 Accept 헤더를 이용해서 요청 환경에서 정보의 버전과 포맷을 지정할 수 있게 합니다. 아래는 Github API에 요청 시 쓰는 Accept 헤더입니다.application/vnd.github+json vnd.는 Vendor MIME Type으로, 서비스 개발자가 자신의 독자적인 포맷을 규정할 수 있게 HTTP 표준에서 제공하는 접두어입니다. vnd. 이후에 서비스 제공자 이름을 쓴 후, +로 문서의 기본 포맷을 표현해줍니다.이에 더해, Accept 헤더는 파라미터를 받을 수 있습니다. 많은 REST 지지자들은 이 파라미터를 이용해 버전 명을 지정하는 것을 권장합니다.vnd.example-com.foo+json; version=1.0 Ajax와 REST최근 빠른 속도의 웹서비스를 구현하기 위해 서비스 전체를 Ajax 통신으로 구동되게끔 HTML5 애플리케이션을 만드는 일이 많습니다. 서비스 전체를 Ajax 기반으로 구동되게 개발한다면 중복된 콘텐츠를 여러 번 전달하지 않아도 되고, 브라우저 렌더링 과정이 간소화되므로 더욱 빠른 서비스를 구축할 수 있습니다. 하지만 Ajax 기반의 서비스는 초기에 URL에 관련된 문제가 있어 REST한 서비스를 만들 때 애로사항이 있었습니다. 콘텐츠가 바뀌어도 URL은 그대로여서 친구에게 내가 보고 있는 콘텐츠를 보여줄 방법이 불편했기 때문이죠.최근엔 두 가지 방법으로 이를 보완할 수 있습니다. 첫 번째는 #! 기법으로, 구형 브라우저에서도 # 이하의 URL을 Javascript로 자유자재로 변경할 수 있다는 점을 이용한 방법입니다. 방법은 아래와 같습니다.Ajax 통신을 통해 이동되는 페이지의 URI는 현재 URI의 #! 이후에 붙인다.페이지가 처음 열릴 때, #! 이후로 URI가 붙어있다면 해당 URI로 redirect를 해준다.이와 같은 방법으로 Ajax 서비스를 만들면, 페이지를 이동한 이후에 URL을 친구에게 복사해서 전달해주어도 친구가 내가 보고 있는 콘텐츠를 볼 수 있으며, 구글에서 수집할 때 해당 #! 이하의 URL을 판별해서 제대로 수집해주기 때문에 검색엔진에도 성공적으로 노출될 수 있습니다.하지만 위 방법의 단점은 1. 상대방이 Javascript를 지원하지 않는 브라우저를 이용하거나 Javascript 기능을 꺼 놓았을 때 제대로 된 콘텐츠를 볼 수 없다는 것이며, 2. URI가 몹시 보기 지저분해진다는 것입니다. 두 번째 방법은 pushState라는 새로운 표준을 이용한 방법으로, javascript의 pushState를 통해 Ajax 통신 후에 변경된 컨텐츠의 URI을 제대로 바꿔줄 수 있습니다. 하지만 최신 표준을 지원하는 브라우저에서만 정상적으로 구동되기 때문에, 하위 호환에 신경을 써야 한다는 단점이 있습니다. pjax같은 프로젝트들이 하위 호환을 포함하여 이런 구현을 쉽게 하도록 도와주고 있습니다.언어언어별로 다른 URI의 서비스를 가지는 서비스들을 종종 볼 수 있습니다. 역시 좋지 못한 설계입니다. 한국어로 작성된 컨텐츠를 보고 있는 중 해당 콘텐츠를 미국인 친구에게 보여줄 일이 생겼다고 가정해봅시다. 단순히 URI를 복사해서 주는 것으로는 미국인 친구에게 내가 보고 있는 정보를 제대로 전달해줄 수 없다면 아주 불편할 것입니다.Request Header의 Accept-Language는 받고자 하는 언어를 명시하고 있습니다. 대부분 브라우저, OS 플랫폼은 사용자가 즐겨 쓰는 언어를 이 Header에 포함하여 요청을 만들고 있기 때문에, 해당 Header를 참조하여 그에 걸맞은 언어를 제공해주는 것이 가장 정확한 서비스를 제공해줄 수 있습니다.물론 이 방법만으로 부족한 점이 있습니다. 자신의 주 언어와 다른 언어의 세팅을 가지고 서비스를 이용하는 사용자도 있으며, 몇 가지 이유 때문에 해당 사이트만, 해당 순간에만 다른 언어로 정해서 보고 싶을 수 있기 때문입니다. 아쉽게도 일반적인 브라우저에서 언어 변경을 하는 인터페이스는 매우 불편하고 찾기 어렵게 되어있기 때문에, 서비스에서 이에 대한 추가 인터페이스를 제공해주지 않으면 일부 사용자를 잃거나 불편하게 할 수 있습니다. 보통은 Accept-Language보다 우선해서 적용하는 언어 옵션을 세션에 저장할 수 있게 하고, 이에 대한 변경 인터페이스를 서비스에서 제공해주는 식으로 문제를 해결할 수 있습니다.마치며REST는 여러 가지 서비스 디자인에서 생길 수 있는 문제를 최소화해주고, HTTP 프로토콜의 표준을 최대한 활용하여 여러 추가적인 장점을 함께 가져갈 수 있게 해줍니다. 이번 글에서는 REST하지 않은 서버 설계를 통해 생길 수 있는 실질적인 문제들을 제시하고 REST 아키텍처가 이를 어떻게 해결해주는지 함께 보았습니다.‘REST가 완전한 정답이냐?’라고 한다면 이에 대해서는 아직 논의가 남아있습니다. 구형 브라우저가 아직 제대로 지원해주지 못하는 부분이 분명히 있으며 (PUT, DELETE를 사용하지 못하는 점, pushState를 지원하지 않는 점) 브라우저를 통해 테스트할 일이 많은 서비스라면 쉽게 고칠 수 있는 URL보다 Header 값은 왠지 더 어렵게 느껴지기도 합니다.만일, 만들고 있는 서비스의 API가 널리 쓰여야 한다면 REST를 완전하게 적용한 디자인이 더 독이 될 수 있습니다. 많은 개발자는 별로 똑똑하지 못하며, HTTP 프로토콜에 대한 이해가 부족하여서 API가 어렵게 느껴질 수 있기 때문입니다. 그러므로 Google을 포함한 많은 기업의 서비스 API가 REST 스타일을 완전히 따르고 있진 않습니다.하지만 그럼에도 REST가 중요한 점은, 이를 제대로 구현하는 것이 서비스 디자인에 큰 부가이익을 가져다 줄 수 있으며, 많은 현대의 API들이 REST를 어느 정도로 충실하게 반영하느냐를 고민할 뿐이지 REST를 중심으로 디자인되고 있다는 점은 분명하기 때문입니다. REST를 얼마나 반영할 지는 API가 어떤 개발자를 범위에 두는지, 개발 기간이 얼마나 되는지, 함께 하는 동료의 역량은 어떠한지 등을 고려해서 집단마다 다르게 반영하게 될 것입니다.#스포카 #개발 #개발자 #개발팀 #꿀팁 #인사이트 #REST
조회수 4338

왜 SVG로 갈아탔는가?

이 글에서는 데일리호텔이 왜 png에서 svg로 갈아탔는지, 그리고 간단한 svg 실무 적용 팁에 대해 알려드리고자 합니다.01 SVG란 무엇인가?SVG는 “ Scalable Vector Graphics”의 약자입니다.JPEG, PNG 처럼 SVG도 그래픽 포맷(Graphic format) 중 하나입니다. SVG는 벡터 기반이기 때문에 리사이징이 되어도 전혀 깨지지 않습니다. 모든 해상도에서 자유자재로 활용할 수 있기 때문에 특정 해상도에 제한되어있지 않다는 게 핵심 포인트라고 할 수 있습니다.02 SVG가 왜 좋은가?다른 그래픽 포맷보다 SVG가 좋은 이유는 참으로도 다양합니다. 필자가 생각했을 때의 핵심 장점들은 이러합니다.1. 특정 사이즈에 구애를 받지 않습니다.즉 어느 해상도에서든 pixelate 되지 않습니다. 요새 디자이너들이 자주 사용하는 디자인 프로그램인 스케치로 따지면 아트보드와 비슷한 것 같습니다. 아트보드 안에 만든 레이어, 요소들은 다 벡터 기반입니다. 아트보드를 리사이징 해도 안에 요소들은 깨지지 않고 그 모습 그대로를 가지고 있습니다. 같은 원리로 SVG도 어떤 사이즈로든 그 모습 그대로가 유지됩니다. 그렇기 때문에 사이즈별로 아이콘을 일일이 생성해서 개발자에게 넘겨줄 필요가 없습니다. SVG 파일 하나면 모든 해상도를 대응할 수 있습니다.2. 작은 파일 사이즈비트맵 이미지들(PNG, JPEG) 같은 경우 파일 크기를 결정하는 주요 요소는 바로 ‘해상도’입니다. 예를 들어 5000x5000 픽셀 이미지는 항상 500x500보다 파일 사이즈가 큽니다.반면, SVG 그래픽 같은 경우 파일 크기를 결정하는 주요 요소는 바로 ‘복잡도’입니다. Path가 비교적 적은 간단한 이미지는 PNG, JPEG 보다 파일 사이즈가 적을 수도 있지만 이미지를 구성하는 요소의 복잡도(레이어가 많다든지 특정 효과가 많다든지)에 따라 파일 사이즈가 커집니다.하지만 이런 용량 문제는 SVG Optimizing을 하게 되면 나름 해결됩니다. 필자 같은 경우 업무적으로 스케치를 사용하고 있기 때문에 스케치에서 제공해주는 SVGO Compressor 플러그인을 활용하고 있습니다.https://github.com/BohemianCoding/svgo-compressorBohemianCoding/svgo-compressorsvgo-compressor - A Plugin that compresses SVG assets using SVGO, right when you export them. This Plugin requires Sketch 3.8.github.com 작은 파일 사이즈로 인해 로딩 시간도 훨씬 더 줄어든다는 장점 또한 있습니다.여기서 잠깐!혹시나 Bitmap과 SVG의 구성요소에 대해 잘 모르실 분들을 위하여 간단한 비교 해드리겠습니다.비트맵 그래픽: Raster Graphics (픽셀 기반)대표적인 포맷은 JPEG, PNG입니다. 이들은 픽셀로 구성되어 있습니다. 예를 들어 2x2 픽셀인 비트맵 이미지는 총 4px로 구성되어 있습니다. 개개인에 대한 픽셀들은 자유자재로 바꿀 수가 없고 움직일 수도 없습니다. 그렇기 때문에 100% 이상으로 이미지를 확대하면 Pixelate가 됩니다.SVG 그래픽: 벡터 기반픽셀로 구성되어 있지 않고 작업하고 있는 그래픽에 대한 정보로 구성되어 있습니다. 그렇기 때문에 어떤 사이즈로든 자유자재로 늘어나는 것이 가능합니다. 이러한 이유들로 인해 코드로 쉽게 적용된 스타일을 수정할 수 있습니다. 예를 들어 동그라미의 보더 값을 6에서 8로 바꾼다 / 색상을 그레이에서 블랙으로 바꾼다 / 사이즈를 40x40에서 80x80을 바꾼다 등스케치로 작업할 때도 쉽게 두 개의 차이점을 확인해볼 수 있습니다. 스케치에서 Export를 할 경우 비트맵 이미지는 하나의 압축된 레이어로 Export 됩니다. 반면 SVG는 레이어 그대로 눈에 보이지 않는 그래픽을 구성하는 정보들이 같이 저장된 채 Export가 됩니다.SVG를 구성하는 눈에 보이지 않는 정보들03 스케치가 SVG 이미지를 Export하는 방식다른 그래픽 포맷보다 SVG가 좋은 이유는 참으로도 다양합니다. 제가 생각했을 때의 핵심 장점들은 이러합니다.Sketch Export 기능스케치 하단 오른쪽 패널을 보면 Export 버튼이 있습니다. 여기서 Format을 SVG로 바꾸고 Export하면 금방 쉽게 끝나겠지 라고 생각할 수 있는데 여기서 조심해야 할 점은 본인이 어떻게 이미지를 작업했냐에 따라 옳지 않게 SVG가 내보내질 수 있습니다. 옳지 않게 SVG가 내보내 지게 되면 나중에 두 번 일을 작업하는 일이 발생할 수도 있습니다.쉽게 이해하실 수 있도록 이미지를 제작해 보았습니다. 아래 이미지는 같은 디자인인데 만들어진 방식이 각각 다릅니다.같은 아이콘이지만 구성하는 방식이 다름1. Two Shape2. One Shape3. Border and Shape Mix위 3가지 방법들은 옳고 그름이 없습니다. 다만 어떻게 이 아이콘을 나중에 활용할 것인가에 따라 만드는 방법이 달라지겠죠. 만약에 자동차 아이콘 안에 헤드라이트 색상을 바꾸고 싶다고 하면 위 방법 중 1번을 선택하면 될 것이고 선의 두께를 따로 조정하고 싶다 하면 3번 방식을 택하면 됩니다.SVG에 대해 잘 알지 못할 때는 프로그램 탓을 했었습니다. ‘왜 프로그램이 알아서 잘 못해주지?’라는 질문을 던졌지만… 슬프게도 이건 프로그램 잘못이 아닌 작업자 잘못입니다 �스케치 프로그램이든 아도비 일러스트레이터든 이 프로그램들은 디자이너가 만든 그래픽을 있는 그대로 svg 레이어로 번역하도록 프로그램이 되어 있습니다. 디자이너가 어떻게 작업했냐에 따라 그 정보 그대로 인식해서 svg로 만들어줍니다.04 SVG 아이콘이 제대로 적용 안될 경우다른 그래픽 포맷보다 SVG가 좋은 이유는 참으로도 다양합니다. 필자가 생각했을 때의 핵심 장점들은 이러합니다.헐 이건 도대체 왜….?!!!어느 날 SVG를 적용하기로 마음먹고 데일리호텔 앱 내 편의시설 아이콘 중 수영장 SVG 파일을 개발자에게 넘겼습니다. 근데 구멍이 뚫려야 할 곳이 채워져서 나오는데 원인을 모르고 헤매던 시절이 있었습니다. 미디엄에서 이 문제를 해결해줄 좋은 글을 발견하게 되었는데 난생처음 보는 단어가 2개 있었습니다.Even-Odd, Non-Zero…여기서 Even-Odd, Non-Zero의 차이점을 자세히 언급하기에는 너무 길어서 제가 참고한 미디엄 블로그 링크를 공유해드릴 테니 가서 보시면 이해하실 수 있을 것 같습니다. 작업하기에 앞서 꼭 읽어보시기를 권장합니다.https://medium.com/sketch-app-sources/preparing-and-exporting-svg-icons-in-sketch-1a3d65b239bbPreparing and Exporting SVG Icons in Sketch – Design + Sketch – MediumThis article is going to assume that you already understand the fundamentals of icon design. And focus on how to prepare and export them…medium.com 그래도 가볍게 필요한 내용만 공유드리자면 안드로이드에서는 fill-rule:evenodd를 제대로 지원하지 않고 fill-rule:nonzero만 지원한다고 보시면 됩니다. Even Odd는 특정 앱에서 호환이 안된다는 뜻입니다. (안드로이드 API 24 이상에서만 evenodd가 지원됨)근데 우리가 사용하고 있는 스케치 프로그램에서는 default값이 fill-rule:evenodd로 설정이 되어있고 여러 Path가 겹치는 아이콘 같은 경우 그대로 svg export를 하게 되면 위에서 제가 경험하였던 아이콘이 다 채워진 현상을 겪을 수 있게 되는 것입니다.1. Fills 섹션에서 Even-Odd를 Non-Zero로Fills 섹션에 가면 설정 아이콘이 있습니다. 클릭 시 Even-Odd가 디폴트 값인 것을 확인할 수 있습니다.스케치 Fill Default 값 = Even-OddNon-Zero로 설정값을 바꾸면 수영장 사다리 부분이 가득 채워진 채로 나오게 되는 것을 확인할 수 있습니다. 실제로 이 파일을 개발자에게 넘기게 되면 이렇게 채워진 채로 아이콘이 노출이 됩니다.Non-Zero 설정 / 모든 shape이 다 칠해짐이렇게 나가면 안 될 테니 수정하는 법을 알려드리겠습니다.2. Paths > Reverse Order 적용원래 뚫려 있어야 하는 Path를 Layer 패널에서 찾으면 됩니다. 빨간색으로 칠한 부분이 뚫려있어야 하는 부분들입니다.레이어 패널에서 path 확인하기Path가 선택된 채로 Layers > Paths > Reverse Order을 클릭합니다.Paths > Reverse OrderReverse Order을 클릭한 후 원래 뚫려있어야 하는 부분이 뚫리게 됩니다. 이 상태로 svg로 export하시고 개발자에게 전달을 하면 됩니다.마치며개인적으로 SVG에 대한 장점이 너무나도 크다고 생각하여 굳이 갈아타지 않을 이유가 없다고 생각합니다. 특히 Web 디자인을 할 때도 SVG를 저는 적극적으로 사용하시라고 권장하고 싶습니다. � 안드로이드 개발자에게 넘기기 전에 SVG 파일이 문제가 있는지 가볍게 확인하고 싶은 경우 아래와 같은 사이트를 추천해드립니다.http://inloop.github.io/svg2android/위에 문제가 되었던 수영장 아이콘을 이 사이트에 올려서 보게 되면 이런 화면이 뜹니다. Warning하고 노란색 경고 박스가 뜨게 되는데 fills-rule:evenodd에 대해서 언급을 하더라구요. 정말 유용한 사이트인 것 같습니다.아울러..많은 디자이너들이 SVG 적용을 해보시길 바라며 주변에 이 글도 많이 공유해주시면 감사하겠습니다. (ㅎㅎ)또한 데일리호텔 Tech, UI/UX 등의 정보를 얻어보고자 하시는 분은 https://dailyhotel.io/ 를 읽어 보시길 권장합니다.그럼 다음에도 좋은 정보로 찾아뵙겠습니다!원문 링크 : https://dailyhotel.io/디자인-안드로이드-앱-svg-아이콘-적용기-왜-svg로-갈아탔는가-99c57cd84240작성자 : Product팀 Rachel Kim#데일리 #데일리호텔 #개발자 #개발팀 #업무환경 #개발환경 #SVN
조회수 1421

옐로쇼핑미디어 그룹의 팀그레이프 최초 멤버, ‘임용택 PM’을 만나다

안녕하세요, 옐로모바일 사내기자 Y입니다! 옐로가족들의 숨은 매력과 스토리를 발굴해 소개하는 옐로인 인터뷰 네 번째 이야기입니다! 네 번째 옐로피플 주인공은 패션의, 패션에 의한, 패션을 위한 남자! 설립 6개월만에 85억원 규모의 투자를 유치하며 경쟁력을 입증한 패션 이커머스 기업 ‘팀그레이프’에서 엘레뉴를 담당하고 있는 ‘임용택 PM’입니다! 넘치는 패션센스로 대학생때부터 직접 본인의 옷을 만들어 입었다는 사연부터 팀그레이프의 최초 멤버로 합류하기까지…… 임용택 PM이 들려주는 옐로피플 스토리! 지금 바로 만나보세요! Y: 안녕하세요! 옐블 독자들을 위한 간단한 자기소개 부탁 드립니다.임: 안녕하세요 옐블 독자 여러분, 옐로쇼핑미디어 팀그레이프 신규사업에서 엘레뉴(http://elainue.co.kr/) 를 담당하고 있는 임용택 PM입니다. 반갑습니다 :)Y: PM이 정확이 어떤 일을 하는 직무인지 궁금합니다! 임: 우선 PM(product manager)은 신규 제품에 있어서 처음부터 상품 판매가 이뤄지기 전까지 거의 모든 일을 담당하는 매니저라고 보시면 돼요. 저는 팀그레이프에서 상품 기획단계부터 생산, 유통, 마케팅 기획, 모델 촬영까지 담당하고 있고요, MD와 SNS 담당자 등 팀원 관리까지 하고 있습니다. Y: 와… 직무소개만 들었는데 제가 다 피곤해지는 느낌이네요. 임: ㅋㅋ그렇죠? 팀그레이프도, 팀그레이프에서 제가 담당하고 있는 ‘엘레뉴’도 신규사업이라 더 일이 어마어마합니다. 심지어 엘레뉴는 오픈 한지 아직 3주밖에 안됐습니다.Y: 팀그레이프 전에도 패션분야에서 커리어를 쌓으셨나요? 임: 네. 처음에는 남성의류 편집숍 앤드류앤레슬리에서 셔츠 기획 생산을 담당했고, 맞춤정장 O2O 기업인 스트라입스에서는 상품기획 및 생산 팀장으로 있었습니다. Y: 완전 패션 인생(?)이군요! 패션분야를 선택하게 된 이유가 있었나요? 임: 원래는 멀티미디어학과로 입학했어요. 게임 개발자가 목표였거든요. 그런데 한국 대부분의 남성들이 그렇듯 군대 전역 전에 앞으로의 인생에 대한 고민을 해봤는데, 제 전공에서 충분한 만족감을 느끼지 못한다는 생각이 자꾸 들더라고요. ‘내가 지금까지 진짜로 좋아했던 것이 뭘까’라는 질문을 스스로에게 던져봤더니 답은 ‘옷’이라 생각되어 의류학과로 전과하게 됐습니다J 그 후로 직접 만든 옷도 입고 다니고 당시 여자친구에게도 제가 만든 세상에서 하나뿐인 옷도 선물했었어요ㅋㅋㅋ Y: 세상에! 세상에서 하나뿐인 옷이라니, 너무 로맨틱하자나요…ㅠㅠ임: 근데 촌스럽다고 안 입던데요 (슬픔)Y: (토닥토닥)Y: 자자 다음 질문으로 넘어가서, 옷 잘입는 팁이나 머스트 해브 아이템을 추천한다면? 임: 무조건 비싸기만 한 옷이 좋은건 아니에요. 화려한 스타일의 옷보다는 검정색, 네이비, 흰색, 회색 등 베이직한 색의 옷을 잘 매치해서 입는 것을 추천해요. 이 네 가지 색깔 안에서의 조합은 실패하기 힘드니까요! Y: 좋은 팁 감사합니다! 용택님은 처음 팀그레이프와 어떻게 인연이 닿았나요?임: 스트라입스에서 재직 중일 당시에 코트를 생산하려고 준비하고 있었습니다. 그때 지금 팀그레이프 대표님께서 생산에 도움을 주셨고요. 거기서 인연이 닿았는데, 생산이 끝나고 난 뒤에 대표님이 YSM에 ‘패션사업부’가 생기는데 같이 일을 해보지 않겠느냐고 제안을 주셨어요. 그래서 작년 5월에 패션사업본부 첫 번째 맴버로 들어오게 됐습니다. Y: 잘 자리잡은 기업에 있다가 초기 멤버로 오기 쉽지 않았을 것 같아요. 임: 네, 세팅멤버로 오는 것도 부담스러웠고 거의 남성복 위주로만 일을 하다가 여성복을 담당할 수 있을지에 대한 고민도 컸어요. 그렇지만 대표님과 더 같이 일해보고 싶었고, 대량생산 기획을 경험해보고 싶었기 때문에 오기로 결정 했어요. Y: 아무래도 초기 멤버만의 고충이 있었을 것 같아요. 가장 힘들었던 순간은 언제였나요? 임: 사실 제가 패션사업부 대표님보다 한 달 정도 먼저 입사했습니다. 팀에 저 혼자여서 외로웠던 게 가장 컸던 것 같아요. 그리고 팀그레이프는 미쳐라, 봉자샵, 메르시엘 등 여러 소호 브랜드를 가지고 있다 보니 다양한 일을 했어요. 미쳐라 오프라인 스토어를 열었을 때 가서 판매 지원을 하기도 했고, 메르시엘 래쉬가드 공장에 가서 물건을 핸들링하고 뽑기도 했어요. 여기저기 불려가고 심신이 힘들었죠 (ㅠㅠ)Y: 정말 몸이 열 개라도 모자랐겠어요! 그럼 반대로 보람을 느낀 적이 있나요?임: 엘레뉴가 오픈한 지 얼마 되지 않았을 때, 배송이 지연된 거예요. 온라인 쇼핑몰이란게 고객의 신뢰도가 정말 중요한데 배송 지연이 생기면 안되겠다고 판단해서 직접 물건을 고객님께 전달 드렸어요. 그때 고객님이 고맙다며 상품에 대해 만족한다는 문자를 보내주셨는데 아직까지 캡쳐해서 가지고 있을 정도로 뿌듯한 순간이었습니다.Y: 생긴지 얼마 안된 기업이지만, 팀그레이프만의 특별한 사내문화가 있나요? 임: 자랑하고 싶은 문화가 있는데, 저희는 한 달에 한 번 GWP(Good Work Place)라는 걸 진행해요. 한 달에 한번 오후에 다같이 단체활동을 하는 건데, 볼링도 치러가고 외부강사를 초빙해서 성격분석 같은 이벤트도 합니다. 팀원들과 업무 외의 액티비티를 함께 할 수 있어 수평적으로 대화도많이 하게 되고 더욱 친밀해 지더라고요. 이렇게 친밀도가 높아지니 결국 업무에서도 시너지로 이어지고, 정말 좋은 문화로 자리잡은 것 같아요 :)Y: 정말 부러운 사내문화네요! 임: 자랑한 김에 이거 하나만 더 할게요! YSM에서는 매월 셋째 주를 ‘런치데이’로 지정하고, 점심시간을 두 시간을 줘요. 이것만으로도 행복할 텐데 직원에게 만원씩 제공을 해줍니다. 런치데이에는 팀원들끼리 조금 멀리 나가서 특별한 음식을 먹고 오기도 해요! Y: 세상에…. 이보다 더 좋은 복지가 있을까 싶어요! Y: 앞으로는 어떤 일을 해보고 싶으신가요?임: 우선 패션쪽 일을 계속 하고 싶어요. 나중에 나이가 들면 고향인 목포에 내려가서 패션샵을 운영하고 싶은데, 제 롤모델이 여용기 선생님이거든요 :D 부산에서 마스터테일러로 활동하고 계신 분인데, 60대 중반인데도 옷을 정말 잘 입으세요. 그 분처럼 계속 패션쪽에서 종사하면서 스타일리쉬하게 살고 싶습니다. 출처 :여용기 인스타그램 (@yeoyoungki)Y: 마지막 질문입니다. 앞으로 팀그레이프에 바라는 점이 있다면?임: 지금 팀그레이프에는 20명 정도의 멤버들이 함께 일하고 있는데, 점점 팀원들이 늘어나고 규모가 커질 것 같아요. 회사 규모가 커져도 지금처럼 많은 대화들을 나누고, 다양한 아이디어를 제안할 수 있는 열린 기업문화를 유지했음 좋겠어요! 팀그레이프에 많은 응원을 부탁 드립니다. :)
조회수 1091

회사에서 말 잘하는 프로또박이 되기(2)-응용편

이곳에 들어오신 여러분은 지금 크게 3가지 상태 중 하나일 듯 합니다.1. 영 내가 말주변이 없다고 스스로 생각하는 경우2. 회사의 누군가에게 공유하고 싶은 마음이 가득한 경우3. 뭔가 이 놈이 뭐라 써놨나 궁금해서 들어오신 경우어떤 경우든 상관없이 프로또박이에 대한 열망은 매한가지일 것이라고 생각합니다. 원래 뭔갈 표현하고자 하는 의지는 고대 알타미라 동굴시절부터 이어져 온 본능이니까요. 1번 케이스로 들어오신 분은 여러가지 사례 중에 한 두가지 정도 얻어가실 수 있으셨으면 좋겠습니다. 제 글은 잘 짜여진 백화점 명품관 같은 느낌보단 지하1층 특설 할인매대와 같은 느낌인지라 구석탱이를 잘 뒤져봐야 맘에 드는 100사이즈 옷을 찾을 수 있습니다. 2번케이스로 들어오신 분은 충분히 이해합니다. 하지만 아쉽게도 이 글을 그에게 공유한다고 한 들 그는 본인의 이야기인줄 모를 것입니다. 내면의 울분은 충분히 이해하는 바입니다. 이렇게 오신 분들이면 환영.3번의 케이스라면 반갑습니다. 아마 오늘 같은 빨간 날, 브런치에 들어오셔서 이런 글을 읽으신다면 극도로 심심하셨거나 아니면 저처럼 한적한 서울거리를 누비며 명절론리네스를 달래고 계시는 분일거라고 (맘대로) 생각하겠습니다.지난 기초편에서 3가지 사례로 또박이의 다시마육수를 만들어보았다면 오늘은 이것저것 첨가해서 프로또박이로의 거친 발자국을 내딛어 보도록 하겠습니다.1. 주격조사를 또박또박 말해보자.전, 우린, 그건, 저건 ...와 같이 보통 주격조사 '은는이가'를 축약시켜 말하는 경우가 많습니다. 발음의 편의와 효율을 위해서죠. 근데 이 주격조사를 살려서 또박또박 말하면 굉장히 꼬장꼬장해 보이는 효과가 있습니다. 왠지 입으로 내는 육성인데도 마침표가 딱딱 들어가 있는 느낌이랄까요.'저.는.다.르.게.생.각.합.니.다'원래 조사를 축약시킬 때는 다음 어절과의 부드럽게 연결하기 위함인데, 반대로 조사를 살렸다는 얘기는 그 연결고리를 톡! 끊는 느낌이거든요. 자연스럽게 띄어읽기가 생긴달까요."저는." 이라고 말하고 2초정도 뭔가 생각하는 척하다가 얘기하면 뭔가 또박이느낌이 생기는 듯 합니다. 꼭 주격조사뿐 아니라, 을/를 등의 목적격조사도 마찬가지입니당.엄.마. '가'2. 서술어 콕 찝어 말해주기"그럼 제작파트는 어떻게 진행하는 게 좋을까?""제가 할께요."보통은 위와 같이 얘기하기 마련이예요. 하지만 종종 왠지 꿀리기 싫거나 고렙또박이느낌을 잔뜩 주어야 하는 자리가 있기 마련이죠. 특히 뭔가 낯선 사람들과 함께하는 업무적 미팅이나 비딩이나 꼬장꼬장한 누군가와 함께 대화를 해야할 경우 말이예요. 이럴 땐 Do 느낌말고, 정확한 서술어를 찝어봅시다. "제가 진행하겠습니다."라고 말이예요. 뭐 사실 이렇게 말한다고 아무도 신경안쓰긴 하지만, 그래도 뭔가 느낌적인 느낌으로 그런 느낌을 줄 수 있는데, 이 때 안경테를 사카모토 안경테를 살짝 잡아주고 고개를 가볍게 끄덕이며 대답하면 더욱 냉정하고 차가운 느낌을 줄 수 있습니다. (응?)정확한 서술어. "세울 것이다."3. '왜냐하면' 쓰기가끔 어떤 주장에 대한 이유를 별다른 구분없이 주루룩 말하는 경우가 있어요. 사실 대부분이 그렇죠."저는 김치찌개를 먹어야 한다고 생각해요. 벌써 98일 째 국밥 먹었잖아요."이런 식이랄까요? 그런데 저 중간에 '왜냐하면' 을 넣어보아요. "저는 김치찌개를 먹어야 한다고 생각해요. '왜냐하면' 벌써 98일 째 국밥 먹었잖아요." 뭔가 주장과 근거부분이 명확하게 구분되는 느낌이죠? 보통 구어체말고 문어체로 말하면 굉장히 또박해보이는 데 너무 재수없는 문어체말고, 저 정도의 접속부사를 넣어주는 정도는 말의 파트를 정확하게 나눌 수 있어요. 핫토리 한조의 검을 발도로 잡고 자른 듯한 파트의 절단면에 상대방의 오금이 이미 떨리고 있을 거예요.4. 비유해서 예를 들어보자.적절한 비유는 무릎을 탁치고 아이엠그라운드를 연발하게 만들죠. 예를 들어 팀장님이"아니 보통 마케터들은 디자인도 기본적으로 하지 않나? 학교에서 다 배우잖아."라고 언급하신다면"그럼 팀장님은 앞으로 감기걸렸을 때 정형외과 가셔서 보통 의대에서 다 배우지 않나? 라고 말하도록 하세요."라고 유쾌하게 받아쳐드리면 아하! 그렇구나라는 신묘한 깨달음을 얻으시곤 발할라로 승천하실 거예요. (물론 같이 승천할 수도 있어요.)5. 아니오. 하기'자네 이거 할 줄 아나?''아니오.'아니오물론 이는 논쟁의 여지가 있다고 생각해요. 저도 예전엔 '네, 일단 제가 해보겠습니다!' 를 달고 살아야 한다고 생각했어요. 그게 회사생활의 기본이고 예의라고 생각했죠. 못하면 군생활 끝나냐는 고대의 정언명령을 2년 내내 배운 저로써는 일단 까라면 까고보는 투철한 사명의식이 있어야 한다고 믿었거든요. 하지만 지금 와 곰곰히 생각해보니.... 사람은 호의가 계속되면 권리인 줄 알고, 잘하는 사람은 항상 개털리기만 해요. 적절한 보상이나 인정이란 건 사실 찾아보기 힘든 것 같아요. 그래서 전 '아니오'를 익히는 게 더 낫다는 쪽이예요.특히 아니오. 를 외칠 때는 아주 정확하고 냉정하게 외치도록 하세요. 마지막에 '-오' 자가 정확하게 들리도록 말이예요.6. 에. 말고 네.예와 네 사이엔 '에' 가 있어요. 뭔가 대답할 때 에. 에. 에. 에 거리는 분들이 있는데, '에'는 복화술에서 쓰이는 대답소리예요. 우리는 혀와 하악골이 발달되어 있는 구강구조를 정상적으로 지니고 있으므로 혀를 윗니 뒷쪽에 정확하게 붙이고 '네!' 라고 대답하도록 해요.7. 한 문장은 10단어 이내로 짜르세요.문장이 길어지면 제 아무리 달변가라도 엉망진창이 되버리고 말아요. 특히 우리나라 말은 서술어가 뒤에 위치하고 있는데다가 수식표현이 풍부해요. 말이 길어지면 듣는 사람 뿐 아니라, 말하는 사람도 내가 뭔 말을 하고 있는지 모를 수 있죠.8. 그럼 이렇게 해보시죠. 이건 어떨까?!이건 앞서 기초편에서도 살짝 언급했지만, 말의 시작엔 마블 인트로 영상같이 듣기만 해도 설레는 테마를 깔아주는게 좋아요. 일단 뭔갈 주장하거나 말하기에 앞서, 책을 탁 칠 필요까진 없고 그냥 가벼운 제스쳐와 함께'그럼 우리 이렇게 해볼까요?''이쯤에서 정리를 한 번 해볼께요.''잠시만요, 그 부분 다시 설명해주시겠어요?''일단 제가 이해한 게 맞는지 다시 확인해볼께요.'등등 한참 얘기하다보면 원래 매출증대계획으로 시작한 회의주제가 오늘 점심 뭐먹지로 자꾸 변해가기 때문에 중간에 누군가가 계속 방향을 잡아줘야 해요. 이 때 당신이 양치기 개 콜리로 빙의해서 목장을 달리는 거예요. 저런 정리멘트만 탁탁 쳐줘도 회의의 흐름을 이끌어갈 수 있어요. 물론 이렇게 프로또박이가 되다보면 가끔 회의록을 정리하라거나 그럼 니가 맡아라...는 등의 부작용이 있을 수도 있어요. 그럴 땐 5번 '아니오'를 기억하세요.9. 오랫만입니다. 잘지내셨어요? 하기전 직업특성상 미팅을 겁나 많이 다니는데, 참으로 다양한 분들을 만납니다. 그런데 대부분의 첫인상은 인사와 악수에서 결정되는 듯 해요. 특히 인사할 때 뒤통수 긁적이면서 3번척추가 부러진 느낌으로 구부정한 분들은 뭔가 흐음....하게 보게되요. 인삿말을 흐리흐리하게'아녕ㅎㅅ...ㅇ.' 라고 발음하시는 분도 마찬가지예요. 악수는 케바케에요. 손에 땀이 많으신 분은 손가락만 수줍게 잡으시곤 해요. 그건 충분히 이해해요. 하지만 다한증이 아닌데도 흘린 커피 닦은 휴지조각 잡듯 스리슬쩍 악수하는 경우에도 흐음 스러워요. 뭔가 경계심을 대놓고 드러내는 듯한 느낌이기도 하고 뭐... 하지만 악수는 스킨쉽의 문제니 개인차가 있다고 생각하긴 해요. 그러나 손잡는 것에 큰 거부감이 없다면 악수는 꼭 쥐고 안녕안녕 하듯 하도록 합시다. 서로가 '난 무기가 없으니 널 해치지 않아' 라는 표시로 시작된 것이 악수인데, 손에 미니 글록권총이라도 쥔 듯한 제스쳐라면 저도 할 수 없이 가방에서 M4를 꺼낼 수 밖에요..10. 또박이의 생명은 침묵!이..이자식 연습한게 분명해!!아이러니한 얘기지만 이는 노래방법칙과도 일맥상통해요. 내내 남의 노래들으면서 박수만 치며 부처님미소만 짓고 있는 저 구석에 남자아이에게 '노래 한번 불러줘요!' 라는 요청이 쇄도하고 있어요. 녀석은 쿨하게 손을 내저으며 아냐아냐 난 듣기만 할께. 라고 한 쪽 입꼬리를 올려요. 그러다 마지못해 고른 노래가 엠씨더맥수의 '어디에도' 였어요. 그리곤 1절만 딱 겁나 잘부르곤 끄는 거예요. 그리곤 다신 노랠 부르지 않는거죠. 전 알고 있어요. 사실 저 녀석 동노에서 3개월 내내 저것만 연습했을 거예요.예전엔 침묵이 금이라고 했어요. 물론 그건 바보같은 소리예요. 침묵은 그냥 침묵일 뿐이예요. 침묵 후에 내뱉은 한 마디가 금이죠. 침묵은 에너지와 같아요. 점점 쌓여있는 거죠. 표현이 많아지면 일관성이 없어지고 색이 흐려지는 것은 당연해요. 다들 열심히 떠들고 있을 때 카만히 듣고 있다가, 발표차례가 오거나 소위 귀신이 지나갔다고 하는 급작스런 침묵의 시간이 오면 8번카드를 꺼내서 터뜨려요. 물론 사람들의 기대가 높아진 상태일 수 있으니, 잘 정리해놓고 있도록 해요. 침묵과 멍때림은 다르니까요.
조회수 1792

츠타야를 다녀오다

일본 출장길에 츠타야를 다녀왔다. 사실 그 이전에도 츠타야를 구경할 기회가 있긴 하였지만, 그래도 제대로 한번 살펴보고 싶다는 생각에 "츠타야, 그 수수께끼 (마스다 무네아키, 가와시마 요코 대담)"라는 책을 사서 일본으로 가는 비행기에서부터 읽기 시작했다. 대담 형식으로 작성되어 이해하기 쉽고 창업자의 생각을 직접 듣는 것 같아서 편하게 읽을 수 있었다.우선 대표적인 지점인 다이칸야마의 츠타야를 방문! 시부야에서 가까우며 동네가 고급 주택가이고, 대표적인 매장이라서 그런지 한눈에 보기에도 훌륭해 보였다. 그냥 서점이라고 보기에는 너무나도 좋은 분위기에 안에는 스타벅스까지 있기 때문에 커피 한잔 하면서 책을 볼 수 있는 공간으로 이 보다 더 좋은 곳이 있을까?라는 생각이 들게 한다. (여기 방문 전까지 책을 다 읽지 못해서 그 책을 츠타야에 가서 읽는 상황이 ^^;) 방문해서 느낀 점과 책을 읽으면서 느낀 점들을 책(BOOK)과 나의 대담 형태로 몇가지로 나눠 이야기해보는 것도 재미있겠다는 생각이 들었다. (책의 구성이 마스다 대표와 가와시마 요코의 대담 형태로 되어 있음) 이렇게 구성해놓으니, 쉽게 쉽게 잘 읽히는 장점이 있엇기에!! 이 책에서 가장 기억에 남았던 점으로Book : 기획은 프로덕트 아웃이지, 마켓인이 아님(프로덕트 아웃 : 시장의 니즈가 아니라 생산자, 즉 만드는 사람의 형편과 생각에 따라 상품과 서비스를 제공하는 것 / 마켓인 : 시장의 니즈, 즉 손님이 필요로 하는 상품과 서비스가 무엇인지 조사해서 그 상품과 서비스를 제공하는 방법)기획은 고객이 원하니까 한다기보다는 '멋진 것', '매력적인 것'을 고객에게 전달하고 싶고, 고객을 가게로 초대하고 싶다는 감각에 더 가깝습니다. 나 : 사실 startup을 시작하기 전에는 새로운 제품이나 서비스를 출시하는 것에 대해서 "프로덕트 아웃"의 접근 이어야 새로운 기업으로써의 의미가 있지 않을까?라는 생각을 했었다면, 몇 년간의 스타트업 운영 경험을 통해서 "마켓인" 이 절대적으로 기반이 되어야 한다는 생각을 하게 되었다. 사업은 아티스트(artist) 가 만들어내는 '멋진 & 매력적인' 작품이 아니라, 고객이 원하는 가치를 전달하고 키워나가야 하는 business 이기 때문이라는 생각인데, 파펨이라는 브랜드를 처음 설계할 때도 "프로덕트 아웃"의 접근이었지만, 운영하면서부터는 절대적으로 "마켓인" 이 중요하다고 느꼈기 때문이다. 이에 대한 가장 최근의 생각을 추가하자면, (좀 진부하지만) 두 가지가 모두 양립해야 한다는 것이다. 단, 그 시기별로 중요도가 다르다는 생각인데... 처음 startup을 출시하는 시점에는 "마켓인"에 중심을 두어 생존을 위한 기반을 마련해야 한다면, 성장하면서 그 브랜드가 가지고 있는 "프로덕트 아웃"을 통해 만든 이의 고민과 철학을 반영하고 전달해야 브랜드 & 기업이 영속성을 가질 수 있겠다는 생각을 하게 되었다. 그래서 츠타야의 마스다가 말하는 '기획은 프로덕트 아웃!이다'라는 주장에 대해서 약간의 반기를 들었지만, 그 정도의 수준이기에 할 수 있는 도발적인 발언이 아닐까?라는 생각으로 결론을 내리게 되었는데, 헨리 포드가 말한 "만약 고객에게 무엇을 원하는지를 물었다면 그들은 조금 더 빠른 말과 마차라고 대답했을 것"이라는 짧은 문장의 의미와도 연결이 되는 듯하다. 두 번째로, Book : 업계의 상식에 고객은 등 돌린다. 한정된 업계 내에만 빠져 있다 보면, 그 업계에서 통용되는 상식에 갇혀 벗어날 생각을 하지 못한다는 예기죠. 별것 아닐 것 같이 들를 수도 있겠지만, 업계의 관습이나 상식을 바꾸는 시도에는 부단한 노력이 필요한 법이니까요. 새로운 기획을 세상에 제안한다는 일이 다 그렇겠지만 말입니다. 나 : 너무나도 동의하는 부분이다. 사실 어떤 일들을 조금 진행하다 보면 겪게 되는 것들 중에 "원래 그렇게 해왔다." 혹은 심지어 그런 생각 조차 하지 않는 경우들이 많다. 그렇기 때문에 이러한 벽들을 깨 나가는 것이 스타트업의 역할이고 그러한 당연한 것들을 바꾼 스타트업들이 유니콘이 되어간다. 문제는 나나 우리 회사 또는 조직도 이러한 것들에 계속 물들어갈 수밖에 없다는 것인데, 기본적으로 인간이 계속해서 다른 각도에서 생각하고 변화를 주는 것이 귀찮기 때문인데, 나는 이런 것들을 하루 생활에서라도 바꿔보려고 노력하는데.. 조금씩 다른 길로 출근해본다던가, 혹은 안 써본 새로운 앱들을 다운로드해서 써본다던가, 안 먹어보던 음식을 시도해본다던가 등등.. 개인적으로는 나이가 들 수록 혹은 기업이 시간이 흐를수록 이런 생각하지 않음을 피하기 위해 노력해야겠다는 생각을 한다.  자, 이제 매장을 둘러보면서 느꼈던 점들에 대해서 조금 더 살펴보면.. 분류와 진열에 대한 이야기!Book : "생활 제안별 분류"를 시도한 것이지요. 여행, 음식, 요리, 인문, 자동차 같이 장르별로 구역을 나누고 단행본이나 문고본 같은 범주에서 벗어나 책을 나열했지요. 즉 진열되어 있는 책 자체가 '그 나라를 여행하기 전에 이러한 문화를 먼저 체험해 보는 게 어떨까요? 식으로 제안을 하는 것입니다. 츠타야는 내부를 편집 작업을 하는데.. 가령 여행 코너에서는 예술을 통해 환상의 도시 프라하를 소개하는 등 고객의 마음에 와 닿는 제안을 계속해서 떠올리고 테마에 맞는 서적과 잡지를 모아갔지요.. 이 편집 작업이 생각보다 상당히 어렵더군요.. 나 : 츠타야에 가서 구석에서 경기용 오토바이가 한대 진열되고 있어서 '이건 뭐지?" 라고 생각하는 중에, 그 옆에는 오토바이 잡지들과 화보들이 전시되어 있었고, 바로 옆 책장에는 오토바이와 관련된 만화들이 진열되어 있었다. (아래 사진 참조)말 그대로의 생활 제안을 하는 방식으로 진열을 하였는데.. 이렇게 하는 것이 상당히 재미있었던 것이, 츠타야 서점은 우리가 어떤 정보를 찾는 체계적인 도서관의 접근이 아니라, 고객의 관심사에 따라 재미있는 정리가 되어 있었던 것이다. 나름 상큼했다. 마음에 드는 섹션을 발견하였을 때는, 여러가지 책들과 다양한 제품들로 인해 확실히 이것저것 관심이 더 가서 많은 시간을 쓸 수밖에 없었고, 이것이 나를 여기에 묶어둘 수 있는 힘이구나! 라는 생각이 들었다.뜬금없는 오토바이 전시에서 시작된 오토바이 관련 서적, 잡지, 그리고 만화!!상품이 무진장 진열되어 있어도 팔리지 않는다? Book : 다이칸야마 츠타야 서점에서 시도한 것은 책뿐만이 아닙니다. 그와 관련되는 물건과 행동의 제안도 시도하였지요. 예를 들어 여행에 관련된 코너와 가까운 곳에다 여행 대리점 카운터를 설치한 겁니다. 책을 한 장 한 장 넘기면서 여행하고 싶다는 기분을 느꼈을 때, 어떤 투어가 있는지 그곳에서 문의도 하고 신청도 할 수 있는 것이지요. 그 연장선으로 요리책 코너 옆에 요리 교실을 만들 수 도 있고요...나 : 사실이었다. (아래 사진 참조) 츠타야 서점 곳곳에는 이렇게 여행사 카운터도 있었고, 와인도 있었고, 심지어는 간장이나, 우메보시(장아찌 종류)를 팔고도 있었다. 살짝 당황!! 정말 궁금한 것은 이러한 장치들이 실제로 작동하고 있느냐? 가 궁금하였다. 실제로 고객들이 저러한 장치에서 어떤 행동을 만들어 낼 수 있을까? 구매로 이어질 수 있을까? 저렇게 만들어둔 것에서 가치를 느낄까? 나는 사실 NO라는 대답을 하였다. 우선 제품을 하나하나 살펴보지는 못했지만 저러한 진열에는 구색의 깊이를 갖추기 어렵다. 와인만 하더라도 몇 종류 되지 않고, 대표적인 몇 가지 제품들만 진열되어 있다. 책을 보다가 뭔가를 떠올리고 다음 행동으로 이어지기에는 좀 부족하다는 느낌이다. 내가 아무리 집 반찬 관련 책을 사러 간다고 해도 저곳에서 장아찌를 사지는 않을 것 같다. 차라리 먼저 책을 한 권 사고, 백화점 지하 식품점에 가서 다양한 반찬들을 맛보며 구경하지 않을까? 저런 구조를 더 잘 설계하기 위해서는 나는 on-line이 더 추가되어야 할 것으로 보이는데.. 마스다 씨는 저러한 점이 인터넷보다 실제 매장이 우위를 점할 수 있는 하나의 방법이라고 주장하고 있다. 진짜 맞음?? 츠타야 서점안의 여행사, 와인코너, 반찬코너.. 츠타야 오모테산도와 더부어 츠타야 일렉트로닉스까지 가보기로 마음먹었다. 지하철로 20~30분 정도 가면, 살짝 외곽의 bed town의 큰 mall에 입점하여 있었다. 후타코 타마가와 역에 내려서 바로 연결됨. 츠타야 일렉트로닉스에서 재미있었던 것은 이제는 책과 일상생활에서 사용되는 가전제품, 그리고 일상생활용품들까지 모두 잘 버무려 놓은 매장이었다는 점이다. 일본어를 몰라도 구경하는 재미가 있다. 흠.. 이래서 이곳의 키워드를 "생활"이라고 잡은 것인가? 일단 입구에 들어가면 전자 제품 매장이 있다. 예전에 영국, 미국 시장 등의 베스트바이 같은 매장들하고는 시작부터 다르다. 베스트바이와 같은 곳이 큰 매장의 일반적인 마트 느낌이라면, 이곳은 큰 서점을 중심으로 여러 가지 가게들이 만들어진 골목과 같은 느낌이다. 이것저것 행동의 제안이라는 기본 철학을 잘 구현해 놓은 듯하다. 하지만! 또 다른 측면에서의 느낌은.. 이곳에서 구매가 잘 이루어질까? 라는 생각도 들었다. (외국인 관광객의 관점일 수도 있겠지만) 구매보다는 재미있게 구경하기 좋은 곳이 아닐까?라는 생각이 들었는데.. 이곳을 다녀온 다른 분들의 의견도 들어보고 싶다. 츠타야 일렉트로닉스에서 찍은 사진들.. 스포츠 용품, 화원, 서점과, 전자제품들이 재미있는 골목처럼 연결되어 있다. 츠타야 일렉트로닉스 매장재미있었던 것은 책에서 말했던 것과 같이 실제로 커뮤니티 활동들이 일어나고 있었다. 아래 왼쪽 사진에서는 일본 프리미엄 맥주 브랜드 에비스(EBYSU) 에서 주최하는 것으로 보이는 행사가 진행 중이었는데, 아마도 맥주와 잘 어울리는 음식을 만드는 클래스로 보였다. 진행하는 분이 꽤나 재미있게 리드하는 듯이 보였는데, 참가자들이 모여서 웃고 떠들면서 진행하는 행사로 보였음.아래 오른쪽 사진은 커피 머신을 판매하는 코너에서 한 노부부와 판매원이 커피 이야기를 하면서 실제로 이런저런 머신에 커피를 갈아 넣고, 커피를 내려보는 것을 하고 있었다. 오호! 이런 점은 참 신박했다. 그냥 이런 머신 입니다가 아니라.. 실제로 두 노부부가 커피를 갈아보고 내려 마셔보는 것까지 (꽤나 오래!) 체험을 해보고 있었는데.. 이런 것이 판매와 체험이 실제로 공존하는 매장으로서의 츠타야 일렉트로닉스! 이군이라는 느낌을 주기에 충분해 보였다. 왼쪽은 에비수 맥주에서 그룹 모임을 하고 있었고, 오른쪽은 고객이 실제로 커피를 내려보면서 점원과 이야기하는 모습 주차장의 하늘이 넓을수록 고객은 다시 찾아오고 싶다. 도쿄에서도 비싼 동네인지라 이렇게 주차장을 만들어 놓는 것이 정말 "철학" 적인 도움 외에 실제로 도움이 될 것인가?라는 생각이 들 정도로 주차장은 좋았다. 일본에서 큰 주차장 구경하기가 쉽지 않았는데 (주차 비용은 얼마인지 확인 못함), 정말 잘해두었구나 라는 생각과.. 이런 기획을 해서 위로 올리기가 쉽지 않은 조직 구조를 고려할 때, 창업자가 이런 생각을 가지지 않는 한, 이런 실행은 절대 불가능할 것이라는 생각이 또한 들었다. 주차장 쪽을 돌아서 나오는데, CCC의 사무실이 옆에 있었다. 일본어를 조금이라도 할 줄 알았다면 한번 들어가서 이런저런 이야기 해보고 싶은 느낌이 들었다. 또한 밖에서 본 사무실에는 Magazine B의 츠타야 편이 있어서 또한 반가웠다는!!츠타야 뒤의 주차장의 하늘과.. CCC 오피스마지막으로 책에서 이야기했던 것들 중에 몇몇 가지 재미있는 포인트 들을 뽑아보자면하나,Book : 생활 제안은 우선 콘셉트에서 시작하지 않습니까? 하지만 곰곰이 듣다 보면 고객을 기쁘게 하는 일이 아니라, 결국 자기 자신을 기쁘게 하는 일에 그치는 경우가 꽤 있어요.. 기획이 이타적인 것이 아니라, 무리하게 이유를 만들어 내어 결국 자기만족에 불과한 이기적인 것이 되는 경우가 많아요. 나 : 아 뜨끔.. 둘, Book : 직원들에게 바라는 것은 항상 자유롭다는 것이고, 이것은 자유란 하기 싫은 일을 하지 않아도 되는 것이 아닙니다. 해야만 하는 일을 할 수 있는 것이 바로 자유입니다. 그래서 자유란 어려운 것이고 누군가의 관리를 받는 편이 한결 편하지요. 나 : 요즘 고민이 많은 부분! 조직문화라는 것과 구성원들이 그 조직 안에서 어떻게 일을 할 것인가의 문제인데, 자유라는 의미를 잘 해석해 준 듯하다. 구성원들에게 자유를 주는 것도 때로는 위험하다는 생각을 하는데, 스스로 움직이지 못하는 구성원에게는 자유를 제공해 주는 방식이 더 큰 어려움을 줄 수 있다는 것을 경험해 보았기 때문이다. 마지막으로는,Book : 도전하지 않는 직원에게는 화가 난다. 나 : 네 저두요.. 가끔 저 자신한테도 ㅜㅜ PS. 츠타야 바로 맞은편에 있던 ASO cafe(책에도 나오는 카페) 에서 여유있게 커피한잔 하지 못한 것이 아쉽!
조회수 7701

협업을 위한 심볼 구조화, 플러그인으로똑똑하게 스케치 사용하기

Sketch App 도입은 Zeplin을 활용하여 효율적으로 개발자와 소통하기 위해 시작되었습니다. 도입하는 과정에서 안드로이드 UI를 담당하게 되었고, 심볼의 구조화와 적절한 플러그인의 사용을 통한 작업의 효율, 가지고 있던 문제점들을 해결하는 것에 중점을 뒀습니다.기존 작업방식과 문제점디자인 작업 패턴디자인 작업 패턴을 분석했을 때, 기존의 PSD 파일들에서 컴포넌트를 가져와 재조합하는 경우가 가장 많았습니다. 디자이너간 협업 시 최근 릴리즈된 디자인이 맞는지, 요소간 간격 같은 디테일한 부분에 대해 묻는 경우가 많았으며, 개발자와의 협업 시 지칭하는 용어가 달라서 생기는 커뮤니케이션 미스가 종종 발생했습니다. 구조화에 앞서, 분석하고 내린 작업의 키포인트는 다음과 같습니다.1. 최근 릴리즈된 디자인이 영향을 받는 모든 화면에 동기화되어야 합니다.2. 개발자와의 협업 시, 심볼의 네이밍을 기준으로 커뮤니케이션합니다.3. 디자이너가 사용 시, 시안 작업을 빠르고 편하게 할 수 있어야 합니다.4. 컴포넌트, 디자인 요소들이 서로 유기적으로 연결되어있어야 합니다.5. 시안 작업 시, 유저 데이터를 사용하기 편리해야 합니다.심볼 생성 기준심볼로 만들어야 하는 경우는 다음과 같이 정의했습니다.1. 다양한 상태값을 가진 요소2. 같은 크기의 영역 안에서 다양한 형태를 가진 요소3. GNB처럼 자주 쓰이는 컴포넌트4. 카드 형태의 디자인5. 아이콘Overrides 예시심볼 폴더 구조심볼 폴더 구조디자이너들이 사용하기 때문에 첫 번째 분류는 보이는 형태, 디자이너끼리 자주 사용하는 용어로 합니다. 두 번째 분류는 원활한 커뮤니케이션을 위해 목적 혹은 개발자분들이 사용하는 용어로 지정하며, 세 번째 분류까지 해야하는 경우 2 Column, 3 Column(스타일쉐어 내부에선 Grid라는 용어를 주로 사용합니다.)과 같은 다양한 변화에 대한 것이므로, 똑같이 커뮤니케이션에 용이하게 판단하여 결정합니다.Elements 폴더는 심볼을 구성하는 심볼들이 있는 폴더입니다. 직접 심볼 폴더트리를 타고 들어가 생성하는 경우는 없으므로, 분류에 더 목적을 두고 폴더 구조가 복잡해지는 것을 감수했습니다.그리고 Overrides를 대비하여 이해하기 쉬운 용어로 작성합니다.심볼의 활용자주 쓰는 컬러들을 심볼화하고 마스크 기능을 활용하면, 아이콘들의 색상을 더 편하게 변경할 수 있습니다. 추후에 브랜드 컬러, 그레이스케일이 변경되는 경우에도 컬러 심볼만 수정하면 큰 문제없이 바로 적용할 수 있습니다.플러그인의 활용작업에 주로 사용하는 플러그인은 Auto Layout, Button, Clipboard Fill입니다.Auto Layout의 Stacked Group 기능으로 심볼이나 요소들을 유기적으로 연결시킵니다. Button은 Tag, List item 등에 사용하며 짜잘한 수정작업을 줄여 시안작업에 더 집중할 수 있도록 합니다. Clipboard Fill은 스타일쉐어 특성때문에 활용 가치가 높은 플러그인입니다. 유저 이미지, 게시글의 사진을 스타일쉐어 웹에서 복사하여 시안을 작업할 때 활용합니다. 실 데이터를 사용하기 때문에 설득력이 높아지고, 조금 더 객관적으로 작업할 수 있다는 장점이 있습니다.플러그인 사용 Gif페이지 구성모든 화면이 모여있는 Master_Android.sketch 파일에서는 페이지로 분류합니다. 이 분류와 구글 드라이브 폴더 구조를 일치시켜 빠르게 파일을 찾을 수 있도록 하였으며, 탐색이 용이하기때문에 새로운 디자이너가 오더라도 쉽게 파악가능합니다.디자인 작업 프로세스시안 작업 시, 실제 데이터를 사용하여 설득력을 높이는 것을 가장 큰 목표로 합니다.1. 디자인 작업 전, 사용할 심볼들을 모두 Detatch합니다.2. 문제해결에 맞게 컴포넌트를 디자인합니다.3. 플러그인을 활용하여 웹에서 실제 데이터들을 가져와 채웁니다.4. 시안 작업이 끝난 후, 정리하여 Zeplin으로 내보냅니다.5. 심볼을 만들어야 한다면, Master파일 Symbols에 업데이트합니다.6. Master파일에 심볼을 사용하여 화면을 정리합니다.이 과정에서 생기는 큰 문제점은 모든 작업자가 심볼 구조화에 같은 기준을 가지고 있어야 한다는 점입니다. 생성 여부, 심볼 이름을 정하는 규칙 등에 대해 문서화하여 공유해도 익숙하지 않기때문에 실수가 생기기 마련입니다. 그래서 안정화되기까지 첫 구조를 잡았던 담당자가 정기적으로 확인하여, 다듬어나가는 것으로 결정했습니다. 비효율적인 방법일 수도 있지만, 동시에 구조화를 더 탄탄하게 하는 기회였습니다.잘가 포토샵.Sketch App의 업데이트에 따라 해결할 수 있는 방법이 달라지는 경우가 많았습니다. 그에 대비하여 의존성을 줄여나가는 고민을 계속하고 있으며 UI 뿐만 아니라, 작업툴 사용에 제약이 없다는 조건 하에 Overrides 기능과, Clipboard Fill, Auto Layout을 활용하여 다양한 템플릿 작업에도 사용할 수 있다고 생각합니다.#스타일쉐어 #개발팀 #개발자 #개발환경 #인사이트

기업문화 엿볼 때, 더팀스

로그인

/