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

안녕하세요 대한민국 셀러들의 성공적인 아마존 진출을 도와주는 컨설팅 회사이자 대행사인 컨택틱의 이이삭 대표입니다.지금까지 기초과정 시리즈를 정독하신 분들이라면, 정말 궁금할 한 가지 주제가 남았음을 직감하고 계실 것입니다. 바로, 실제로 판매가 된 이후 대금 정산은 어떤 원리로 진행이 되는지, 나아가 한국에 매출 신고는 어떻게 해야 하는지에 관한 절차 등, 우리에게 가장 중요한 ‘돈 문제’가 남았습니다. 너무 깊게 들어가면, 세무 위주의 복잡한 내용만 서술하게 될 것 같아, 저희 컨택틱에서 주로 받았던 질문 위주로 간략하게 말씀 드리고자 합니다.Q1) 예상했던 금액보다 정산 받은 금액이 적어지는 이유는 뭔가요?먼저, 아마존의 판매 대금 정산은 2주(14일)에 한 번 단위로 이뤄집니다. 이때, 정산되는 금액이 본인의 기대보다 적게 나오는 경우가 발생할 수 있는데 그 이유는 크게 두 가지가 있습니다. 첫째, FBA 수수료 등 제반 비용을 고려하지 않은 경우. 둘째, 아마존에서 판매 대금을 일시불로 지급하지 않고 일부를 유보했을 경우입니다. 판매 대금 유보의 경우, 해당 셀러가 아직 신뢰도가 쌓이지 않은 신규 셀러이거나, 해당 셀러의 판매제품이 잦은 클레임, 반품, 환불 등이 일어날 경우 발생합니다. 그러므로, 입금된 금액이 본인의 예상과 정확하게 일치하지 않는다고 해서 당황하지 않으셔도 됩니다. “그렇다면 정확한 정산 내역을 어떻게 파악할 것인가?” – 이렇게 물으실 수 있는데, 이때는 아마존 Seller Central 페이지에서 [Payments > Reports > All Statements]와 같은 경로로 접속하여 2주 단위로 파일을 다운로드 받으실 수 있습니다. 그 엑셀 파일을 자세히 살펴보시면, 주문 단위 별로, 항목별로 매우 구체적으로 기재되어 있을 것입니다.Q2) 부가세 中 '영세율' 항목은 무엇인가?우선, 영세율은 문자 그대로 0의 세율을 적용 받는 것을 의미하며, 수출을 장려하는 대한민국에서 영세율 적용대상은 다음과 같습니다. (부가가치세법 21조~24조) - 1) 재화의 수출, 2) 용역의 국외공급 3) 외국항행용역의 공급, 4) 기타 외화 획득 거래, 5) 조세특례제한법 상 영세율 적용대상 거래가 위에 해당합니다. 간혹, 영세율과 명세를 혼동하시는 경우가 있는데, 면세는 애초에 부가가치세의 과세대상이 아니라면, 영세율은 부가가치세 과세대상이지만 세율이 0%인 점에서 다르다는 차이가 있습니다.따라서, 소비자의 입장에서는 면세나 영세율 모두 부가가치세가 없기 때문에 큰 차이가 없지만, 판매자(사업자)의 입장에서 영세율은 ‘매입세액공제’를 받을 수 있기 때문에 과세사업자로서의 부담이 줄어든다는 특징이 있습니다.그렇다면, 여기서 생길 수 있는 의문이, “과연 아마존 매출은 영세율 매출에 속하는 것일까?”와 같은 질문입니다. 이 글을 잘 읽고 계신 독자들이라면, 이미 답을 알고 계실 것입니다. 답은 “YES” 입니다. 왜냐하면, ‘국외에서 사용·소비될 재화 또는 용역’ 또는 ‘국내에서 사용·소비되는 재화 또는 용역의 공급이라 하더라도 외화를 획득하는 경우’에 해당되기 때문에 영의 세율이 적용되기 때문입니다.Q2) 아마존 매출을 영세율로 신고하기 위해서는?아마존 해외매출을 제대로 신고하기 위해서는 먼저, 아마존에서 매출 내역 파일을 다운로드 받아야 합니다. 그 경로는 다음과 같습니다. [Reports > Payments > Date Range Reports > Summary PDF]. 이 파일을 월별로 다운로드 받으신 후에 income 수치를 해외매출로 잡으면 됩니다. 간혹, 세무대리인을 통해 해외매출을 신고할 때, ‘환율을 어떻게 적용해야 할 것인가’의 문제가 발생할 수 있는데, 서울외국환중개소에 월별 평균 환율을 참고하셔서 작성하시면 되겠습니다.추가적으로, 아마존 매출을 신고할 때, 수출실적명세서를 작성하시게 되는데, 핵심은 아마존 해외 매출을 '기타 영세율 적용' 칸에 기입하시면 됩니다. 수출실적명세서를 기반으로 영세율 매출명세서를 작성하게 되고, 영세율 매출명세서를 기반으로 기본 부가세 신고서의 '영세율' 항목 중 '기타' 부분을 증빙하게 되기 때문입니다.꿀팁) 소득세 폭탄을 맞지 않는 방법!세금은 대한민국 국민이라면 누구나 내야 하는 것이지만, 굳이 낼 필요가 없는 세금까지 낸다면, 그것보다 아까운 것도 없겠죠. 조금이라도 절세를 하기 위해서는 법의 테두리 안에서 최대한 공제 받을 수 있는 항목을 찾아서, 꼼꼼하게 세무 처리를 할 필요가 있습니다.다시 본론으로 돌아와서, Q2) 항목에서, 아마존 매출 신고를 위해서 매출 보고서를 다운로드 해야 된다고 말씀 드렸습니다. 이때, Summary PDF에서 expense 수치를 매출에서 공제해야 한다는 사실을 잊어서는 안됩니다. 아무래도 파일이 영어로 되어 있기 때문에, 항목만 간단히 확인하고 넘어가는 경우가 발생할 수 있는데, 이를 제대로 하지 않으면 아마존 매출 그 자체에 대해서 소득세율이 적용되어 소득세 폭탄을 맞을 위험이 생길 수 있습니다. 절세를 위해서는 꼼꼼함이 정말로 필수입니다.이렇게 아마존 기초과정에 대한 포스팅을 마무리하게 되었습니다. 한 가지 꼭 드리고 싶은 말씀은, 아마존이라는 시장은 굉장히 역동적이라는 사실입니다. 소비자 최우선의 정책을 실시하면서도 동시에 경쟁력 있는 셀러들을 유치하기 위해 많은 시도들을 하고 있습니다. 그러므로, 아마존에서 성공하기 위해서는 판매-유통-마케팅 등의 정책 변경에 항상 업데이트 되어 있어야 합니다. 나아가, 본인에게 맞는 것들을 조합하여 최상의 판매 전략을 구축할 수 있어야 할 것입니다. 지금까지 긴 글 읽어주셔서 감사합니다.컨택틱의 모든 교육은 파트너인 글로벌셀러창업연구소와 접수하고 진행합니다. 교육 신청은 아래 링크나 글로벌셀러창업연구소의 홈페이지를 통해 접수 가능합니다.컨택틱의 모든 교육은 파트너인 글로벌셀러창업연구소와 접수하고 진행합니다. 교육 신청은 아래 링크나 글로벌셀러창업연구소의 홈페이지를 통해 접수 가능합니다.오프라인 아마존 입문 과정오프라인 아마존 기초/심화 과정온라인 아마존 입문 과정그럼 오늘도 즐거운 글로벌 셀링 되세요!감사합니다.컨택틱서울특별시 서초구 서초대로 356, 606호(서초동, 서초지웰타워)대표 전화: 02-538-3939이메일: [email protected]홈페이지: https://www.kontactic.com네이버 블로그: https://blog.naver.com/kontactic카카오 브런치: https://brunch.co.kr/@allaboutamazon유튜브 채널: https://www.youtube.com/c/kontactic

