안녕하세요. 타운컴퍼니 R&D 파트의 백대현입니다.타운컴퍼니는 단체들를 위한 공동구매 플랫폼인 타운어스를 운영하는 스타트업입니다. 기술블로그를 시작하며 최근 오픈한 타운어스 2.0에 대한 소개, 타운컴퍼니 기술조직인 R&D 파트에 대한 소개를 드리려 합니다.타운어스는 대학생들이 학교 내에서 자주 진행하는 공동구매가 굉장히 복잡하고 만족하기 어렵다는 문제를 해결하기 위해 시작되었습니다. 수작업으로 진행하던 공동구매를 플랫폼화 시켜 편하게 공동구매를 진행할 수 있게 만들고, 전국단위로 공동구매를 진행하여 최저가로 구매할 수 있도록 하였습니다.2014년 9월 오픈베타서비스인 캠퍼스샵을 시작하였고 이어서 2015년 6월 정식서비스 타운어스를 런칭하여 2년 넘게 폭발적으로 성장해왔습니다.사실 그 동안 타운어스 사이트에 대한 아쉬움이 많았습니다. 사이트가 초기에 린(Lean)하게 만들어진 이후에 몇차례 업데이트를 거쳐 타운어스 비즈니스를 받쳐주고 있었지만 내부 개발팀의 부재, 인력부족으로 유지보수가 잘 되지 않고 있었습니다. 그 와중에 몇 차례의 비즈니스 전략 변경(Pivot)을 거치면서 기술과 비즈니스의 괴리가 점점 벌어지게 되었습니다.타운어스 신규플랫폼타운컴퍼니에서는 여러 고민을 거쳐 한층 업그레이드 된, 이제 대학생 뿐만 아니라 모든 단체를 위한 공동구매 커머스 플랫폼으로 거듭나고자 타운어스 2.0 프로젝트를 시작하며 기획팀, 디자인팀, 개발팀으로 이루어진 R&D 파트를 출범하고 기술조직을 구성하였습니다.새로 출범한 타운컴퍼니 R&D 파트에서는 물려받은 기존 코드베이스를 유지하며 플랫폼을 개선할 것인지, 부채를 청산하고 새로운 코드베이스를 쌓을 것인지 많은 고민을 했습니다. 결론적으로 새로운 코드베이스로 프로젝트를 진행하기로 하였는데 대표적인 이유는 아래와 같았습니다.타운어스 2.0에서 변경되어야할 기획이 상당히 많아 재설계가 필요함비즈니스적 전략 변경을 서비스에 반영하기 위해 변경해야할 기획이 상당히 많고 그 동안 기술에 반영되지 않은 비즈니스 요구사항이 많아 여려 요구사항이 복합적으로 고려되어야함서비스 아키텍처가 연속성이 없음초기에 MVP로 시작된 코드베이스가 연속적인 기술조직이 발전시키지 못하고 외주 개발과 인력 변경을 거치다 보니 일관적이지 않고 누수가 많음버그 빚더미인력부족으로 인해 그 동안 유지보수가 되지 않아 해결해야할 버그가 복합적으로 존재함 (해결되지 않은 리포팅된 이슈 450여개 OMG)위 외의 여러 이유로 타운컴퍼니 R&D 파트에서는 기술부채 파산을 선택하고, 새로운 코드베이스에서 프로젝트를 시작하기로 하였습니다.신규플랫폼 간략 소개결론적으로 타운어스 신규플랫폼은 전체적인 일정과 인력을 고려하여 우선 부분적으로 오픈하게 되었습니다. 가장 많은 사용자들이 사용하는 단체의류공동구매에 대한 서비스를 먼저 개발하게 되었고 그 외 카테고리의 공동구매는 기존플랫폼에서 서비스하고 있습니다.이렇게 시작한 타운어스 신규플랫폼의 현재 오픈한 변경 사항은 크게 아래와 같습니다.전체적인 UX/UI 업데이트공동구매를 더 편하게 시작하고 진행하고 마무리할 수 있도록 개선“공동구매방”을 친숙하게 사용할 수 있도록 유도하였습니다.단체의류 커스터마이징 기능 강화커스터마이징 의류 종류 확장 : 과잠, 코치자켓, 티셔츠 (점진적으로 확대할 예정)커스터마이징 예상가격 계산 기능편하게 단체의류 디자인을 미리 해볼 수 있는 서비스를 제공합니다.최근 오픈을 시작으로 타운컴퍼니 R&D 파트에서는 지속적으로 서비스를 발전시켜 세상 모든 단체활동을 위한 공동구매, 타운어스에 걸맞는 공동구매 커머스 플랫폼으로 만들어갈 예정입니다.기술 스택과 조직 문화타운컴퍼니 R&D 파트의 기술에 대해서는 꾸준히 소개를 드리려 합니다. 때문에 오늘은 조직 문화와 기술 스택에 대해서 간단하게 소개를 드리겠습니다.프로젝트 진행협업툴로 JIRA, Confluence, Slack을 사용하고 있습니다.프로젝트는 Agile Kanban 방식으로 테스트 주도 개발, 코드 리뷰, 페어프로그래밍을 통해 진행하고 있습니다.서비스에 대한 충분한 고민 이후에 개발을 진행하려 노력합니다.기술 스택Back-End는 Django 1.11 (DRF) 기반으로 개발하며, AWS, MySQL, Vagrant, Docker 같은 기술을 사용하고 있습니다.Front-End는 Angular 5.1을 사용해서 개발하고 있으며 Less, RxJS, Webpack 등의 기술을 사용하고 있습니다.UX/UI에 Sketch와 Zeplin을 주로 사용하고 있습니다.CI(Continuous Integration)로 Travis-CI, 배포 관리로 Fabric과 AWS CLI, 버그 리포팅으로 Sentry.io, 플랫폼 모니터링으로 ELK(ElasticSearch, Logstash, Kibana)를 사용하고 있습니다.지향하는 조직 문화 및 지원자유롭고 주도적인 조직 환경시간에 쫓겨 비루한 코드를 생산하지 않도록유연한 리모트 근무지시가 아니라 스스로 할 일을 찾는 자율 속에서 책임을 다하는 문화자유롭게 의견을 제시할 수 있는 편한 분위기건강한 비판과 토론을 장려하는 커뮤니케이션 문화이상을 추구하되 비즈니스에 기반한이상적인 기획, 디자인, 개발을 지향하지만 비즈니스 영역에 기반한 의사결정회사 모든 조직들이 더 부가가치가 높은 업무에 집중할 수 있는 환경 조성을 위해 노력TOY TIME매주 금요일 4시부터 7시까지 3시간 자유로운 주제로 프로젝트 진행세미나, 컨퍼런스 참가 적극 장려 및 도서 지원저희는 아직 성장하고 있는 만큼 개선할 점도 많고 배워야하는 부분도 많이 있습니다. 그 만큼 기술블로그를 통해 저희가 고민하고 겪었던 기술을 공유하고 소통하며 서로 성장할 수 있는 기회가 되었으면 합니다.잘 부탁드립니다.#타운컴퍼니 #서비스소개 #기업문화 #사내복지 #조직문화 #원격근무 #디지털노마드 #재택근무