OverviewAWS Batch는 배치 컴퓨팅 작업을 효율적으로 실행할 수 있게 도와줍니다. 배치 작업량과 리소스 요청을 기반으로 최적의 리소스 수량 및 인스턴스 유형을 동적으로 프로비져닝합니다. AWS Batch에서는 별도의 관리가 필요 없기 때문에 문제 해결에 집중할 수 있습니다. 별도의 추가 비용은 없습니다. 배치 작업을 저장 또는 실행할 목적으로 생성된 AWS 리소스(인스턴스 등)에 대해서만 비용을 지불하면 됩니다. 이번 포스팅에서는 간단한 튜토리얼로 AWS Batch 사용 방법을 크게 11개의 Step으로 알아보겠습니다. 이렇게 진행하겠습니다.AWS에서 제공하는 Dockerfile, fetch&run 스크립트 및 myjob.sh 다운로드Dockerfile를 이용하여 fetch&run 스크립트를 포함한 Docker 이미지 생성생성된 Docker 이미지를 ECR(Amazon Elastic Container Registry)로 푸쉬간단한 샘플 스크립트(myjob.sh)를 S3에 업로드IAM에 S3를 접속 할 수 있는 ECS Task role 등록Compute environments 생성Job queues 생성ECR을 이용하여 Job definition 생성Submit job을 통해 S3에 저장된 작업 스크립트(myjob.sh)를 실행하기결과 확인 STEP1. AWS에서 제공하는 Dockerfile, fetch&run 스크립트 및 myjob.sh 다운로드AWS Batch helpers페이지에 접속합니다.    2. /fetch-and-run/에서 Dockerfile, fetchandrun.sh, myjob.sh 다운로드합니다.STEP2. Dockerfile을 이용하여 fetch&run 스크립트를 포함한 Docker 이미지 생성Dockerfile을 이용해서 Docker 이미지를 빌드합니다.잠시 Dockerfile의 내용을 살펴보겠습니다.FROM amazonlinux:latestDocker 공식 Repository에 있는 amazonlinux 의 lastest 버젼으로 빌드RUN yum -y install which unzip aws-cliRUN을 통해 이미지 빌드 시에 yum -y install which unzip aws-cli를 실행ADD fetch_and_run.sh /usr/local/bin/fetch_and_run.shADD를 통해 Dockerfile과 같은 디렉토리에 있는 fetch_and_run.sh를 /usr/local/bin/fetch_and_run.sh에 복사 WORKDIR /tmp컨테이너가 동작할 때 /tmp를 기본 디렉토리로 설정USER nobody컨테이너 실행 시 기본 유저 설정 ENTRYPOINT [“/usr/local/bin/fetch_and_run.sh”]컨테이너 실행 시 /usr/local/bin/fetch_and_run.sh를 call shell에 docker 명령을 통해 이미지 생성shell : docker build -t fetch_and_run . 실행하면 아래와 같은 결과가 출력됩니다.[ec2-user@AWS_BRANDI_STG fetch-and-run]$ docker build -t fetch_and_run . Sending build context to Docker daemon 8.192kB Step 1/6 : FROM amazonlinux:latest latest: Pulling from library/amazonlinux 4b92325dc37b: Pull complete Digest: sha256:9ee13e494b762db41b9db92a200f6784b78da5ac3b0f974fb1c38feb7f636474 Status: Downloaded newer image for amazonlinux:latest ---> 81bb3e78db3d Step 2/6 : RUN yum -y install which unzip aws-cli ---> Running in 1f5293a2294d Loaded plugins: ovl, priorities Resolving Dependencies --> Running transaction check ---> Package aws-cli.noarch 0:1.14.9-1.48.amzn1 will be installed --> Processing Dependency: python27-jmespath = 0.9.2 for package: aws-cli-1.14.9-1.48.amzn1.noarch --> Processing Dependency: python27-botocore = 1.8.13 for package: aws-cli-1.14.9-1.48.amzn1.noarch --> Processing Dependency: python27-rsa >= 3.1.2-4.7 for package: aws-cli-1.14.9-1.48.amzn1.noarch --> Processing Dependency: python27-futures >= 2.2.0 for package: aws-cli-1.14.9-1.48.amzn1.noarch --> Processing Dependency: python27-docutils >= 0.10 for package: aws-cli-1.14.9-1.48.amzn1.noarch --> Processing Dependency: python27-colorama >= 0.2.5 for package: aws-cli-1.14.9-1.48.amzn1.noarch --> Processing Dependency: python27-PyYAML >= 3.10 for package: aws-cli-1.14.9-1.48.amzn1.noarch --> Processing Dependency: groff for package: aws-cli-1.14.9-1.48.amzn1.noarch --> Processing Dependency: /etc/mime.types for package: aws-cli-1.14.9-1.48.amzn1.noarch ---> Package unzip.x86_64 0:6.0-4.10.amzn1 will be installed ---> Package which.x86_64 0:2.19-6.10.amzn1 will be installed --> Running transaction check ---> Package groff.x86_64 0:1.22.2-8.11.amzn1 will be installed --> Processing Dependency: groff-base = 1.22.2-8.11.amzn1 for package: groff-1.22.2-8.11.amzn1.x86_64 ---> Package mailcap.noarch 0:2.1.31-2.7.amzn1 will be installed ---> Package python27-PyYAML.x86_64 0:3.10-3.10.amzn1 will be installed --> Processing Dependency: libyaml-0.so.2()(64bit) for package: python27-PyYAML-3.10-3.10.amzn1.x86_64 ---> Package python27-botocore.noarch 0:1.8.13-1.66.amzn1 will be installed --> Processing Dependency: python27-dateutil >= 2.1 for package: python27-botocore-1.8.13-1.66.amzn1.noarch ---> Package python27-colorama.noarch 0:0.2.5-1.7.amzn1 will be installed ---> Package python27-docutils.noarch 0:0.11-1.15.amzn1 will be installed --> Processing Dependency: python27-imaging for package: python27-docutils-0.11-1.15.amzn1.noarch ---> Package python27-futures.noarch 0:3.0.3-1.3.amzn1 will be installed ---> Package python27-jmespath.noarch 0:0.9.2-1.12.amzn1 will be installed --> Processing Dependency: python27-ply >= 3.4 for package: python27-jmespath-0.9.2-1.12.amzn1.noarch ---> Package python27-rsa.noarch 0:3.4.1-1.8.amzn1 will be installed --> Processing Dependency: python27-pyasn1 >= 0.1.3 for package: python27-rsa-3.4.1-1.8.amzn1.noarch --> Processing Dependency: python27-setuptools for package: python27-rsa-3.4.1-1.8.amzn1.noarch --> Running transaction check ---> Package groff-base.x86_64 0:1.22.2-8.11.amzn1 will be installed ---> Package libyaml.x86_64 0:0.1.6-6.7.amzn1 will be installed ---> Package python27-dateutil.noarch 0:2.1-1.3.amzn1 will be installed --> Processing Dependency: python27-six for package: python27-dateutil-2.1-1.3.amzn1.noarch ---> Package python27-imaging.x86_64 0:1.1.6-19.9.amzn1 will be installed --> Processing Dependency: libjpeg.so.62(LIBJPEG_6.2)(64bit) for package: python27-imaging-1.1.6-19.9.amzn1.x86_64 --> Processing Dependency: libjpeg.so.62()(64bit) for package: python27-imaging-1.1.6-19.9.amzn1.x86_64 --> Processing Dependency: libfreetype.so.6()(64bit) for package: python27-imaging-1.1.6-19.9.amzn1.x86_64 ---> Package python27-ply.noarch 0:3.4-3.12.amzn1 will be installed ---> Package python27-pyasn1.noarch 0:0.1.7-2.9.amzn1 will be installed ---> Package python27-setuptools.noarch 0:36.2.7-1.33.amzn1 will be installed --> Processing Dependency: python27-backports-ssl_match_hostname for package: python27-setuptools-36.2.7-1.33.amzn1.noarch --> Running transaction check ---> Package freetype.x86_64 0:2.3.11-15.14.amzn1 will be installed ---> Package libjpeg-turbo.x86_64 0:1.2.90-5.14.amzn1 will be installed ---> Package python27-backports-ssl_match_hostname.noarch 0:3.4.0.2-1.12.amzn1 will be installed --> Processing Dependency: python27-backports for package: python27-backports-ssl_match_hostname-3.4.0.2-1.12.amzn1.noarch ---> Package python27-six.noarch 0:1.8.0-1.23.amzn1 will be installed --> Running transaction check ---> Package python27-backports.x86_64 0:1.0-3.14.amzn1 will be installed --> Finished Dependency Resolution Dependencies Resolved ================================================================================ Package                              Arch   Version            Repository                                                                           Size ================================================================================ Installing:  aws-cli                              noarch 1.14.9-1.48.amzn1  amzn-main 1.2 M  unzip                                x86_64 6.0-4.10.amzn1     amzn-main 201 k  which                                x86_64 2.19-6.10.amzn1    amzn-main  41 k  Installing for dependencies:  freetype                             x86_64 2.3.11-15.14.amzn1 amzn-main 398 k  groff                                x86_64 1.22.2-8.11.amzn1  amzn-main 1.3 M  groff-base                           x86_64 1.22.2-8.11.amzn1  amzn-main 1.1 M  libjpeg-turbo                        x86_64 1.2.90-5.14.amzn1  amzn-main 144 k  libyaml                              x86_64 0.1.6-6.7.amzn1    amzn-main  59 k  mailcap                              noarch 2.1.31-2.7.amzn1   amzn-main  27 k  python27-PyYAML                      x86_64 3.10-3.10.amzn1    amzn-main 186 k  python27-backports                   x86_64 1.0-3.14.amzn1     amzn-main 5.0 k  python27-backports-ssl_match_hostname                                       noarch 3.4.0.2-1.12.amzn1 amzn-main  12 k  python27-botocore                    noarch 1.8.13-1.66.amzn1  amzn-main 4.1 M  python27-colorama                    noarch 0.2.5-1.7.amzn1    amzn-main  23 k  python27-dateutil                    noarch 2.1-1.3.amzn1      amzn-main  92 k  python27-docutils                    noarch 0.11-1.15.amzn1    amzn-main 1.9 M  python27-futures                     noarch 3.0.3-1.3.amzn1    amzn-main  30 k  python27-imaging                     x86_64 1.1.6-19.9.amzn1   amzn-main 428 k  python27-jmespath                    noarch 0.9.2-1.12.amzn1   amzn-main  46 k  python27-ply                         noarch 3.4-3.12.amzn1     amzn-main 158 k  python27-pyasn1                      noarch 0.1.7-2.9.amzn1    amzn-main 112 k  python27-rsa                         noarch 3.4.1-1.8.amzn1    amzn-main  80 k  python27-setuptools                  noarch 36.2.7-1.33.amzn1  amzn-main 672 k  python27-six                         noarch 1.8.0-1.23.amzn1   amzn-main  31 k Transaction Summary ================================================================================ Install 3 Packages (+21 Dependent packages) Total download size: 12 M Installed size: 51 M Downloading packages: -------------------------------------------------------------------------------- Total 1.0 MB/s | 12 MB 00:12 Running transaction check Running transaction test Transaction test succeeded  Running transaction   Installing : python27-backports-1.0-3.14.amzn1.x86_64                    1/24   Installing : python27-backports-ssl_match_hostname-3.4.0.2-1.12.amzn1    2/24   Installing : python27-setuptools-36.2.7-1.33.amzn1.noarch                3/24   Installing : python27-colorama-0.2.5-1.7.amzn1.noarch                    4/24   Installing : freetype-2.3.11-15.14.amzn1.x86_64                          5/24   Installing : libyaml-0.1.6-6.7.amzn1.x86_64                              6/24   Installing : python27-PyYAML-3.10-3.10.amzn1.x86_64                      7/24   Installing : mailcap-2.1.31-2.7.amzn1.noarch                             8/24   Installing : python27-ply-3.4-3.12.amzn1.noarch                          9/24   Installing : python27-jmespath-0.9.2-1.12.amzn1.noarch                  10/24   Installing : python27-futures-3.0.3-1.3.amzn1.noarch                    11/24   Installing : python27-six-1.8.0-1.23.amzn1.noarch                       12/24   Installing : python27-dateutil-2.1-1.3.amzn1.noarch                     13/24   Installing : groff-base-1.22.2-8.11.amzn1.x86_64                        14/24   Installing : groff-1.22.2-8.11.amzn1.x86_64                             15/24   Installing : python27-pyasn1-0.1.7-2.9.amzn1.noarch                     16/24   Installing : python27-rsa-3.4.1-1.8.amzn1.noarch                        17/24   Installing : libjpeg-turbo-1.2.90-5.14.amzn1.x86_64                     18/24   Installing : python27-imaging-1.1.6-19.9.amzn1.x86_64                   19/24   Installing : python27-docutils-0.11-1.15.amzn1.noarch                   20/24   Installing : python27-botocore-1.8.13-1.66.amzn1.noarch                 21/24   Installing : aws-cli-1.14.9-1.48.amzn1.noarch                           22/24   Installing : which-2.19-6.10.amzn1.x86_64                               23/24   Installing : unzip-6.0-4.10.amzn1.x86_64                                24/24   Verifying  : libjpeg-turbo-1.2.90-5.14.amzn1.x86_64                      1/24   Verifying  : groff-1.22.2-8.11.amzn1.x86_64                              2/24   Verifying  : unzip-6.0-4.10.amzn1.x86_64                                 3/24   Verifying  : python27-pyasn1-0.1.7-2.9.amzn1.noarch                      4/24   Verifying  : groff-base-1.22.2-8.11.amzn1.x86_64                         5/24   Verifying  : aws-cli-1.14.9-1.48.amzn1.noarch                            6/24   Verifying  : python27-six-1.8.0-1.23.amzn1.noarch                        7/24   Verifying  : python27-dateutil-2.1-1.3.amzn1.noarch                      8/24   Verifying  : python27-docutils-0.11-1.15.amzn1.noarch                    9/24   Verifying  : python27-PyYAML-3.10-3.10.amzn1.x86_64                     10/24   Verifying  : python27-botocore-1.8.13-1.66.amzn1.noarch                 11/24   Verifying  : python27-futures-3.0.3-1.3.amzn1.noarch                    12/24   Verifying  : python27-ply-3.4-3.12.amzn1.noarch                         13/24   Verifying  : python27-jmespath-0.9.2-1.12.amzn1.noarch                  14/24   Verifying  : mailcap-2.1.31-2.7.amzn1.noarch                            15/24   Verifying  : python27-backports-ssl_match_hostname-3.4.0.2-1.12.amzn1   16/24   Verifying  : libyaml-0.1.6-6.7.amzn1.x86_64                             17/24   Verifying  : python27-rsa-3.4.1-1.8.amzn1.noarch                        18/24   Verifying  : freetype-2.3.11-15.14.amzn1.x86_64                         19/24   Verifying  : python27-colorama-0.2.5-1.7.amzn1.noarch                   20/24   Verifying  : python27-setuptools-36.2.7-1.33.amzn1.noarch               21/24   Verifying  : which-2.19-6.10.amzn1.x86_64                               22/24   Verifying  : python27-imaging-1.1.6-19.9.amzn1.x86_64                   23/24   Verifying  : python27-backports-1.0-3.14.amzn1.x86_64                   24/24 Installed:   aws-cli.noarch 0:1.14.9-1.48.amzn1        unzip.x86_64 0:6.0-4.10.amzn1   which.x86_64 0:2.19-6.10.amzn1   Dependency Installed:   freetype.x86_64 0:2.3.11-15.14.amzn1   groff.x86_64 0:1.22.2-8.11.amzn1   groff-base.x86_64 0:1.22.2-8.11.amzn1   libjpeg-turbo.x86_64 0:1.2.90-5.14.amzn1   libyaml.x86_64 0:0.1.6-6.7.amzn1   mailcap.noarch 0:2.1.31-2.7.amzn1   python27-PyYAML.x86_64 0:3.10-3.10.amzn1   python27-backports.x86_64 0:1.0-3.14.amzn1   python27-backports-ssl_match_hostname.noarch 0:3.4.0.2-1.12.amzn1   python27-botocore.noarch 0:1.8.13-1.66.amzn1   python27-colorama.noarch 0:0.2.5-1.7.amzn1   python27-dateutil.noarch 0:2.1-1.3.amzn1   python27-docutils.noarch 0:0.11-1.15.amzn1   python27-futures.noarch 0:3.0.3-1.3.amzn1   python27-imaging.x86_64 0:1.1.6-19.9.amzn1   python27-jmespath.noarch 0:0.9.2-1.12.amzn1   python27-ply.noarch 0:3.4-3.12.amzn1   python27-pyasn1.noarch 0:0.1.7-2.9.amzn1   python27-rsa.noarch 0:3.4.1-1.8.amzn1   python27-setuptools.noarch 0:36.2.7-1.33.amzn1   python27-six.noarch 0:1.8.0-1.23.amzn1   Complete! Removing intermediate container 1f5293a2294d  ---> 5502efa481ce Step 3/6 : ADD fetch_and_run.sh /usr/local/bin/fetch_and_run.sh  ---> 1b69173e586f Step 4/6 : WORKDIR /tmp Removing intermediate container a69678c65ee7  ---> 8a560dd25401 Step 5/6 : USER nobody  ---> Running in e063ac6e6fdb Removing intermediate container e063ac6e6fdb  ---> e5872fd44234 Step 6/6 : ENTRYPOINT ["/usr/local/bin/fetch_and_run.sh"]  ---> Running in e25af9aa5fdc Removing intermediate container e25af9aa5fdc  ---> dfca872de0be Successfully built dfca872de0be Successfully tagged awsbatch-fetch_and_run:latest docker images 명령으로 새로운 로컬 repository를 확인할 수 있습니다.shell : docker images [ec2-user@AWS_BRANDI_STG fetch-and-run]$ docker images REPOSITORY TAG IMAGE ID CREATED SIZE fetch_and_run latest dfca872de0be 2 minutes ago 253MB amazonlinux              latest              81bb3e78db3d        2 weeks ago         165MB STEP3. ECR에서 repository 생성아래는 ECR 초기 화면입니다.fetch_and_run이란 이름으로 Repository 생성합니다. 3. Repository 생성이 완료되었습니다.STEP4. ECR로 빌드된 이미지를 pushECR에 docker login후 빌드된 Docker 이미지에 태그합니다. shell : aws ecr get-login --no-include-email --region ap-northeast-2 빌드된 docker 이미지에 태그하세요.shell : docker tag fetch_and_run:latest 000000000000.dkr.ecr.ap-northeast-2.amazonaws.com/fetch_and_run:latest 태그된 docker 이미지를 ECR에 push합니다.shell: docker push 000000000000.dkr.ecr.ap-northeast-2.amazonaws.com/fetch_and_rrun:latest 아래는 ECR fetch_and_run Repository에 푸쉬된 Docker 이미지입니다.STEP5. 간단한 샘플 스크립트(myjob.sh)를 S3에 업로드아래는 간단한 myjob.sh 스크립트입니다.#!/bin/bash date echo "Args: $@" env echo "This is my simple test job!." echo "jobId: $AWS_BATCH_JOB_ID" sleep $1 date echo "bye bye!!" 위의 myjob.sh를 S3에 업로드합니다.shell : aws s3 cp myjob.sh s3:///myjob.sh STEP6. IAM에 S3를 접속할 수 있는 ECS Task role 등록Role 등록 화면에서 Elastic Container Service 선택 후, Elastic Container Service Task를 선택합니다.AmazonS3ReadOnlyAccess Policy를 선택합니다.아래 이미지는 Role에 등록 하기 전 리뷰 화면입니다.Role에 AmazonS3ReadOnlyAccess가 등록된 것을 확인합니다.STEP7. Compute environments 생성AWS Batch 콘솔에서 Compute environments를 선택하고, Create environment 선택합니다.Compute environment type은 Managed와 Unmanaged 두 가지를 선택할 수 있습니다. Managed는 AWS에서 요구사항에 맞게 자원을 관리해주는 것이고, Unmanaged는 직접 자원을 관리해야 합니다. 여기서는 Managed를 선택하겠습니다.Compute environment name을 입력합니다.Service Role을 선택합니다. 기존 Role을 사용하거나 새로운 Role을 생성할 수 있습니다. 새 Role을 생성하면 필수 역할 (AWSBatchServiceRole)이 생성됩니다.Instnace Role을 선택합니다. 기존 Role을 사용하거나 새로운 Role을 생성할 수 있습니다. 새 Role을 생성하면 필수 역할(ecsInstanceRole)이 생성됩니다.EC2 key pair에서 기존 EC2 key pair를 선택합니다. 이 key pair를 사용하여 SSH로 인스턴스에 접속할 수 있지만 이번 글의 예제에서는 선택하지 않겠습니다.Configure your compute resources Provisioning Model은 On-Demand와 Spot이 있습니다. 차이점은 Amazon EC2 스팟 인스턴스를 참고해주세요. 여기서는 On-Demand를 선택합니다.Allowed instance types에서는 시작 인스턴스 유형을 선택합니다. optimal을 선택하면 Job queue의 요구에 맞는 인스턴스 유형을 (최신 C, M, R 인스턴스 패밀리 중) 자동으로 선택합니다. 여기서는 optimal을 선택하겠습니다.Minimum vCPUs는 Job queue 요구와 상관없이 Compute environments에 유지할 vCPU 최소 개수입니다. 0을 입력해주세요.Desired vCPUs는 Compute environment에서 시작할 EC2 vCPU 개수입니다. Job queue 요구가 증가하면 필요한 vCPU를 Maximum vCPUs까지 늘리고 요구가 감소하면 vCPU 수를 Minimum vCPUs까지 줄이고 인스턴스를 제거합니다. 0을 입력해주세요.Maximum vCPUs는 Job queue 요구와 상관없이 Compute environments에서 확장할 수 있는 EC2 vCPU 최대 개수입니다. 여기서는 256을 입력합니다.Enable user-specified Ami ID는 사용자 지정 AMI를 사용하는 옵션입니다. 여기서는 사용하지 않겠습니다.Networking VPC Id 인스턴스를 시작할 VPC를 선택합니다.Subnet을 선택합니다.Security groups를 선택합니다.그리고 EC2 tags를 지정하여 생성된 인스턴스가 이름을 가질 수 있게 합니다. Key : Name, Value : AWS Batch InstanceCreate을 클릭해 Compute environment를 생성합니다.아래 이미지는 생성된 Compute environment입니다.STEP8. Job queues 생성AWS Batch 콘솔에서 Job queues - Create queue를 선택합니다.Queue name을 입력합니다.Priority는 Job queue의 우선순위를 입력합니다. 우선순위가 1인 작업은 우선순위가 5인 작업보다 먼저 일정이 예약됩니다. 여기서는 5를 입력하겠습니다.Enable Job queue가 체크되어 있어야 job을 등록할 수 있습니다.Select a compute environment에서 Job queue와 연결될 Compute environment을 선택합니다. 최대 3개의 Compute environment를 선택할 수 있습니다.생성된 Job queue, Status가 VALID면 사용 가능합니다.STEP9. ECR을 이용하여 Job definition 생성AWS Batch 콘솔에서 Job definitions - Create를 선택합니다.Job definition name을 입력하고 이전 작업에서 만들 IAM Role을 선택하세요, 그리고 ECR Repository URI를 입력합니다. 000000000000.dkr.ecr.ap-northeast-2.amazonaws.com/fetch_and_runCommand 필드는 비워둡시다.vCPUs는 컨테이너를 위해 예약할 vCPU의 수, Memory(Mib)는 컨테이너에 제공할 메모리의 제한, Job attempts는 작업이 실패할 경우 다시 시도하는 최대 횟수, Execution timeout은 실행 제한 시간, Ulimits는 컨테이너에 사용할 사용자 제한 값입니다. 여기서는 vCPUs는 1, Memory(MiB)는 512, Job Attempts는 1로 설정, Execution timeout은 기본값인 100 그리고 Limits는 설정하지 않습니다.vCPUs: 컨테이너를 위해 예약할 vCPU의 개수Memory(Mib): 컨테이너에 제공할 메모리의 제한Jop attempts: 작업이 실패할 경우 다시 시도하는 최대 횟수Execution timeout: 실행 제한 시간Ulimits: 컨테이너에 사용할 사용자 제한 값User는 기본값인 nobody로 선택 후, Create job definition을 선택합니다.Job definitions에 Job definition이 생성된 것을 확인할 수 있습니다.STEP10. Submit job을 통해 S3에 저장된 작업 스크립트(myjob.sh)를 실행하기AWS Batch 콘솔에서 Jobs를 선택합니다. Job을 실행할 Queue를 선택하고 Submit job을 선택합니다.Job run-time1)Job name을 입력합니다.2)Job definition을 선택합니다.3)실행될 Job queue를 선택합니다.Environment Job Type을 선택하는 부분에서는 Single을 선택합니다. Array 작업에 대한 자세한 내용은 어레이 작업 페이지를 참고해주세요.Job depends on은 선택하지 않습니다.자세한 내용은 작업 종속성 페이지를 참고해주세요.Environment Command에서 컨테이너에 전달할 명령을 입력합니다. 여기서는 [“myjob.sh”, “30”] 를 입력해주세요. vCPUs, Memory, Job attempts와 Execution timeout은 job definition에 설정된 값을 가져옵니다. 이 Job에 대한 설정도 가능합니다.Parameters를 통해 job을 제출할 때 기본 작업 정의 파라미터를 재정의 할 수 있습니다. Parameters에 대한 자세한 내용은 작업 정의 파라미터 페이지를 참고해주세요.Environment variables는 job의 컨테이너에 환경 변수를 지정할 수 있습니다. 여기서 주의할 점은 Key를 AWS_BATCH로 시작하면 안 된다는 것입니다. AWS Batch에 예약된 변수입니다.Key=BATCH_FILE_TYPE, Value=script Key=BATCH_FILE_S3_URL, Value=s3:///myjob.shSubmit job을 선택합니다.Job이 Submitted 된 화면입니다.Dashboard를 보시면 Runnable 상태로 대기 중인 것을 확인할 수 있습니다.STEP11. 결과 확인CloudWatch > Log Groups > /aws/batch/job에서 실행 로그를 확인할 수 있습니다.Conclusion간단한 튜토리얼로 AWS Batch를 설정하고 실행하는 방법을 알아봤습니다.(참 쉽죠?) 다음 글에서는 AWS Batch의 Array 또는 Job depends on등의 확장된 기능들을 살펴보겠습니다. 참고1) AWS Batch – 쉽고 효율적인 배치 컴퓨팅 기능 – AWS2) AWS Batch 시작하기 - AWS Batch3) Amazon ECR의 도커 기본 사항 - Amazon ECR글윤석호 이사 | 브랜디 [email protected]브랜디, 오직 예쁜 옷만#브랜디 #개발문화 #개발팀 #업무환경 #인사이트 #경험공유

종이책과 비교했을 때 전자책의 매력 중 하나는 ‘형광펜’ 기능입니다. 책을 읽으며 원하는 구절에 형광펜을 남기면 모든 기기에 동기화가 되고, 이를 독서노트에서 한 번에 모아볼 수도 있습니다. 이러한 매력에도 불구하고 그동안 리디북스 형광펜 남기기 기능에는 고질적인 문제가 있었습니다. 그것은 페이지 마지막 문장에 형광펜을 남길 때 다음 페이지에 이어서 남길 수 없었다는 점입니다. 하지만 2016년 9월, iOS를 시작으로, 형광펜을 이어서 남길 수 있습니다. 이 기능을 ‘형광펜 이어서 남기기’ 라고 부릅니다.형광펜을 남기는 불편한 방법과 그 이유1. 개선 전 형광펜을 이어서 남기는 방법‘형광펜 이어서 남기기’ 기능을 추가하기 전, 두 페이지에 걸쳐있는 문장에 완전한 형광펜을 남기는 과정은 아래와 같습니다.1) ‘반대로 혼자서 무엇인가를~’로 시작되는 문장을 다음 페이지에 이어서 형광펜을 남기려고 했을 때 마땅히 다른 방법이 없습니다.2) 어쩔 수 없이 글자 크기를 줄여서 두 페이지에 걸친 문장을 한 페이지에 표시합니다.3) 형광펜을 남깁니다.4) 다시 눈에 편한 이전 글자 크기로 조정합니다.형광펜을 남기는 과정은 이같이 번거로웠습니다. 그래서 앞 페이지에 형광펜을 남기고, 문장이 끊긴 채로 다음 페이지에서 새로 형광펜을 남기는 사용자도 많았습니다.2. 불편함을 토로하는 사용자의 의견형광펜 이어서 남기기에 대한 의견은 ‘형광펜’과 관련된 많은 의견 중에서도 상당수를 차지했습니다.“완벽하게 형광펜을 남기려면 글자 크기를 줄이고 남겨야 하는데 귀찮고, 읽는 흐름이 끊겨서 불편합니다. 개선해주세요.”“페이지 간 형광펜을 이어서 남길 수 없다 보니 앞, 뒤 페이지에 따로 남기곤 합니다. 독서노트에서 문장이 가닥가닥 끊어져 있어서 보기 좋지 않네요. 독서노트에서 문장을 연결할 수 있게 해주세요.”“다음 페이지로 이어서 형광펜을 남기는 기능은 언제 추가되나요? 매번 형광펜을 남길 때마다 피곤합니다.”3. 형광펜 이어서 남기기가 가능하지 못했던 이유종이책과 달리 전자책은 절대적인 판형, 글자 크기, 문단 너비, 줄 간격 등이 존재하지 않습니다. 그러므로 사용자는 읽기 편하게 글자 크기를 늘리거나 줄 간격을 넓힐 수 있습니다. 이때 설정을 변경함에 따라 하나의 문장이 한 페이지에 존재할 수도, 두 페이지 또는 여러 페이지에 걸쳐 존재할 수도 있습니다.또 전자책은 모바일을 기준으로, 보통 화면에 한 페이지만 노출합니다. 연결된 하나의 문장이라도 화면에 보이지 않는 다음 페이지에 걸쳐 있다면 이어서 형광펜을 남길 수 없었습니다. (그래서 화면이 넓은 태블릿이나 PC 뷰어에서는 형광펜을 이어서 남기고자 하는 요구가 상대적으로 적었습니다.)글자 크기나 문단 너비, 줄 간격 등의 변수로 문장이 화면에 보이지 않는 다음 페이지에 걸쳐졌을 때, 이어서 형광펜을 남길 수 없었습니다.프로젝트의 조건1. 형광펜을 남기는 두 가지 방식 모두 자연스러워야 한다.리디북스 뷰어에서는 핸들로 문장을 선택하여 남기는 방식, 미리 선택하지 않고 문장을 누른 채로 드래그하여 바로 형광펜을 남기는 방식(이하 오토 하이라이트), 총 두 가지 방식을 지원하고 있습니다. 이 두 가지 방식 모두 자연스러워야 했습니다.핸들로 문장을 선택하여 형광펜을 남기는 방식(좌측), 문장을 누른 채로 드래그하여 바로 문장에 형광펜을 남기는 방식(우측), 총 두 가지를 지원하고 있습니다.2. 가능한 익숙한 UX여야 한다.뷰어는 책 읽기에 집중할 수 있도록 문장으로만 채워져 있습니다. 설명이 필요한 낯선 요소가 들어갈 경우, 설명에 문장이 가려져 독서에 방해가 될 수 있으며 사용자는 새로운 사용법을 익혀야 합니다. 최대한 학습이 필요 없는 익숙한 UX를 지향했습니다.위 두 가지 조건을 모두 만족하는 리디북스만의 방식을 찾아야 했습니다.개선된 ‘형광펜 이어서 남기기’ 방법두 페이지에 걸쳐있는 문장에 형광펜을 남기는 두 가지 방법은 이러합니다.1. 첫 번째 방법1) 페이지 마지막 문장까지 선택하면, ‘문장 이어서 선택하기’ 에디트 메뉴가 뜹니다.2) 메뉴를 누르면 다음 페이지로 넘어가고 해당 문장이 끝나는 마침표까지 자동으로 선택됩니다.3) 이어 ‘형광펜 / 메모’ 에디트 메뉴가 뜨고 그 상태에서 ‘형광펜’을 누르면 됩니다.2. 두 번째 방법1) 오토 하이라이트로 페이지 마지막 문장까지 형광펜을 남기면, ‘형광펜 이어서 남기기’ 에디트 메뉴가 뜹니다.2) 메뉴를 누르면 다음 페이지로 넘어가고 나머지 과정은 첫 번째 경우와 같습니다.문제 해결 과정1. 문장 선택 방법 결정하기형광펜을 남기는 두 가지 방식을 모두 지원하면서 익숙한 UX가 되려면 두 가지 방식에서 사용하는 요소여야 했습니다. 함께 고민하던 개발자님이 떠올린 아이디어는 핸들(Handle) 이었습니다.문장 선택 시 사용하는 핸들을 HIG(Human Interface Guidelines)에는 따로 명시되어 있지 않지만, iOS에서 코드상으로는 그래버(Grabber), 일반적으로는 핸들(Handle)이라 부르며 Android에서는 텍스트 셀렉션 핸들(Text selection handles)이라 부릅니다.에디트 메뉴를 띄워서 핸들로 문장을 선택하는 방식은 기존에 이미 핸들을 사용하고 있으므로 다음 페이지로 넘어가 핸들로 원하는 문장까지 선택하는 것은 자연스러웠습니다. 앞 페이지에서 오토 하이라이트로 형광펜을 남기고 페이지가 넘어간 후, 다음 페이지에서 핸들이 나타나는 것은 처음엔 다소 어색하게 느껴졌습니다. 하지만 기존에 쓰고 있는 요소여서 낯설지 않았고 사용 방식 또한 익숙해서 어렵지 않게 다가왔습니다.2. 세부사항 결정하기프로토타입을 기반으로 UI 디자이너가 모여있는 UI 길드와 사내에서 다양한 피드백을 받았습니다. 그 후, 다듬고 수정하는 과정을 거쳐 세부사항을 결정하였습니다.1) 레이블 결정하기형광펜과 결합하여 사용할 수 있는 동사는 ‘하다’, ‘치다’, ‘칠하다’, ‘긋다’, ‘남기다’ 등 생각보다 많습니다. 그렇다 보니 사용자뿐만 아니라 사내에서도 같은 기능이지만 다르게 불리곤 합니다. 여러 가지 동사 중, 형광펜과 밑줄에 모두 어울리는 동사가 필요했습니다. ‘하다’는 광범위한 행동에 사용됩니다. ‘치다’와 ‘긋다’는 형광펜보다는 밑줄과 더 잘 어울리며, ‘칠하다’는 형광펜에만 어울립니다. ‘남기다’가 형광펜과 밑줄에 모두 어울리고 ‘독서노트에 남긴다’라는 의미로도 맞아서 레이블에 형광펜과 결합하여 사용할 동사로 결정하였습니다.2) 맥락에 맞는 레이블 메뉴 구성‘남기다’로 동사를 결정한 후, ‘형광펜 이어서 남기기’로 에디트 메뉴 레이블을 결정했습니다. 밑줄로 남길 때는 형광펜에 해당하지 않으므로 상황에 맞게 ‘밑줄 이어서 남기기’ 레이블로 변경하였습니다. 또 문장을 선택해서 형광펜을 남기는 경우도 문장 선택을 먼저 하므로 맥락에 맞지 않았습니다. 이 경우에는 ‘문장 이어서 선택하기’라는 레이블로 변경하였습니다. (개선된 ‘형광펜 이어서 남기기’ 방법 항목 참조)‘문장 이어서 선택하기’ 에디트 메뉴에는 ‘형광펜’, ‘메모’, ‘듣기’, ‘정의’, ‘검색’, ‘공유’ 등 기존 에디트 메뉴도 함께 보여줘야 했습니다. 다음 페이지로 넘어가지 않고 마지막 문장까지만 형광펜을 남길 수도 있고, ‘듣기’나 ‘공유’ 등 다른 에디트 메뉴 기능을 사용하는 상황도 있을 수 있기 때문입니다. 하지만 페이지 마지막 문장이 끊기지 않고 마침표로 완전하게 마무리되는 경우는 많지 않았습니다. 그래서 ‘마지막까지 문장을 선택한다면 다음 페이지로 이어서 문장을 선택하고 싶다’는 가설을 세웠습니다. 그리고 ‘문장 이어서 선택하기’에 집중할 수 있도록 다른 메뉴는 감추고 한 단계를 더 거쳐 선택하도록 하였습니다.한 번에 많은 메뉴가 노출되면 선택에 집중하기 어려웠습니다. 그래서 마지막 문장까지 선택한 경우, 다른 메뉴는 감춰 문장 선택에 집중할 수 있도록 하였습니다.3) 에디트 메뉴의 위치처음 에디트 메뉴 위치는 커스텀이지만 OS와 유사한 위치를 사용했습니다. 어디서부터 선택하는지, 어느 정도 선택하는지에 따라서 자동으로 에디트 메뉴의 위치가 달라집니다. 또 선택한 문장과 겹치지 않게 선택된 문장의 위나 아래에 위치합니다. 그렇다 보니 페이지 마지막 문장까지 선택했을 때 손을 뗀 자리가 아닌 문장과 겹치지 않는 먼 위치에 에디트 메뉴가 떠서 어색했습니다. 그래서 손을 뗀 가까운 곳으로 에디트 메뉴 위치를 변경하여 바로 다음 페이지로 넘어갈 수 있게 하였습니다.OS에서 제공하는 에디트 메뉴의 위치에서, 사용하기 편하도록 에디트 메뉴의 위치를 마지막 문장이 끝나는 지점과 가깝게 옮겼습니다.4) 다음 페이지로 넘어간 후 선택해줄 문장의 범위페이지가 넘어간 후, 문장이 끝나는 마침표까지 선택해줄 경우, 문장이 해당 페이지에서 끝나지 않을 수 있습니다. 그래서 처음에는 다음 페이지의 시작 문장에서 다섯 글자까지만 선택해주었습니다. 하지만 문장이 페이지를 넘어가는 경우가 더 적어서 마침표까지 선택해주는 것이 형광펜을 남기는데 더 편리했습니다. 또 문장이 해당 페이지를 넘어간다면 다시 ‘문장 이어서 선택하기’ 에디트 메뉴를 노출하여 다음 페이지로 이어서 선택할 수 있게 하면 되므로 문장을 마침표까지 선택해주었습니다.다음 페이지로 넘어갔을 경우, 해당 페이지 안에서 문장이 끝나는 경우가 많았지만 문장이 끝나지 않고 그다음 페이지로 넘어가는 경우에도 대응해야 했습니다.마치며2016년 9월로 페이퍼까지 형광펜 이어서 남기기가 추가되었습니다. 리디북스 내 ‘묵은지’라 불리던 이 문제를 해결하여 더는 형광펜으로 고통받지 않아도 될 분들을 생각하면 기쁩니다.마지막으로 해결하기 어렵다고 생각한 형광펜 이어서 남기기를 구현해주신 리디북스 iOS 개발자님에게 감사를 표합니다.참고 문헌[1] Apple Inc. “Edit Menus - UI Controls - iOS Human Interface Guidelines” Last modified 2016. [2] Google (2016). “Selection - Patterns - Material design guidelines” Last modified February, 2016. [3] 이광희. ePub(이펍) 제작 테크닉. 서울: 비엘북스, 2012.#디자인 #UX #UI #UX디자인 #UI디자인 #사용개선 #유저중심 #리디북스 #UserExpirience #UserInterface #사용성 #후기