안녕하세요, 8퍼센트입니다.8퍼센트는 다양한 매체와 콘텐츠로 이야기를 전하고 있습니다. 이번엔 인터뷰를 통해 8퍼센트를 이루고 있는 각 팀들의 이야기를 들어보며 고객에게 더 가까이 다가가고자 합니다. 그 첫 번째 주인공은 서비스 개발을 담당하는 ‘프로덕트’ 팀입니다.Q. 안녕하세요, 인터뷰를 위해 프로덕트 팀 허재영 님과 이호성 CTO님이 자리해주셨는데요. 먼저, 8퍼센트의 제품을 만드는 프로덕트팀은 구체적으로 어떤 일을 하시나요?A. 프로덕트 팀은 8퍼센트의 서비스를 만드는 팀입니다. 고객들이 8퍼센트를 이용하는 데 있어서 불편함이 없도록 서비스를 개선하고 유지하는 역할을 하고 있습니다. 예를 들어 기존의 인터넷 기반 금융 서비스는 공인인증서, Active X를 보면 알 수 있듯이 사용자의 편리함에 초점을 두고 있지 않습니다. 저희의 역할은 사용자들에게 더 편리하고 효율적인 금융 생활을 할 수 있도록 새로운 금융서비스를 시도하는 것입니다.Q. 새로운 금융시스템을 구축하고 운영해나가는 과정이 쉽지 않을 것 같은데, 그것에 대해 어려움과 극복해낸 경험이 궁금합니다.A. 8퍼센트는 이미 만들어진 솔루션을 사용하거나 외주를 통해 시스템을 구축하는 기존의 회사들과 다르게 직접 바닥부터 금융 시스템을 쌓고 있습니다. 금융시스템은 정확함과 안정성을 빼놓을 수 없는데 사용자가 많아지고 시스템이 거대해질수록 생각지 못한 부분에서 오류가 생기게 됩니다. 이러한 오류는 회사의 손실을 발생시키고, 고객들의 신뢰를 잃게 합니다. 위와 같은 일이 발생하지 않게 시스템을 정밀하게 설계하는 것은 기본이고 추가로 발생하는 문제들에 대해 올바르게 대처하는 것이 금융 시스템을 구축하고 운영하는 과정입니다. 물론 힘든 과정이지만 단계별로 시스템을 구축하는 것이 앞으로 남들과 다른 서비스를 제공할 수 있는 기반이 된다고 생각합니다.서비스 초기, 지급 프로세스에 문제가 있었던 적이 있었는데, 이를 인지하고 그에 대한 대응을 진행했습니다. 또한, 대응에 그치지 않고 테스트와 수정한 부분에 대해 제대로 동작하고 있는지 알아보는 QA(Quality Assurance) 프로세스를 갖추는 계기가 되었습니다. Q. 그렇게 만들어지는 8퍼센트 서비스만의 차별화된 점은 무엇인가요?A. 첫 번째는 '자동 투자'입니다. 자동 투자를 선택하게 되면 예치금과 상환된 투자금이 지속적으로 재투자됩니다. 따라서, 고객이 직접 신경 쓰지 않아도 자산을 쉽게 불릴 수 있습니다. 두 번째는 '스페셜딜'입니다. 일부 스페셜딜은 기업이 제공하는 서비스를 투자자가 직접 체험해볼 수 있으며, 이를 통해 고객은 투자 이외의 부수적인 혜택을 누릴 수 있습니다. 소개해드릴 마지막 차별점은 다양한 업체와의 제휴입니다. 8퍼센트는 현재, 기존 금융권에 있는 많은 금융 회사들과 제휴를 맺고 있습니다. 기존 금융 회사가 오랜 시간 쌓아놓은 시스템과 노하우, 그리고 8퍼센트의 서비스를 합쳐 좋은 서비스를 제공하는 것은 저희 서비스의 강점이 된다고 생각합니다. 또한, 기존 금융권뿐 아니라 토스와 같은 스타트업과의 제휴 역시, 토스 플랫폼에서 간편하게 8퍼센트 서비스를 이용할 수 있다는 점에서 이런 다양한 제휴는 저희만의 차별점이 된다고 생각합니다.Q. 8퍼센트 서비스에는 정말 다양한 장점이 있는 것 같습니다. 이렇게 좋은 서비스를 구상할 때 중요하게 생각하는 기준이 무엇인가요?A. 프로덕트 팀에서는 제품을 구상하는 데 있어서 ‘고객들에게 전달될 수 있는 가치’, ‘안정성과 정확성’, ‘사용성’ 이렇게 세 가지 기준을 중요하게 생각하고 있습니다. 금융 서비스는 대부분 돈으로 환산되는 가치를 추구합니다. 프로덕트 팀이 추구하는 금전적인 가치 역시 투자를 했을 때 돈을 벌고, 대출을 통해 돈을 절약하는 것입니다. 이러한 금전적 가치는 개인과 개인들이 서로 연결되어 발생한다는 점에서 사회적 가치에 기여한다 생각합니다. 또한, 핀테크 서비스들이 나오기 이전에 투자와 대출은 상당히 무겁고 다가가기 힘든 면이 있었습니다. 그래서 프로덕트 팀에서는 투자와 대출로 이뤄진 8퍼센트 서비스를 이용자가 손쉽게 쓸 수 있게 만드는 ‘사용성’이 제품을 구상하는 데 있어서 중요한 기준이 됩니다. 예를 들어, 토스 플랫폼을 통해서 저희 투자 서비스를 이용할 수 있게 하는 것도 ‘사용성’을 높이는 것의 일환입니다.Q. 얘기를 들어보니 명확한 기준을 통해 좋은 서비스가 나오는 것 같습니다. 8퍼센트 투자나 대출 서비스를 직접 이용하시나요? A. 모두가 소액부터 거액까지 다양하게 투자 서비스를 직접 체험하고 있습니다. 이는 고객의 입장에서 생각해볼 기회가 되어 일하는데 좋은 자극이 됩니다. ‘개밥 먹기’라고 개 사료를 만드는 회사에서 실제로 먹어보면서 제품이 어떤지 테스트하는 것에서 유래한 말이 있습니다. 8퍼센트 역시 이런 '개밥 먹기' 테스트를 꾸준히 하고 있습니다. 상품 2.0이 처음 출시되었을 때, 직접 소액 대출을 받아 안내, 혹은 연체 문자가 잘 오는지 등 대출 프로세스를 경험하기 위해서 대출 서비스를 이용했습니다. 물론 회사 내부 관계자에게 대출하기 위해 투자자를 모은다는 것은 윤리적인 문제가 있기 때문에 딜을 내부로만 열어서 회사 분들이 투자한 것만으로 모집했습니다. 신용등급은 당연히 떨어지지 않았고 상환하며 아직 잘 쓰고 있습니다.Q. 현재 P2P 금융 법제화에 대한 논의가 활발히 진행되고 있는데, 과거 새로운 규제가 생겼을 때 대처한 경험이 궁금합니다.A. 지금까지 가장 큰 변화는 작년 5월 가이드라인이 시행되면서 일어났습니다. 그전까지 투자자들로부터 모집한 자금은 회사의 소속으로 되어있었는데, 회사가 부도가 나게 되면 그 돈이 압류되어 투자자들의 돈을 못 빼는 현상이 발생할 수 있었습니다. 가이드라인에서 제시한 부분 중 가장 큰 것이 바로 이에 대한 것입니다. 투자자의 돈을 제삼자가 보관하게 해라 즉, 금융기관이 그 돈을 보관하게 하라는 것인데 이를 위해 농협과 함께 설계부터 시작해 지금의 시스템을 만들었습니다. 농협 측에 자금을 보관하고 저희가 시스템상으로 자금의 흐름을 요청하는 식으로 자금이 직접 저희를 통하지 않고 P2P 거래가 이루어지게 되었습니다.Q. 프로덕트 팀의 대처 능력이라면 법제화 같은 변화에서도 흔들림 없는 서비스를 제공할 수 있을 것 같습니다. 마지막으로 프로덕트팀의 목표는 무엇인가요?A. 프로덕트 팀에서는 항상 ‘우리가 바라는 프로덕트가 무엇일까?’ 고민합니다. 개발자로서 가장 안타까운 것은 열 명의 팀원들이 서로 힘내서 만들어내는 서비스가 사라지는 것입니다. 더 나아가, 사라지지 않는다는 것은 사회적인 가치를 인정받는다는 것입니다. 물론 돈을 만들어낸다는 얘기이기도 하지만 우리가 열심히 만든 자식과도 같은 서비스의 사회적인 가치를 인정받고 지속가능하게 하는 것이 최종적인 목표입니다. 특히 이번 18년도 1분기에 8퍼센트의 단기적 성장과 함께 미래 계획이 구체화 되고 그에 대한 긍정적인 확신이 생겨 큰 동기부여가 되었습니다. 8퍼센트 고객들도 더 편리하고 효율적인 서비스를 만들어갈 저희와 끝까지 동행해주셨으면 좋겠습니다.인터뷰는 8퍼센트의 모든 팀을 소개할 때까지 계속되니 많이 기대해주세요:)> 8퍼센트 서비스 보러 가기 #8퍼센트 #에잇퍼센트 #프로덕트팀 #프로덕트 #인터뷰 #팀원소개 #팀소개