주변 개발자들의 삶이 매우 행복을 추구하는 삶으로 변해가고 있다는 것을 느낀다. 주변의 개발자들의 모습을 몇 가지 정리해보자. 이를 '지속 개발을 위한 개발자 Life 스타일'이라고 정의하겠다.개발자#A10년 넘게 개발하던 패키지를 기반으로 필요 기능을 최소화하여 1인 개발기업에 성공하였고 제주도로 내려가서 지역에 속한 분들과 호흡하는 삶을 추구하면서도 소프트웨어 개발의 핵심을 잃지 않았다. 정말, MVP 기능에 최대한 집중하면서 필요한 시장 영역을 더 확대하지 않고, 소프트웨어를 개발하고 있는 개발자와 해당 소프트웨어를 사용하는 고객과 시장에 대해서 같이 합리적으로 지속할 수 있는 지속할 수 있는 소프트웨어 개발의 삶을 이루었다.그리고, 그러한 Life환경을 주변에 전파하면서 불과 얼마 전 또 한 명의 구 루급 개발자에게 비슷한 삶의 길을 가르쳐준다. 정말 부러운 개발자들...개발자#B복잡한 업무나 더 많은 보수를 위해서 더 좋은 회사를 찾기보다는 삶이 존재하는 근무시간을 위해서 재택근무를 찾고 있다. 비용도 최대한 낮추면서 생활을 위한 회사를 찾아다니고 있다. 아무래도, 외국계 개발회사를 선택할 것 같다.개발자#C오픈소스 진형에서 인정받는 개발자이다. 본인이 원하는 오픈소스 프로젝트를 추진하는 것을 보장받고 외국계 기업의 원격근무를 선택했다. 보수도 나쁘지 않고, 근무시간은 알아서 하는 것이지만, 원격으로 일하는 것이기 때문에 '능력'을 보여주기 위해 더 많은 시간을 소프트웨어 개발에 투자한다. 굳이, 서울 시내에 있을 필요가 없기 때문에 외각으로 집도 옮겼다.개발자#D일부러, 실리콘 벨리의 스타트업을 선택했다. 조만간 상장 예정인데 매우 큰 혜택을 받을 것 같다. 그 역시 지속 개발이 가능한 삶을 추구한다.2016년 올 초의 개발자 트렌드는 '지속 개발을 위한 Life'를 지향하는 개발자들이 늘어났다고 평가해본다.우리 모두 지속개발이 가능한 삶을 지향해 보는 것은 어떨까나...

한껏 몸을 움츠러들게 하는 추위에도 불구하고, 열기를 더해가고 있는 임팩트 베이스캠프! DT프로젝트 팀별 인터뷰 두 번째 이야기로 찾아왔습니다.오늘 만나볼 팀은 강명지, 김산하, 이예석, 이철빈 베이스캠퍼가 속해있는 E조입니다. 다른 성향의 팀원들이, 어떤 사회적 문제를 해결하고자 함께 모여 시너지를 내고 있는지 인터뷰를 통해 확인해주세요!INTERVIEW .Q1. 하나의 키워드로 본인에 대해 소개해주세요!Q2. 우리 팀이 바라는 더 나은 세상은 어떤 모습이며, 해결하고 싶은 사회적 문제는 무엇인가요?명지: 우리 팀이 문제를 정할 때 가장 중요하게 생각했던 것은 ‘과연 이 문제가 우리 마음을 움직이는가?’였어요. 의견을 나누는 과정에서 ‘누군가는 당연히 누리고 있는 걸 누리지 못하는 사람들’에게 집중하게 되었고, 구체적으로는 [장애인의 스포츠 활동 부족]을 해결하고 싶은 사회적 문제로 선정하게 되었습니다. 여가활동이란 개개인의 삶에 활력을 불어넣고, 우리를 사회적 동물로 만들며 자아를 실현할 수 있는 한 가지 방법이라고 생각해요. 그런데 아직도 누군가에게는 이러한 여가활동이 사치인 거죠.철빈: 저희 팀은 행복이 모두에게 당연한 것이 되는 세상을 꿈꾸고 있는데요. 이번 DT프로젝트를 통해 조금 더 많은 사람이 행복을 누렸으면 좋겠어요.Q3. 현재까지 팀 내 프로젝트 진행상황이 궁금해요.장애인의 스포츠 활동에 대한 '접근성' 문제를 풀고 싶어요.철빈: 장애인 복지관 체육 교사, 민간 스포츠센터에서 장애인을 대상으로 스포츠 프로그램을 운영하시는 분을 인터뷰했어요. 우선 인터뷰를 통해 얻은 인사이트와 피드백을 나눴는데요. 이후에는 로지컬 씽킹 특별 수업을 듣고, 팀원 각자 로직 트리를 만들면서 이 주제의 문제는 무엇이고 우리는 어떻게 접근할 것인지 서로 생각을 정리해 오기로 했습니다. 인터뷰 직전, 팀 회의를 통해 정리해온 내용을 공유하고 왔어요. 공유 결과, 우리가 이 문제를 어떤 방향으로 접근할 것인지 결정하게 되었습니다. 장애인 스포츠 활성화라는 주제에서, ‘장애인들이 어떻게 스포츠 시설을 잘 이용할 수 있을까’라는 접근성에 관한 이야기로 좁혀졌거든요. 왜 지금까지 스포츠 시설에 대한 접근이 잘 이루어지지 않았는지 이유를 찾는 중이에요. 예를 들어 시설은 있지만, 경제적으로 잘 배분되지 않고 수요나 공급이 불균형했던 건 아닌지, 교통 약자들이 물리적으로 접근하기에 쉽지 않았던 건 아닌지에 대한 것들이요.▲ 팀 토론 이전에 각자의 생각을 정리하고 있는 E조의 모습Q4. 구체적으로 인터뷰를 통해 얻은 인사이트 혹은 배운 점은 무엇인가요?명지: 저희 팀이 처음 이 문제를 논의할 때 장애인을 위한 체육시설 혹은 그들을 가르칠 강사를 포함한 인프라가 부족할 거라고 예상했는데요. 막상 인터뷰를 해보니 인프라가 부족한 것은 문제점이 아니었고, 이미 있는 시설이 잘 활용되지 못하고 있다는 점에 초점을 맞추게 되었어요.산하: 인터뷰를 진행할 때 팀원들 모두 각자의 역할이 있었다는 점이요. 첫 번째 인터뷰를 했던 분은 저희에게 호의적이셨지만 질문이 추상적이면 답변이 어려우실 것 같다고 생각했어요. 그래서 저희는 운동기구에 대해 구체적인 설명을 요청했고, 인터뷰이(Interviewee)께서 예시를 들어 잘 말씀해 주셨어요. 놓칠 뻔한 부분과 보충이 필요한 부분은 팀원들이 잘 집어준 것 같아요.Q5. Design Thinking(디자인씽킹, 이하 DT)수업과 Strategical Leadership(전략적 리더십의 실천, 이하 SL)수업을 병행하는 소감은 어떠신가요?DT수업은 저를 앞으로 나아가게 하고,SL수업은 목적에 맞게 잘 가고 있는지 돌아보게 하는 것 같아요.▲ 임팩트 베이스캠프 OT, 첫 만남을 가진 E조명지: DT는 저를 달리게 하고 SL은 저를 멈칫하게 하는 것 같아요. 저는 생각과 아이디어가 진짜 많아서 기획하는 것을 좋아해요. 그런데 항상 거기서 멈췄었거든요. 그런데 DT 수업은 그 아이디어를 발전시키고 실천하게끔 끌어내게 하고, SL은 그 아이디어가 목적에 맞게 잘 가고 있는지 왔던 길을 둘러보고, 다시 방향을 설정하게 해주는 수업인 것 같아요.철빈: 익숙한 것과 낯선 것이 차이라고 생각해요. DT 수업은 편하고 재미있어요. 그 속에 분명 배움도 있고요. 그런데 SL수업은 지금껏 듣거나 보지도 못한 수업이에요. DT프로젝트를 진행하면서 전략적으로 사고하고 어떻게 리더십을 발휘할지 더듬거리면서 찾아가고 있어요. 그런데 헤매는 이 과정이 되게 소중하고 신선해요.예석: 저는 오히려 반대에요. SL 수업이 평소 제가 사고하는 방식과 비슷한 것 같아요. 아직 두 수업을 어떻게 엮어야 하는지 모르겠지만 모두 삶에서 꼭 필요한 능력이라는 생각이 들었어요. 디자인씽킹을 통해 문제해결 능력을 함양하는 것과 공동체를 이끌거나 개인이 살아가는데 전략적으로 사고하고 행동하는 능력을 갖추는 것, 이 두 가지 모두 갖춰야 한다고 느꼈어요.Q6. 그렇다면 번외 질문을 하나 드릴게요. 팀 내에서 개인이 취하고 있는 전략은 무엇인가요?예석: 인지하지 못한 상태에서도 전략을 세우는 게 사람이라고 생각하는데, 저도 분명 팀에서 취하는 전략이 있겠죠. (침묵) 잠시만요. 어떤 전략이 있었나 복기 중이에요. (웃음) 개인 사정상 이번 인터뷰에 팀원들과 함께 가지 못했어요. 그 미안함을 만회하고자 프로토타입 수업만큼은 누구보다 열정을 가지고 열심히 하는 모습을 보여줘야겠다는 목표를 세웠습니다.산하: 우선 제 전략은 모든 수업과 모임에 성실하게 참여하는 것이에요. 아이디어를 제시하는 건 저에게 어려운 부분이라 팀원들의 이야기를 듣고 덧붙여 말하거나 그 아이디어를 조금 더 발전시켜주는 것이 팀 내에서의 제 전략인 것 같아요.▲ 인터뷰를 마친 E조의 모습좋은 프로젝트는 조화로운 팀워크의 바탕에서 나오는 것처럼, 좋은 변화를 꿈꾸는 팀원들로 똘똘 뭉친 E조가 임팩트 베이스캠프에 참 잘 어울리는 팀이라는 생각이 듭니다. 인터뷰 과정과 로지컬 씽킹을 통해 문제를 구체적으로 정의하고자 치열하게 고민했던 E조가, 어떤 빛나는 아이디어로 문제를 해결하게 될지 임팩트 베이스캠프도 응원하겠습니다. #루트임팩트 #임팩트베이스캠프 #청년 #체인지메이커 #디자인씽킹 #전략적리더십   #사회문제해결 #헤이그라운드

사실 저렇게 거창한 제목으로 글을 쓰기에는 아직 paffem이라는 브랜드가 확고히 자리잡지도 않은 상황이고, 또한 성공하지도 못한 상황이라 이런 제목으로 글을 쓴다는 것이 조금 부담스럽지만.. ^^;;그래도 어떤 "정답"을 알려준다기 보다는 그간의 경험을 공유하는 글을 써보고 싶었습니다.회사를 운영하면서 정했던 몇몇 가지 운영 원칙 중 하나는.... 멋진 브랜드들을 찾아보고 benchmark 해보자는 것이었다. 2주에 한 곳씩 방문하자는 결심을 했고, 정확히 2주 간격을 지키지는 못했지만 몇몇 회사를 다녀왔다. SNOWPEAK, LUSH, IKEA를 다녀왔고,  그중 앞 두 가지 브랜드는 Magainze  B에서 다루었던 브랜드였다. 그래서 우리의 벤치마킹의 이름은 #파펨의시선via매거진B 라  정하였으니...!!1. SNOWPEAK : 브랜드 이미지, 창업스토리, 제품 등이 하나로 연결되는 힘!스노우피크는 캠핑용품의 대명사와 같은 존재로 엄청난 가격으로 인해 조금 욕을 먹기도 하지만, 그래도 그만한 가치를 한다는 제품. 목동에 있는 본사 매장에 찾아가서 느꼈던 것은.... 모든 것이 잘 연결되어 있다! 브랜드가 가진 느낌, 그리고 그것을 만드는 사람들의 고민, 제품의 소재, 무게감 등에서 느껴지는 스토리들이 하나로 잘 연결되어 있다는 것이 가장 큰 lesson 이었다. 게다가 제품  하나하나에서 느껴지는 미학적인 "예쁨 ^^;;" 이 느껴지는데.. 그것이 그냥 예쁘게 만드는 것이 아니라, 고객의 편의와 가치를 위해 발전한 것이라는 점에서 놀라지 않을 수 없었다.목동에 있는 스노우피크 코리아 HQ lounge저 자신감!!! >.<소재를 선택하고, 그것을 스노우 피크의 브랜드와 함께 고객이 필요한 제품으로 녹여내는 능력!!재미있는 소재의 컵! 깨질 염려가 없다파펨이라는 신생 브랜드 또한, 브랜드 로고, 가격, 제품, 패키지, 대표 색상 등등에 있어... 어느 정도 align이 되어 있다고 생각했지만, 스노우피크를 보니 참 부족했고, 여기에 다녀온 후 패키지 업그레이드 및 "Industrial" concept을 제품의 이미지로 적용하고, 마케팅 campaign과도 연결시켜야겠다는 결정을 하고 실천하게 되었다.2. LUSH : 브랜딩은 억지로 하는 것이 아니라.. 그냥 맘속에 가진 것을 풀어놓는 것!러쉬는 영국의 코스메틱 브랜드로 자연에서 얻은 성분과 안전한 화학성분을 사용하는 제품이며, 또한 동물실험 반대를 주장하는 것으로 유명한 브랜드이다. 그래서 광화문에서 진행된 러쉬의 동물실험 반대 행사에 참가해보게 되었는데, 이전까지는 굉장히 공격적인 message와 적극성을 표현하였다면 (예, 피 흘리는 토끼 등등), 이번 행사에서는 조금 더 어린이들에게 친숙할 수 있는 소재와 스토리를 활용하였다고 한다. 여기서 느꼈던 포인트는... 이런 행사를 전 세계적으로 매년 진행하고, 끊임없이 그러한 message를 주장하는 배경에는.."그 사람들이 그냥 그런  사람" 이라는 것이다. 조금 표현이 애매한데.. 러쉬의 창업자들은 고객들에게 잘 보이기 위해 또는 브랜드 이미지 개선을 위해 동물 실험 반대를 주장하는 게 아니라, 그저 그 생각을 가진 사람들이었고, 본인들의 브랜드에 그 philosophy를 잘 녹여내었던 것이다.내 주변의 많은 국내 브랜드들이.. 어떻게 하면 고객이 우리를 예쁘게 봐줄까? 혹은 좋은 브랜드, 착한 브랜드로 인식하게  할까?라는 고민을 통해 어떤 캠페인을 전개하고 광고를 하는 것과는 근본적인 차이가 있다.Fighting Animal Testing : 만들어낸 것이 아닌.. 그들의 본성찰흙과 같은 소재의 비누로 만들어 아이들이 재미있게 체험할 수 있게 만든 샤워용 제품매년 끊임없이 이런 일을 할 수 있다는 것은... 그것이 본질 이기에!!과거 동물 실험 반대 퍼포먼스는 좀 무서웠다고 한다.... ㅡㅡ;;;그래서 파펨에서도 founder들이 어떤 사람인가를 고민하기 시작했다. 우리는 굳이 애써 착해 보이는 브랜드를 우리의 본성에 반하여 만들고 싶지 않았고, 또한 남들을 도와 착한 브랜드로 보이기를 원하지 않았다. 그저 우리가 누구인가?라는 질문을 하다 보니...첫번째로는 "착한척하지 말자" 였다.말이 좀 공격적인데.. 그렇지 않은 브랜드들도 많지만, 요즘 몇몇 브랜드들이 이런 "착한척"을 마케팅에 이용하는 경향이 있어 보인다. 본인들의 제품을 구매하면, 아프리카 아이들에게 하나를 보내줍니다.무엇이 먼저인가? 이 제품을 팔아보겠다고 아프리카 아이들을 이용하는 것은 아닌가? 그렇다고 한들... 어려운 사람들에게 실질적인 도움이 간다는 것은 긍정적인 것이 아닌가?이런 저런 생각들이 들지만..만약 저런 도움을 주고 싶었다면.. 그 도움이라는 생각이 먼저 움직이고, 즉 진심이 먼저이고.. 그 것을 실행할 수단으로써의 고민이 "착한" 마케팅이 되었드면 한다는 것이다. 진실하지 못한것은 진짜 value를 만들어 낼 수 없다는 생각.우리는 우리가 해결하고 싶은 problem을 해결하는 방향으로, 또한 우리의 소비자가 진심으로 공감할 수 있는 방향으로 이러한 것들을 발전시켜 나가고 싶은 생각이다.3. 이케아 : 고객에게 재미를 주는 상품과 진열사무실 열쇠 분실을 계기로 그냥 이케아 광명점으로 갔던 날이 있었다. 개미굴로 유명한 이케아에 가서 하나하나 쇼핑을 하다 보니.. 큰 쇼핑카트가 넘칠 정도였는데, 정말 재미있는 쇼핑 체험이었다. 사실 이케아에 대한 공부가 없이 방문하게 되었고, 그냥 사무실에서 사용할 플라스틱 box를 사러 갔던 것인데,  이런저런 구경에 시간 가는 줄 몰랐다. 그렇게 구경을 하면서 느꼈던 것이.. 고객이 제품을 체험하면서 느끼는 즐거움과 또한 그 즐거움을 전달하는데 있어서 "군더더기 없음"이 이케아의 매력으로 다가왔다.사실 이케아라는 브랜드가 담고 있는 많은 메시지들을 사진에 담아왔으나.... 당시 original 스마트폰 고장으로 다른 폰으로 찍어 몇장 남아있는게 없다는 슬픈 사실..이케아를 다녀오고 나서 paffem에 영향을 준 것은 아직  구체화되지는 않았지만, Service design 측면에서 많은 고민을 하고 있다. 고객들이 우리의 제품을 알게 되고, 구매하고, 제품을 받아 사용하고 즐거움을 얻는 과정들에 있어 어떤 요소들을 제공할 것인지? 또한 그  사이사이에 어떤 재미 요소를 넣어볼 것인지에 대한 고민들이 지금 paffem의 고민 중 하나의 큰 축이다. 게다가 그 과정에서 불필요한 에너지의 낭비 및 감정의 낭비 없이 그것들을 어떻게 전달할  것인가?라는 고민은... 고객에게 파펨을 어떻게 즐거운 습관으로 인지하게 할 것인가에 대한 큰 숙제에 대답을 하는 과정 중에 있다.네 번째로는 이번 주에... 매거진 B에서 소개한 가구 브랜드 "비트라"에 가볼 예정이다. ^^;;마지막으로.. 브랜딩에 대한 이야기를 정리하자면.. (이건 나의 개인적인 의견으로써)브랜딩이 참 멋져보이는 단어이고 거창할 수 있는 것이지만.. 나에게는 아기를 하나 낳아 키우는 작업이라는 생각이다. 아이를 낳아 보살피고, 또한 아프지 않게 잘 캐어하여.. 조금 성장하게 되면..이 아이가 어디 가서 예쁨 받게 하고 싶고, 또 어디 가서 무시당하거나 또는.. 미운 오리 새끼가 되지 않게 만들고 싶은 것이 부모 생각이다. 그렇게 하기 위해서 맛있는 것도 잘 먹이고, 또 예쁜 옷도 입히고.. 예절에 대해서 교육하고...Brand building 또한 이런 과정과 동일하다는 생각이다. Paffem이라는 브랜드를 만들면서, 정직한 아이가 되었으면 했고, 어디에 내놓아도 빠지지 않는, 하지만 허세는 없는.. 그래도 고집은 있어서 자기의 주장을 가져갈 수 있는... 또한 "어디 가서 꿀리지 않는 ^^;;" 그런 브랜드로 만들고 싶다는 생각이다.내가 아빠라는 역할을 처음 해봤듯, 파펨에게도 첫 (내가 만든) 브랜드 owner이고 이 아이를 잘  키워야겠다는 고민은 끝이 없다.#파펨 #스타트업 #창업가 #창업자 #마인드셋 #인사이트 #브랜딩

어느 순간부터더부스 브루잉의 로고가 바뀐 것알고 계셨나요?많은 분들이궁금하셨을 거예요. 어느 순간,갑자기 등장한파란색의 정체불명(?)의형태가 무엇인지.바로더부스 브루잉의 새로운 로고입니다!많은 질문을 받았어요.외계인인가요?아니면 하이힐?심지어강아지 똥?같다는 분도 계셨죠.더부스 새로운 로고의 의미,아래 영상을 보시죠너무 짧다고요?그럼 이제부터친절히 설명해 드릴게요. 마음을 채우다더부스는 경리단 15평 공간의 작은 펍에서 시작했어요. 모든 사람들이 ‘괜찮은’ 가격에 크래프트 비어의 즐거움을 누리게 하고 싶다는 마음 하나로 덜컥 시작한 펍이죠. 근데 가진 건 정말 “의지” 하나 밖에 없었어요. 원래 한의사, 기자, 투자 자문사였던 사람들이니까요. 당시에는 맥주 전문가가 아니었죠. 그래서 더부스 시작 당시 사실 ‘오리지널’ 더부스라고 말할 만한 것은 하나도 없었어요. 맥주 양조 방법은 빌에게서 빌려왔고, 다른 양조장의 시설과 인력을 빌려 맥주를 빚었죠. 많은 사랑을 받은 피자는 홍대의 몬스터피자에서 빌려왔고요. 하지만 우리의 바람대로 더부스에서 잔과 잔을 부딪히며 크래프트 비어를 즐기는 사람들이 많아질수록, "진짜 우리가 직접" 맥주를 만들어 갈 수 있었어요. 경리단 작은 펍에서 잔과 잔이 부딪히며, 서로의 마음을 채워주기 시작했죠!변화를 만들다더부스팀은 오늘이 있기까지 남들이 가지 않은 길에 도전하였고, 많은 변화를 이뤄냈어요. 그중 하나는, 처음에는 모두가 미쳤다고 했지만, 더부스팀이 유통하는 모든 맥주들의 맛을 "신선하게" 관리하기 위해 맥주가 생산되는 벨기에, 덴마크, 미국에서부터 서울까지 "냉장상태"로 맥주를 가져오기 시작한 거예요. 또 세계적인 브랜드 미켈러와의 콜라보레이션으로 "대동강"이라는 맛있는 맥주도 만들었구요. 지난 ’15년 9월에는 크라우드 펀딩인 8퍼센트를 통해 투자자를 모집하여 단 몇시간만에  "10억원의 투자금액"을 유치하는 저력을 보여주었습니다. 더부스 팀은 이 자금을 활용해 캘리포니아 유레카 지역의 양조 시설을 인수했고, 이제 더 놀라운 맥주를 본격적으로 생산하기 위해 준비중이에요.크래프트 비어를 만들고 판매하는데 멈추지 않고 한국 맥주의 변화를 이끌어 가기 위해 항상 노력하며, 크래프트 비어와 공유할 수 있는 문화를 즐겁고 의미 있는 방법으로 실현시키고 있는 회사. 바로 더부스 브루잉 입니다.사랑을 이루다이건 보너슨데, 아시죠? 더부스를 시작할 때 연인 관계였던 두 대표 희윤님과 성후님은 결국 사랑의 결실을 맺었다는 거!더부스 브루잉의 새로운 변화는 로고의 변신에서 멈추지 않고, 더욱 질 좋고 신선한 맥주와 상상을 넘는 이벤트로 찾아갈 거예요.우리의 두들 가이는 영원히 사라지지 않아요. 지금도 새로운 로고 속에서살아 숨 쉬고 있답니다. Make This Happen!#더부스브루잉컴퍼니 #창업자 #스타트업창업 #창업가 #인사이트 #히스토리 #브랜드 #브랜딩 #로고 #로고디자인