* 이 글은 Next.js의 공식 튜토리얼을 번역한 글입니다.** 오역 및 오탈자가 있을 수 있습니다. 발견하시면 제보해주세요!목차1편: 시작하기 2편: 페이지 이동 3편: 공유 컴포넌트4편: 동적 페이지 5편: 라우트 마스킹6편: 서버 사이드 7편: 데이터 가져오기 8편: 컴포넌트 스타일링 - 현재 글9편: 배포하기개요지금까지 컴포넌트를 스타일링 하는 것을 미뤄왔습니다. 그러나 이제는 몇 가지 스타일을 적용해볼만 합니다.React 애플리케이션에는 컴포넌트를 스타일링 할 수 있는 여러가지 기술들이 있습니다. 크게 두 가지 방법으로 분류할 수 있습니다:1. 전통적인 CSS 파일 기반의 스타일링 (SASS, PostCSS 등)2. CSS in Js 스타일링 결과적으로 전통적인 CSS 파일 기반의 스타일링(특히 SSR)은 실용적인 문제가 많아 Next.js에서 스타일을 지정할 때는 이 방법을 사용하지 않는 것이 좋습니다. 대신 CSS in JS 방법을 추천합니다. 이 방법은 CSS 파일들을 불러오는 것보다 개별적인 컴포넌트 스타일링 할 때 사용 할 수 있습니다.Next.js는 styled-jsx라는 CSS in JS 프레임워크를 미리 설치해두었습니다. 컴포넌트에 이미 익숙한 CSS를 작성할 수 있습니다. 이 CSS는 해당 컴포넌트에만 적용되며 심지어 하위 컴포넌트에도 적용되지 않습니다.이는 CSS가 범위가 있음을 뜻합니다.styled-jsx를 어떻게 사용할 수 있는지 살펴봅시다.설치이번 장에서는 간단한 Next.js 애플리케이션이 필요합니다. 다음의 샘플 애플리케이션을 다운받아주세요:아래의 명령어로 실행시킬 수 있습니다:이제 http://localhost:3000로 이동하여 애플리케이션에 접근할 수 있습니다.home 페이지 스타일링하기home 페이지(pages/index.js)에 스타일을 추가해봅시다.간단히 pages/index.js를 다음과 같이 변경해주세요:   <style jsx> 엘리먼트를 살펴봅시다. 이것은 CSS를 작성하는 곳입니다.코드를 바꾼 후 블로그 home 페이지는 다음과 같이 보일 것입니다:위의 코드에서 스타일 태그 안에 직접 스타일을 작성하지 않고 템플릿 문자열 안에 작성하였습니다.템플릿 문자열({``}) 없이 직접 CSS를 작성해봅시다:어떤 일이 일어날까요?- 아무 일도 일어나지 않는다.- 새로운 스타일이 적용된다.- "문법 에러: 기대되지 않는 토큰"이라는 에러가 발생한다.- "허용되지 않는 스타일 제공자"라는 에러가 발생한다.스타일은 템플릿 문자열 안에 위치해야 합니다styled-jsx는 babel 플러그인을 통해 동작합니다. babel 플러그인은 빌드 과정에서 모든 CSS를 분해하고 적용합니다. (스타일이 추가 시간 없이 적용됩니다)styled-jsx 내에 제약 조건을 제공합니다. 나중에 styled-jsx 안에 동적 변수를 사용할 수 있습니다. 이것이 스타일을 템플릿 문자열 ({``}) 안에 작성해야하는 이유입니다.스타일과 중첩된 컴포넌트home 페이지에 작은 변화를 만들어봅시다. 다음과 같이 링크 컴포넌트를 분리시켰습니다:    import Layout from '../components/MyLayout.js'   pages/index.js 안의 내용을 위와 같이 수정해봅시다.무슨 일이 일어나나요?- 아무런 일도 일어나지 않는다.- 링크가 아닌 h1만 스타일이 적용된다.- 페이지에 에러가 발생한다.- 콘솔에 에러가 발생한다.중첩된 컴포넌트에는 적용되지 않습니다위의 코드를 실행하면 다음과 같이 보입니다:보다시피 CSS는 하위 컴포넌트 내부의 엘리멘트에는 적용되지 않습니다.styled-jsx의 특징은 더 큰 애플리케이션에서 스타일들을 관리할 때 도움이 됩니다.이 경우에는 하위 컴포넌트에 직접 스타일을 적용해야 합니다. 지금 상황에서는 링크 컴포넌트에 직접 스타일을 적용해야 합니다:다른 방법로는 global selectors을 사용할 수 있습니다.전역 스타일때때로 하위 컴포넌트 안의 스타일을 바꿔야 합니다. 일례로 React에서 마크다운을 사용하는 경우가 있습니다. post 페이지(pages/post.js)에서 볼 수 있습니다.post 페이지는 전역 스타일이 유용하게 쓰일 수 있는 곳입니다. styled-jsx를 사용하여 몇 가지 전역 스타일을 추가해봅시다. pages/post.js에 다음과 같은 내용을 적용해주세요.다음 내용을 적용하기 전에 npm install --save react-markdown 명령어를 통해 react-markdown 컴포넌트를 설치해주세요. 무슨 일이 일어나나요?- 아무런 일도 일어나지 않는다.- 마크다운 컨텐츠에 스타일이 적용된다.- 페이지에 에러가 발생한다.- 콘솔에 에러가 발생한다.전역 스타일이 동작합니다전역적으로 스타일이 적용되므로 잘 동작합니다.이 기능은 매우 유용할 수 있지만 항상 전역 prop 없이 스타일을 작성하길 추천합니다.여전히 일반적인 스타일 태그보다 좋은 방법입니다. styled-jsx를 사용하면 필요한 모든 접두사와 CSS 유효성 검사가 babel 플러그인 내부에서 수행되어 추가적인 런타임 오버헤드가 없습니다.다음엔 무엇을 해야할까요이 편에서는 styled-jsx의 표면만 다루었습니다. 더 많은 것들을 할 수 있습니다. styled-jsx Github 저장소에서 더 많은 내용을 참고하세요.Next.js에서 꽤나 괜찮은 다른 스타일링 방법들이 있습니다. 이 부분도 같이 참고해주세요.#트레바리 #개발자 #안드로이드 #앱개발 #Next.js #백엔드 #인사이트 #경험공유