스푼을 만드는 사람들 여덟 번째 이야기마이쿤 긍정의 아이콘! 늘 밝은 'Jane'을 소개하고자 한다.제인은 항상 웃고 있던데, 비결이 뭔가요?제인은 사내에서 가장 긍정적이고, 늘 밝게 웃고 있는 사람. 어디선가 누군가 행복하게 웃는 소리가 나서 뒤 돌아보면 늘 제인이다. 그래서 너무 궁금했다! 어떻게 무엇이 제인을 늘 웃게 할 수 있는지. 어떻게 늘 긍정적일 수 있는지!제인 曰:제 인생의 좌우명이 '나로부터 남에게 좋은 기운을 주자' 이거든요. 저는 그래서 늘 밝게 남에게 좋은 에너지를 주려고 노력해요. 무엇보다 기분이 나빠지면 그걸 오래 가지고 있지 않고 싶어요. 나쁜 감정이 오래되면 제 스스로에게만 손해이고, 사실 원래 저는 되게 단순한 편이에요!제인의 꿈은 '컬러리스트' (출처: 구글)'Jane' 당신이 궁금합니다.Q. 본인을 한 마디로 표현한다면?진(Jin) 데렐라 - "통금시간이 23:00입니다. 그래서 회사분들이 지어주신 별명이에요."Q. 동안 오브 동안의 비결은?(제인에게 그녀의 동안 비결을 물어보았다. 워낙 동안이 많은 마이쿤 식구들이지만, 그중에서도 제인은 정말 역대급 베이비 페이스를 소유하고 있기 때문)"전 제가 동안인지 모르겠어요. 근데 제가 그렇게 동안인가요? 비결이라.. 굳이 꼽자면, 저의 얼굴형 아닐까요? 동글동글해서.. 아! 그리고, 저 술 마시러 가면 100프로 중 85프로는 민증 검사받아요. 회사 앞에서도 하더라고요 하하.."Q. 본인이 제일 잘하고 좋아하는 건?"저는 원래 의상 디자이너 학과를 전공했어요. 이유는, 의상을 좋아해서 진학하게 되었고 제가 가장 잘한다고 생각하는 건 '컬러리스트'입니다. 제가 가장 오래 준비하기도 했고, 제일 하고 싶은 것이거든요. 그래서 옷 입을 때 색깔 맞추는 것도 좋아하고 잘하는 편이에요. 여러 가지 소품이라던지 어울리는 곳에 어울리는 색깔에 맞추거든요!"깔끔하고 정직한 제인의 업무 자리당신의 회사생활이 궁금합니다Q. 파트타임에서 풀타임으로 전환하기까지"저는 현재 마이쿤에서 근무한 지 1년 하고 2개월째입니다. 와 시간 진짜 빠른 것 같아요. 벌써 이렇게나 시간이 흘렀다니.. 처음에 저는 원래 파트타임으로 마이쿤에 왔었어요. 그때 한참 취준생이었는데, 취업 준비하면서 했던 파트타임이 2개월 후엔 풀타임으로 전환이 되었거든요. 그러다 보니 벌써 1년이 흘렀네요!"Q. 현재 서비스 운영팀에서 맡고 계신 업무는?"저는 운영팀에서 환전 업무를 맡고 있습니다.  환전 업무란, 스푼 라디오 BJ 분들이 방송을 통해서 아이템을 선물 받으면, 그걸 현금화시켜주는 작업을 제가 맡고 있습니다." Q. 업무 하면서 가장 힘든 점이 있다면?"환전 업무는 아무래도, 꼼꼼해야 하고 신중해야 하는 부분이 커요. 현금으로 지급할 때 금액이 혹시라도 오류가 나서 틀릴까 봐, 그게 가장 신경이 쓰이고 힘든 점이라면 가장 힘든 것 같아요. 여태 일하면서 실수는 거의 없지만, 한 두 번 정도? 는 있었던 것 같아요. 그것 말곤 힘든 점은 없습니다."Q. 정말 팀 내에 쌍둥이가 있나요?"하하하.. 초반에 진짜 많은 분들이 질문하셨어요. 저랑 같은 팀 소속인 소피와 혹시 쌍둥이 아니냐며..저희 쌍둥이 아닙니다! 그저 옷 입는 취향이 비슷하기도 하고 체구도 비슷해서 그런 것 같아요! 그리고 또 워낙 성향도 비슷한 면이 많아서 자연스레 가깝게 지내다 보니, 더 닮아 보이는 것  같아요."Q. 마이쿤에 바라는 점이 있다면?"제가 점심시간에 종종 보드게임을 하는데요. 진짜 재밌거든요! 다른 팀원분들도 같이 하셨으면 좋겠어요. 그리고 지금 보드게임이 회사에 더 다양하게 있으면 좋겠어요!"Q. 어떤 사람과 일하고 싶어요?웃음 코드가 잘 맞는 분이요. 근데 정말 많이 웃어서 진짜 잘 웃는 분이셔야 할 텐데 하하..시계는 곧 12시지만, 제인의 통금 시간은 11시..당신의 사생활이 궁금합니다Q.  긍정적이고 밝을 수 있는 비결이 있다면?"네! 왜냐면, 저는 제가 하루에 한 번이라도 웃을 수 있는 것에 감사하며 살거든요. 그래서 매일매일이 행복한 삶이라고 생각합니다."Q. 진(Jin) 데렐라가 된 이유는?"저는 통금이 밤 11시예요. 그리고 꼭 지켜요. 왜냐면 엄마가 정말 걱정을 많이 하시거든요. 그래서 되도록 통금시간 지켜서 집에 들어가요. 술 약속이 있어도 꼭 지키는 편이에요. (효녀네 참 효녀..) 그래서 웃겼던 에피소드가, 예전에 워크숍 처음 갔을 때 Jun이 저한테 11시 전에 택시 잡아줘야 하는 거 아니냐고, 집에 가야지! 통금시간이잖아!라고 하셔서 놀리셨던 적도 있어요. 신데렐라는 밤 12시이지만.. 저는 11시입니다.."Q. 절제력이 대단하신 거 같아요. Feat 밀가루 "아, 제가 사실 글루텐을 소화를 잘 못해요. 가끔 제가 밀가루 음식을 싫어해서 안 먹는다고 생각하시던데 못 먹는 겁니다. 아예 안 먹진 않고, 먹고 싶은 것 중 골라서 절반만 먹는 정도예요. 사실 저는 밀가루 중에 국수류를 가장 좋아하고요. 과자는 잘 안 먹습니다." (그런 줄도 모르고, 제인에게 가끔 이 맛있는걸 왜 안 먹냐며.. 물어봤었어요.. 미안)Q. 제인이 가장 좋아하는 음식은? "저는 한식류는 모두 다 좋아요. 음.. 만약에 하나만 뽑자면 '떡볶이'를 가장 좋아합니다."(같이 떡볶이 먹으러 가야겠네요)Q. 쉬는 날엔 주로 뭐하세요?"저는 출퇴근 시간이 길다 보니, 평일에 약속을 자제하는 편이에요. 대신 주말에 친구들을 자주 만나요! 요즘은 친구랑 같이 도예수업도 다니고요. 가끔 볼링도 치고요. 친구들 성향에 따라 저도 같이 새로운걸 함께 도전하게 되더라고요! 도예는 시작한 지 한 두 달 정도 되었는데.. 정말 좋은 취미인 것 같아요." 예쁜 아이템이 많은 제인의 탐나는 가방 1서비스 운영팀이 Jane을 한마디로 표현한다면?Sophie 曰: 도자기 - "피부가 맑고 투명해서"Kate 曰: 웃음 지뢰 - "항상 잘 웃고 한번 웃으면 호탕하고 기분 좋게 웃어서"Victor 曰: 어린 그루트 - "아르바이트부터 정직원까지 점점 성장하고 있어서"Jun 曰: 텀블러 - "웃음과 냉철함을 다 담을 수 있는 그녀", 운영팀 SSG: "쓱 다가와 쓱 해결하고 감"Riley 曰: 환전 대장님 - "환전업무는 물론이거니와 어떤 상황이 와도 침착하게 대응하시고 잘 이끌어주신다. 배울 점이 많은 분"번외"제인은 차도녀예요. 제인은 표현이 어색할 때가 있지만 정말 따뜻한 사람이에요. 운영팀에서 소통 창구 역할을 하고 있는 멤버예요. 환전도 꼼꼼하게 엄청 잘하고요. 웃음소리가 얼마나 통쾌한지 너무 좋아요. 체한 것도 쑥 내려가는 느낌이라니까요?! 엄청 꼼꼼하고.. 가끔 심각함(?)도 있지만 본인의 꼼꼼함을 단련시키는 거 같아서 좀 많이 멋있고요..!!!!!"- 제인을 아끼는 팀 멤버의 긴 한 마디

새로운 아이디어를 검증하는 방법은 여러 가지가 있습니다. 비슷한 도구들을 사용하면서 간접체험을 해보기도 하고, 종이, 혹은 목업 도구를 활용한 프로토타입을 만들어보기도 합니다.스포카 팀은 새로운 아이디어를 검증하기 위해 더욱 직접적인 프로토타입을 만들어야 했습니다. 매장에서의 오프라인 경험에서부터 Facebook, Twitter 등의 온라인 경험까지 이어지는 총체적인 경험 선을 시험하기 위해선 실제로 어느 정도 동작하는 프로토타입을 만드는 것이 제일 확실하였기 때문이죠.하지만 막상 그럴싸하게 동작하는 프로토타입을 만드는 것은 생각보다 시간이 오래 걸리는 일입니다. 최소의 UI 디자인, 빠른 기능 개발, 배포 환경이 제대로 준비되어있지 않다면 실제로 유효한 수준까지 만드는 것이 많은 시간이 필요하게 될 것입니다.스포카 팀은 아이디어가 떠오를 때 어떻게 하면 그것을 빠르게 구현해서 확인할 수 있을지에 대해 많이 고민하였습니다. 그러면서도 해당 아이디어가 좋을 때 제대로 된 서비스로 확장하거나 기존 기능에 통합하는 것도 수월하게 가능하다면 더 좋겠지요. 이번 글에서는 제대로 작동하면서 확장성도 고려한 고 수준의 프로토타이핑을 빠르게 할 수 있게 도와주는 도구들을 모두 소개해보고자 합니다.어떤 언어를 고를까?특별히 교육의 목적이 있는 것이 아니라면 언어는 자신이 가장 잘 활용할 수 있게 미리 교육된 언어가 효과적입니다. 새로운 언어를 공부하면서 프로토타이핑을 한다면 지엽적이고 모르는 문제에 부딪혀 시간을 허비하는 상황이 많아 프로토타이핑 속도가 지연되기 쉽기 때문입니다. 다만 컴파일 가능한 언어와 불가능한 언어 중 선택해야 한다면 대부분 컴파일 과정이 필요없는 언어를 선택하는 것이 큰 효과를 경험하실 수 있습니다.스포카 팀은 서버 개발에 Python을 주 언어로 활용하며, 그 외에 Ruby나 Node.js 같은 언어도 추천합니다.마이크로 프레임워크를 활용하자규모가 커지면 구조에 손을 대야 하지만, 다양한 기능을 빨리 구현해서 넣고자 할 때 마이크로 프레임워크로 시작하는 것이 좋습니다. 간편하면서도 초기 구조를 아주 간결하게 들고 갈 수 있기 때문입니다.웹 서비스나 앱 서비스의 서버로 이용할 HTTP 프로토콜 서버를 구축한다면 Sinatra 스타일의 마이크로 프레임워크를 활용하는 것이 효과적입니다.아래는 주요 언어에서 볼 수 있는 마이크로 프레임워크입니다. 이 외에도 Sinatra style microframework을 검색해보시면 여러 언어에서 비슷한 형태로 구현된 마이크로 프레임워크를 보실 수 있습니다.Sinatra (Ruby)Flask (Python)Express (Node.js)스포카팀에서는 Flask를 즐겨쓰고 있습니다. Flask에 관심이 있으시다면 지난 기술 블로그의 소개글을 참조해주세요.디자인을 빠르게 하는 툴킷들기본적인 기능들을 빠르게 구현하였다면 이를 활용할 사용자 인터페이스를 만들어야 합니다. 하지만 웹 서비스나 웹뷰를 기반으로 하는 서비스를 만든다면 HTML/CSS/JS 기반의 디자인을 하는 일도 상당히 시간이 많이 필요한 일입니다. 이 때, 각 목적에 맞는 툴킷들을 이용한다면 디자인을 크게 고민하지 않으면서도 보기 좋은 서비스를 만들어 볼 수 있습니다.Bootstrap from Twitter는 디자인에 대한 여러 가지 기초적인 고민을 상당히 잘 흡수해주는 훌륭한 툴킷입니다. 크로스 브라우징을 지원하며, 우리가 쓰는 컴포넌트 대부분에 대해 심미적으로, 기능적으로 우수한 디자인을 제공합니다. 그리드 인터페이스를 제공해서 레이아웃도 간편하게 잡을 수 있으며, 곧 출시 예정인 2.0에선 반응형 디자인도 정식으로 지원하고 있습니다.Bootstrap은 LESS로도 제공해주기 때문에, 디자인 튜닝이 간편하고 Mixin을 활용해 의미적인 HTML 마크업을 하면서 디자인을 적용할 수도 있습니다.위의 툴킷과 같은 인터페이스를 가지고 디자인만 Facebook 형태로 바꾼 Fbootstrapp도 있습니다. Facebook 앱을 만든다면 이쪽을 쓰시는 편이 더 좋을 것 같습니다.터치 환경에 한정한 서비스를 디자인 중이라면 범용성이 조금 떨어지지만 jQuery Mobile을 추천합니다. 여러 기기의 웹뷰 환경을 지원하는 다양한 컴포넌트를 제공하고 있습니다.서비스를 최대한 쓰기모든 기능을 직접 전부 구현할 필요는 없습니다. 여러 회사에서 한 두 줄의 추가만으로 사용할 수 있는 서비스를 제공하고 있습니다. Google은 특히 Maps API, Chart Tools, QR Code, Font API 등 개발에 도움이 되는 수많은 기능들을 간단한 API로 쓸 수 있게끔 공개하고 있으며, Facebook 또한 소셜 플러그인으로 다양한 소셜 도구들(Like Button, Comments, Registration 등)을 제공하고 있습니다. 이런 서비스들을 잘 알고 있다면 가끔은 단지 여러 서비스 기능을 연결하는 것만으로 새로운 서비스를 만들 수 있기도 합니다.서비스 배포는 Platform as a Service(PaaS)를 활용하자위 도구의 협력으로 서비스를 만들었다면 이제 배포를 해야 합니다. 어디서나 접근할 수 있는 공용 서버에 서비스를 올리고, 서버를 세팅하고, 도메인을 연결해야 합니다. 이 과정들 또한 시간을 많이 필요로 하는 일들입니다.최근 Heroku를 시작으로 미국에서 Amazon Web Service를 기반으로 한 많은 Platform as a Service가 출시되고 있습니다. 이 서비스들은 대체로 Failover System, 쉬운 서비스 규모 스케일링, 잘 설계된 서버 스택, 편리한 배포환경을 강점으로 내세우고 있으며, 특히 처음 사용자가 가입부터 서비스 배포까지 아주 간편하고 빠른 속도로 진행할 수 있게끔 도구를 제공하고 있습니다. 게다가, 대부분 무료 플랜이 존재하기 때문에 비용 부담이 없다는 장점도 가지고 있습니다.Heroku의 서비스 배포 과정을 보시면 그 과정이 얼마나 편리한지 쉽게 알 수 있습니다.$ heroku createCreated sushi.herokuapp.com | [email protected]:sushi.git$ git push heroku master-----> Heroku receiving push-----> Rails app detected-----> Compiled slug size is 8.0MB-----> Launching... done, v1http://sushi.herokuapp.com deployed to Herokuview rawgistfile1.sh hosted with ❤ by GitHub단 두 줄로 git에 의해 관리되는 애플리케이션을 서버에 배포하고 접근 URL을 받았습니다.아래는 다양한 플랫폼에서 쉽게 이용 가능한 PaaS 목록입니다.저장소 이용아무리 빠르게 하고 싶다고 해도 저장소는 두고 하세요. 개인이 작업하는 것이라면 로컬에서도 저장소 관리가 가능한 분산형 버전관리 시스템 (git, mercurial)로 바로 이용하시고, 2명 이상이 동시에 작업한다면 반드시 저장소 호스팅 서비스를 이용해서 작업하시기 바랍니다. 변경사항을 공유하는 방법에 대해 버전관리 시스템보다 빠르고 깔끔한 방법은 아직까진 없기 때문입니다.저장소 호스팅은 많은 곳에서 제공해주고 있지만, 돈을 조금 투자해서 Github를 쓰시는 것을 추천해 드립니다. 저장소뿐만이 아닌 훌륭한 협업 플랫폼을 제공해주고 있기 때문입니다. 당장은 무료로 시작해야 한다면 Bitbucket의 무료 비공개 저장소를 이용하는 것도 좋은 방법니다.실제 케이스아래는 최근 사내에서 이루어진 아이디어 서비스 프로토타이핑이 이루어진 과정을 나열해보았습니다.Github에 저장소 생성. 팀원들에게 전달한 명은 Flask로 서버 사이드 개발QR코드 생성이 필요한 부분을 Google API로 해결한 명은 Bootstrap from Twitter로 뷰 작업을 진행작업이 되는대로 Github, Heroku에 배포개발에 필요한 시간은 약 5시간 정도였으며, 사실 이 기간은 그 이전에 해당 아이디어의 가치에 대해 토론하는 데 쓴 시간과 비슷한 시간이었습니다. 토론에선 답이 나오지 않은 채로 끝났지만, 프로토타입을 이용해보고 답을 내는 것은 그리 오랜 시간이 걸리지 않았습니다.마치며실용 가능한 프로토타이핑은 앱의 첫인상과 인터페이스 전반에 대한 이해를 넘어 아이디어의 가치평가를 확신할 수 있는 좋은 방법입니다. 우리가 토론에서 의견이 많이 갈리는 이유는 사실 보지 못한 것에 관해 이야기하기 때문인 경우가 많아서, 만약 토론하는 시간보다 더 짧은 시간 안에 말하는 것을 볼 수 있다면 의사 결정을 더 빠르고 정확하게 할 수 있습니다. 이 글은 그 방법에 대해 구체적으로 설명하였습니다.이번에 소개한 도구와 방법은 단지 돌아가는 것을 확인하는 것을 넘어 장기적인 확장성도 갖추고 있습니다. 언급한 언어들 모두 대형 서비스에서 실제 이용 중인 언어들이며, 마이크로 프레임워크들도 모두 커지는 구조에 대한 대응법을 준비하고 있습니다. 디자인은 Bootstrap의 일부 코드를 재작성하거나 튜닝하는 것으로 서비스에 최적화시킬 수 있으며, PaaS는 애초에 Fast scaling이 주요 강점이기 때문에 손쉽게 커지는 서비스의 사용량에 유연하게 대처할 수 있습니다.새로운 아이디어를 준비하고 계신다면, 이 글에서 소개한 도구들을 십분 활용하여 빠르게 실용할 수 있고, 확장 가능한 프로토타입을 반복해서 만들어 보시는 것을 적극 추천해 드립니다.#스포카 #개발 #개발자 #꿀팁 #스킬스택 #스택소개 #조언

안녕하세요! 멋진 옐로모바일 패밀리사의 서비스와 팀문화를 소개하는 옐친소, 그 21번째 이야기:) 이번에는 조금 특별한 팀을 소개합니다! 갑자기 찾아온 무더위에 지친 YDM 임직원들에게 없어서는 안될 ‘클럽YDM’의 크루입니다! 다들 얼굴은 아는데 이름은 모르고, 인사는 하고 싶은데 어색하셨죠? 그들의 비하인드 스토리, 지금 시작합니다! 안녕하세요, 클럽YDM 크루 여러분:) 옐로인들에게 크루 소개 좀 부탁드려요! 박동욱 매니저: 안녕하세요! 저는 클럽YDM 크루를 이끌고 있는 박동욱 매니저라고 합니다:) 이대호, 강혜빈, 이렇게 세 명이서 카페를 담당하고 있어요크루 중에 특별한 이력을 가진 분이 계시다고 들었어요!이대호: 네, 그게 바로 접니다ㅋㅋㅋ 카페에 오기 전 6 개월 가량 아이돌그룹 순정소년 맴버로 있었어요:) 지금은 개인 사정으로 그만 두게 되었지만요강혜빈: 이름부터 엄청 강렬하지 않나요?ㅋㅋㅋ아이돌 그룹이라니! 나중에 클럽YDM에서 콘서트도 여시나요?이대호: 그건 생각해 보겠습니다ㅋㅋㅋㅋㅋ 늘 바쁘시겠지만, 그래도 가장 바쁜 시간대는 언제인가요? 강혜빈: 늘 오전이 바쁜 편인데요, 그 중에서 특히 화요일 오전이 제일 주문량이 많아요. 왜 월요일이 아닌 화요일인지 저희도 늘 미스터리입니다:)그리고 모두들 점심 드시고 커피 한잔 씩 하시니 점심시간 직후에도 바쁘죠. 박동욱 매니저: 참 신기하게도 금요일에는 사람이 정말 없어요. 다들 빨리 일 끝내고 칼퇴 준비를 하시는 것 같아요ㅎㅎㅎ화요일 오전에는 피해서 오겠습니다! 아메리카노를 제외하고 가장 많이 팔리는 음료는 무엇인가요? 이대호: 페리에요! 다이어트의 계절이 다가와서 그런지 페리에를 물처럼 많이 드시더라고요. 클럽YDM에는 간식도 정말 많은데요! 간식 중에서는 어떤 메뉴가 제일 잘 나가요? 강혜빈: 맥X봉이 가장 많이 팔리고 있어요:) 가장 많이 팔릴 때는 하루에 100개가 넘게 팔리기도 해요.지난 1월에 겨울메뉴 투표를 진행하셨어요. 1위로 뽑힌 음료는 무엇이었나요? 박동욱 매니저: 당시 후보에 있던 음료가 고구마라떼, 밀크티, 대추차, 생강차, 율무차, 숭늉 이렇게 6가지 였습니다. 댓글로 인기투표를 한 결과 밀크티가 1위로 뽑혔는데요, 실제로 겨울 한정 메뉴로 판매를 했었어요:)이대호: 밀크티 같은 경우에는 정말 인기가 많았어요. 지금도 재판매 요청이 지속적으로 들어오는 메뉴고요. 그래서 여름에도 판매할 수 있게 아이스 밀크티도 판매를 할까 해요. 와, 저도 밀크티 정말 좋아하는데!! 밀크티 외에 재판매 요청이 있었던 메뉴가 있나요? 강혜빈: 유자차요! 유자차도 사실 겨울 한정 메뉴였는데 인기가 정말 많았어요. 재판매 요청이 계속 이어진다면 아이스 유자차로도 판매할 생각입니다.신메뉴 개발도 크루분들이 직접 하시나요? 박동욱 매니저: 그럼요. 클럽YDM에 맞는 메뉴를 계속해서 논의하고 있습니다. 저희 카페에 오시는 직원분들 수와 붐비는 정도에 따라 어떤 음료를 개발하면 좋을지 결정을 하거든요. 그렇게 회의를 거쳐 개발된 메뉴는 카페에 오시는 YDM 임직원 분들이 직접 시음하고 피드백도 주시고요:)이대호: 드시고 싶은 메뉴가 있다면 언제든 편하게 아이디어를 주세요! 여러분의 아이디어를 먹고 성장하는 클럽YDM입니다:)이번 여름은 특히나 덥다고 하는데요! 여름 메뉴는 생각해 놓으신 게 있나요? 강혜빈: 블렌더 종류를 준비하고 싶기는 해요. 늘 생각은 하고 있는데, 오전에는 아메리카노 만드는 것 만으로도 주문이 많이 밀려서 가능할지는 모르겠어요ㅠㅠ박동욱 매니저: 주문제를 도입하면 가능할 것 같은 데요? 몇 시에 픽업 오시겠다고 미리 주문해주시면 충분히 가능할 것 같지 않아요?이대호: 맞아요 맞아요! 또 단체로 미팅하실 때도 미리 주문 해 놓으시면 서로 수월할 것 같아요ㅎㅎ전날 회식하시고 남은 숙취에 힘들어 하는 분들이 있을 것 같아요. 본인이 생각하는 숙취해소에 가장 도움이 되는 음료 하나씩 말씀 주세요! 이대호: 저는 아이스아메리카노요! 술 엄청 많이 마신 다음날 물 마시면 술 맛나는 거 아시죠?ㅋㅋㅋ 시원하기도 하고 숙취 해소에 도움이 되더라고요. 강혜빈: 새콤달콤한 레모네이드요! 박동욱 매니저: 이 사람들이 과학적이지가 못해ㅋㅋㅋㅋ 숙취해소엔 당연히 두유죠! 그런데 이렇게 말하다 보니, 헛개수나 꿀물같이 숙취음료 메뉴도 만들어보면 좋을 것 같네요.클럽YDM에서 일하면서 가장 기억에 남는 에피소드는 무엇인가요? 강혜빈: 카페 오픈 첫날에 커피머신이 작동을 안했어요ㅋㅋㅋㅋ 다들 카페 첫 오픈일이라 엄청 기대하셨을 텐데, 커피종류가 전부 안돼서 너무 당황스러웠어요ㅠㅠ박동욱 매니저: 그때 진짜 저희 셋 다 멘붕이었는데, 다음날에는 사원증 찍는 포스가 고장났답니다ㅠㅠ덕분에 당일 음료가 무려 공짜였어요!열일중인 클럽YDM 크루!클럽YDM에서 일하면서 이럴 때 가장 보람찬 순간은 언제예요? 이대호: 맛있게 먹었다는 인사 한마디에 저희 세명의 하루 컨디션이 달라집니다:) 전 예전에 직원분이 여행 다녀오셔서 그 나라의 특색있는 커피를 사다 주신적이 있는데, 정말 고맙고 일할 맛이 나더라고요. 그날 정말 힘내서 일했습니다!  그렇다면 반대로 이럴 때 가장 힘들다거나 옐로인들에게 건의하고 싶은 것이 있나요? 강혜빈: 크게 힘든 점은 없는데요, 딱 한가지! 음료 주문하시고 저희가 사원증 찍어 달라고 말씀 드린 후에 찍어 주셨으면 좋겠어요. 정말 가끔가다 주문 말씀하시자 마자 사원증을 찍는 분이 계신데, 그러면 기계 오류가 뜨게 되거든요ㅠㅠ커피를 사랑하는 옐로인들에게 한 말씀 부탁 드려요:)박동욱 매니저: 카페 첫 날부터 포스도 안되고 커피머신도 고장나고.. 이것저것 부족한 게 많았는데 많이 이해를 해 주셔서 정말 감사해요:) 앞으로도 여러분의 카페인 충전을 위해 최선을 다하는 클럽YDM 크루가 되겠습니다!