Passbook이란?iOS 6에서 새로 추가된 Passbook은 여러 장의 디지털 티켓, 쿠폰, 매장 카드를 담고 편리하게 이용할 수 있는 애플리케이션입니다. Passbook 안에 들어가는 티켓, 쿠폰, 매장 카드들을 Pass라고 부릅니다. Pass는 기존 앱보다 손쉽게 개발, 배포할 수 있으며, 위치나 시간에 따라 최적의 사용 시간에 맞춰 알림을 주기 때문에 더 높은 사용성을 보장할 수 있습니다. 이번 블로그 글에선 Pass를 만드는 과정에서 이용되는 signpass의 소스코드를 분석해보도록 하겠습니다.signpass?signpass는 애플이 Pass 개발에 이용할 수 있게 제공한 툴킷으로, 형식에 맞춰 개발된 Pass 디렉터리를 인증서와 함께 하나의 파일(*.pkpass)로 묶어주는 프로그램입니다. Xcode Project 형태로 소스코드와 함께 Passbook Materials에 포함되어있습니다. Passbook Materials는 애플 개발자 계정이 있으면 무료로 다운받으실 수 있습니다.왜 분석하는가?signpass가 하는 일은 Pass를 만들어서 배포하는 데 있어 필수적인 과정이지만, 많은 Pass 배포환경이 리눅스 운영체제 위에 각자 고유의 서버 시스템 위에 구축될 것이므로, 해당 커맨드 라인 툴을 그대로 이용하기보단 기반 서비스 플랫폼에 맞춰서 새로 구현해야 할 필요가 있습니다. 다행히 signpass가 하는 일은 간단하며, 애플도 signpass를 주석이 포함된 소스코드 형태로 배포하였기 때문에 어렵지 않게 분석할 수 있습니다. 이 글은 signpass를 분석해야 할 분들에게 더욱 편하게 처리 과정을 이해할 수 있도록 돕고자 합니다.signpass의 처리 과정signpass는 크게 3가지 일을 수행합니다.파일명과 hash를 key/value 형태로 담은 manifest.json을 제작manifest.json을 인증서로 인코딩한 signature 제작기존 파일과 앞의 1, 2 번에서 제작한 파일을 함께 zip 압축signpass에는 이 외에도 validation 기능과 몇 가지 커맨드 라인 처리 기능이 포함되어있지만, pkpass를 만드는 과정만 보고 싶으시다면 PassSigner.m 의 +(void)signPassWithURL:(NSURL *)passURL certSuffix:(NSString*)certSuffix outputURL:(NSURL *)outputURL zip:(BOOL)zip 메서드만 참조하시는 것만으로 충분합니다.manifest.json 제작형식에 맞춰 제작된 *.pass 디렉터리의 파일을 훑으면서 json 형태로 저장합니다. key는 파일이름, value는 파일 내용에 대한 SHA1 해싱이 들어가며 ([fileData SHA1HashString]), 완성된 json 파일은 보통 아래와 같은 내용을 하게 됩니다.{ "[email protected]" : "bd5442b4b08aa4dde333ec9ef0269e7fd93140b3", "icon.png" : "ba47a8021c8d74d2146d7244c8a0566be37df43b", "pass.json" : "1cdbac541c1736420e7fbd7455c98d0735a71a9e", "logo.png" : "780540b3a324bf66aeaee2d352283371356e9502", "[email protected]" : "a718ffd4e611e404dd3eb701454bcaefdabbe311" } signature 제작manifest.json 파일을 애플에서 받은 Pass 인증서를 이용해 인코딩합니다. (CMSEncodeContent()) 인증서를 통해 manifest를 인코딩함으로써, 쿠폰 발급자가 아닌 다른 사용자가 임의로 Pass를 편집하는 것을 방지합니다. 인코딩된 파일은 signature라는 이름의 파일로 Pass의 Top-level 디렉터리에 manifest.json과 함께 저장합니다.CMSEncodeContent는 PKCS #7 기반의 Cryptographic Message Syntax RFC 3852 표준으로, 해당하는 과정을 다른 플랫폼에 포팅할 때 표준 문서와 애플 인증서 형태를 함께 참조하시기 바랍니다.zip 압축위의 두 파일과 나머지 파일들을 모두 포함하여 zip파일로 압축합니다. 단순한 과정이므로 부가적인 설명은 생략합니다. :-)마치며signpass의 구현 과정을 이해하였다면, Pass 배포 서비스를 구축 시 기반 플랫폼 의존도가 낮은 시스템을 구축할 수 있습니다. 또한, 이 분석을 통해, 애플이 Pass를 어떠한 방식으로 안전하게 보호하는지를 이해할 수 있으므로, 여러 회사에서 Pass의 도입 여부를 고민할 때 보안 측면에서 좋은 참고 자료가 될 것으로 기대합니다.#스포카 #개발 #개발자 #iOS #iOS개발 #앱개발 #Signpass #인사이트