디자인이란 단어가 이제는 어디서나 익숙합니다. 그만큼 디자인의 정의와 역할은 다양한 영역에서 분화되어 있기도 합니다. 네이버랩스에서는 로봇이라는 대상에 대해 여러 분야의 디자인이 진행되고, 종국에는 통합됩니다. 하나의 로봇으로 이어지는, 로봇시스템/UX/ID 각각의 디자인에 대해 물었습니다.Q. 어떤 ‘디자인’을 하나요?로봇의 메커니즘에서 인터페이스까지, 최적의 시스템을 디자인(김인혁|Robot) 제가 하는 디자인은, 시스템 디자인이라고 말할 수 있습니다. 아, 물론 제가 속한 Robot팀엔 더 많은 디자인 과정들이 있어요. 로봇의 기구, 전장, SW 등 각각의 영역에서도 디자인 과정이 존재합니다. 저는 그 중에서 주로 시스템 제어 엔지니어로서의 디자인을 이야기할 수 있겠네요.사실 시스템이란 말이 좀 모호하죠. 과학분야에선 이렇게 정의할 수 있습니다. 구성 요소들이 내외부와 경계를 가진 상태에서 각 요소 간에 긴밀한 상호작용을 하는 집합체. 쉽게 설명하고 싶었는데, 여전히 어렵긴 하네요.로봇은 단순한 기능을 구현할 때에도 복잡한 요소들이 동시에 작동합니다. 메커니즘, 동력원, 에너지원, 제어기와 인터페이스 등. 이들이 서로 잘 연결되어 작동할 수 있어야 합니다. 이를 위한 최적의 시스템을 구성하는 디자인이라 하겠습니다.로봇, 그리고 사람, 그 사이에서의 상호작용(김석태|UX) UX의 입장에서는 HRI (human-robot interaction) 디자인이라고 정의할 수 있습니다. 앱이나 웹 등의 화면 기반 인터페이스와는 조건이 다른데요. 물리 공간에서 로봇이 동작한다는 점이 그렇습니다. 주변 사물이나 사람을 로봇이 인식하는 순간처럼 다양한 상황에서 로봇이 어떻게 동작하거나 반응해야 하는지, 그리고 로봇을 활용한 서비스는 다른 디바이스나 앱과 달리 어떤 방식을 통해 제공되어야 더욱 직관적으로 사람과 상호작용이 가능한지 등을 디자인하고 있습니다.기술만큼, 인상과 매력도 중요하다(김승우|ID) 로봇의 외관도 중요합니다. 로봇은 여전히 일반인들에겐 생소합니다. 이들에게 로봇은 흥미로움을 일으키는 대상일 수도 있지만, 마주치는 순간 기피하고 싶은 이질적 존재일 수도 있어요. 그래서 외관을 통해 느끼는 인상과 그 효과에 대해 세심한 접근을 하고 있습니다. 로봇 서비스가 보편화되지 않은 시점에서는, 사람들이 기대하는 로봇다운 매력을 잘 체감할 수 있게 하는 것도 로봇 대중화를 위해 중요한 역할인 것 같습니다.“기술이 지닌 본래의 가치를 더욱 잘 느낄 수 있도록 전달하는 것, 그것도 디자인의 역할입니다.” Q. 어떤 프로세스로 작업하나요?단순한 목표를 위해 필요한 복잡한 과정들(김인혁|Robot) 기본 목표라고 한다면, 일단 요구 스펙을 잘 만족하는 시스템을 설계하는 것입니다. 현실은 아주 복잡하죠. 요소들이 워낙 다양하기 때문인데요. PoC, 성능 테스트 등 평가 과정을 거치면 조정해야 할 것들이 많아집니다. 아예 새로 개발을 할지를 고민하게 될 때도 있는데, 참고할만한 레퍼런스가 없을 때는 참 어려워집니다. 이럴 때는 원론적으로 풀 수밖에 없죠. 공학적인 문제부터 정의하고 문제 해결을 위한 방법론을 탐색합니다. 이런 일들이 수없이 많지만, 시스템 디자인의 일반적인 프로세스이기도 합니다. 목표는 단순하지만, 과정은 현란하죠.산업을 이해하면 목표가 보이고, 사람을 이해하면 디테일이 보인다(김석태|UX) 앞서 말씀드린 것처럼, 서비스 로봇은 다른 앱/웹 서비스와 상황이 많이 다르죠. 앱이라면 프로토타이핑과 검증 과정을 상당히 빠른 주기로 반복할 수 있는데, 로봇은 그런 면에서는 제약이 있습니다.일단 로봇 서비스 산업에 대한 이해부터 시작하였습니다. 그간 어떤 로봇들이 어떤 서비스를 했고, 학계에서는 어떤 연구들이 선행 되었는지를 꼼꼼히 연구했습니다. 그리고 나니 목표 수준이 좀 더 명확해지고, 시나리오를 구체화할 수 있었습니다.중요한 건 역시 사람에 대한 이해입니다. 실제로 유용하다고 느낄까? 어떤 니즈가 여전히 숨어있을까? 로봇이 대신 해 주었을 때 더 가치 있는 것은? 이런 질문에 대한 답을 찾은 후 다음 숙제가 이어집니다. 사람들의 삶 속으로 이질감없이 자연스럽게 녹아 들기 위한 인터랙션입니다. 인터랙션 상황들을 정의하는 일부터가 시작이고, 어떤 이슈나 문제가 있는지를 찾아냅니다. 가장 단순하면서도 자연스러운 해결 방법은 무엇일지 실험을 통해 검증합니다. 이 과정에서 굉장히 많은 디테일들이 새롭게 발견됩니다.기술에 대한 이해도 중요합니다. 예를 들어 최근 AROUND C에는 디자이너가 가장 이상적인 로봇의 속도 및 이동 경로를 선택하면, 이를 바탕으로 딥러닝 기술을 적용해 최적화된 자율주행을 할 수 있는 기술이 적용되어 있습니다. 지켜보는 사람이 언제 안정감을 느끼는지, 로봇과 사람이 교차할 때엔 상대 속도나 동선을 어떻게 할지, 공간상의 제약이 복합적으로 작용하면 어떤 기준을 세워야 할지 등등. 수많은 요소들 사이에서 최적의 인터랙션 디자인을 설계해야 합니다. 이런 사소해보이는 사용자 경험이 로봇 서비스 과정에서 뜻밖의 감동까지도 전달할 수 있다고 생각합니다.“우리가 추구하는 기본 방향은, 실용적이면서도 사람을 배려하는 로봇입니다. 문제 상황을 분석해 나온 다양한 해결책 중에, 사람이 직관적으로 파악할 수 있는 방법을 택합니다.” 최근에는 AROUND C에서는 gaze, sound, lighting을 통한 비언어적 커뮤니케이션을 테스트하고 있습니다. 왜 굳이 로봇이 직접 말하게 하지 않고 비언어적 커뮤니케이션을 연구할까요? 그게 서비스 시나리오 상에서 더 직관적이며, 심지어 더 똑똑해 보이기 때문입니다. 스타워즈의 R2D2와 C3PO를 떠올리시면 됩니다. 점과 선을 활용해 가장 로봇다운 눈을 디자인 했고, 이를 통해 다양한 상태 정보를 사람에게 직관적으로 전달하고자 했습니다.전체의 통일감과 개별 디자인의 완성도라는 두개의 과녁(김승우|ID) 제가 공을 들이는 건 전체 제품의 통일감과, 개별 디자인의 완성도입니다. 네이버랩스에서 그간 공개했던 제품들은 작은 디바이스부터 중형 로봇, 대형 차량 센서박스에 이르기까지 다양한 카테고리에 걸쳐 있습니다. 디자인의 토대가 되는 조형 요소인 제품의 크기와 형태, 구조가 상이하다 보니 각각의 형태와 구조적 특성을 고려하면서도 전체 제품에 통일감이 느껴지도록 하는데 많은 노력을 기울여 왔습니다. 기업에서 일관된 메시지를 전달하는 것은 그 기업을 신뢰할 수 있는가에 대한 중요한 가치라고 생각해요. 디자인도 마찬가지입니다. 네이버랩스라는 기술 기업에서 전달해야 할 가치는 ‘정밀함’과 ‘단단함’이라고 생각했고, 로봇을 포함한 전체 제품에서 이 키워드들을 담은 일관된 디자인 언어가 느껴질 수 있도록 조형의 기본이 되는 면, 면의 기본이 되는 선을 세밀하게 다듬으며 디자인했습니다.또한 개별 디자인의 완성도를 위해 밸런스와 디테일을 중요하게 생각합니다. 로봇은 움직이기 때문에 다양한 각도에서 바라보게 되고, 어느 방향에서 보아도 완성도 높은 밸런스가 특히 중요합니다. 잘 안보이는 곳의 디테일도 쉽게 드러나기 때문에 세밀한 디테일을 놓치지 않기 위해 노력하고요.로봇의 경우엔 일반인들의 디자인 완성도에 대한 기대 수준이 더 높은 편입니다. 이런 기대를 충족시키는 동시에 기술적인 요구도 충족해야 합니다. 예를 들어, AMBIDEX의 전체 디자인 균형을 잡는 과정에서 팔의 부피를 늘리는 선택이 필요했는데, 동시에 무게는 가볍게 유지해야만 로봇의 기능을 100% 발휘할 수 있었습니다. 경량성이 AMBIDEX라는 로봇 팔 기술의 핵심 특성이기 때문이죠. 외관 부피를 늘려 디자인 밸런스를 최적으로 잡으면서도 1g을 더 줄이기 위해 질량을 체크하며 표면과 두께를 조정하고, 강성을 높이는 내부 구조를 추가하며 문제를 해결했습니다. 이런 디자인 과정을 거쳤기에 외관에서도 내부의 단단함과 견고함이 배어 나온다고 생각합니다.Q. 서로 어떻게 협업을 하나요?어차피 목표는 하나(김인혁|Robot) 각기 다른 분야의 전문가들이 협업할 때의 견해차이는 프로세스를 통해 해결되어야 한다고 생각해요. 그게 아니라 의견의 일방향성이 생기면 그건 곤란하죠. 저는 각 분야의 선/후행을 두지 않고 초기부터 과정 전반에 걸쳐 계속 공유하고 의견을 나누며 서로의 수용성을 늘리는 것이 아주 중요하다고 생각해요.“한 영역의 전문가가 모든 결정을 하고 다른 분야의 전문가는 일방적으로 종속되어야 한다면, 그건 문제가 있습니다. 선행과 후행을 나누면 안됩니다. 초기부터 같이 고민하고 대화하고 함께 풀어야 합니다.” (김석태|UX) 저도 커뮤니케이션이 협업 과제를 빠르게 가속하는 가장 중요한 요소라고 봅니다. 다양한 관점에서 의견을 나누는 건 정말 필요해요. 그 과정 없이 한번에 이상적인 솔루션을 바라는 건 무리입니다. 지금 진행 중인 1784 프로젝트 역시 이러한 소통을 원활히 이어가고 있기 때문에 좋은 협업이 진행되고 있고요.(김승우|ID) 차이란 것은 자연스럽죠. 좋은 결과를 위해 필수적입니다. 궁극적인 목표를 달성하고자 한다는 동질감을 느끼기 때문에 서로의 진정성을 확인허는 과정이기도 합니다. 어떤 디자인이라도 많은 협의와 조율이 전제됩니다. 하나의 입장에 매몰되어 있는지 되돌아보기도 하고, 전체를 바라보는 기회로 삼기도 합니다.Q. 앞으로의 도전은?(김인혁|Robot) 우리의 목표는 사람에게 도움이 되는 로봇을 개발하는 것입니다. 단순하죠. 이를 기술 관점에서 고민하고, 가장 적합한 답을 찾고, 그 답을 세상과 공유하고 싶습니다. 그것이 제가 맡은 역할이라 생각하고요. 그 역할을 잘 할 수 있도록 연구개발자로서도, 프로젝트를 리드하고 완성하는 실무자로서도 역량에 깊이를 더하고 싶습니다.새로운 스탠다드라는 설레는 도전(김석태|UX) 이제는 실험실이나 전시장이 아니라, 우리가 실제 살아가는 공간으로 로봇이 들어옵니다. 그런 시대에 도달했습니다. UX디자이너로서는 완전히 새로운 기회이자 설레는 도전입니다. 한때 모바일이란 세상으로 패러다임이 이동했던 시기가 있었죠. 이제는 가상 세계에서 제공하던 다양한 서비스와 기술들이 일상의 물리 공간으로 다시 돌아올 것입니다. 서비스 로봇을 통해 이 분야의 새로운 스탠다드를 만들고 싶습니다.(김승우|ID) 네이버랩스에서는 늘 흥미로운 프로젝트들이 진행되어 왔습니다. 그 중에서도 로봇 디자인은, 다른 어느 로봇보다도 디자인 완성도가 높으며, 동시에 기능적 가치를 충실히 구현하는 것을 목표로 진행해 왔습니다. 게다가 로봇은 외관 그 자체가 하나의 강렬한 인상이자 브랜드 체험 요소가 되기 때문에 더욱 큰 책임감을 느끼고 있습니다. 네이버랩스는 기술이 강점인 회사입니다. 동시에 디자인 또한 우리의 탁월한 강점입니다. 이를 위해 앞으로도 노력하려고 합니다. 네이버랩스의 인재상은 passionate self-motivated team player입니다. 어쩌면 '자기주도적 팀플레이어'라는 말은 형용모순(形容矛盾)일 지도 모릅니다. 하지만 우린 계속 시도했고, 문화는 계속 쌓여갑니다. 다양한 분야의 전문가들이 경계없이 협력하고 스스로 결정하며 함께 도전하는 곳의 이야기를 전합니다. How to work at NAVER LABSH2W@NL 시리즈 전체보기