FEB 1, 2018 Cracker9 솔루션개발을위한 Zeplin, InVision 을활용한모바일앱개발사례 Woo Sik Choi, wk@h9works.com Jong Sung Lee, jongsung.lee@h9works.com HNINE
팀구성 업무프로세스 업무방식특징
팀구성 사용 도구 툴
팀구성 업무프로세스 도구툴 xmrw
HNINE 업무프로세스 Project Initiation 과제개발 ( 과제개발범위확정 ) Technical Research/ User Research Research UX Strategy Concept UX Concept 문서 Waterfall UI 주요화면정의및 I.A. UI High Level Feasibility Review 개발가능성검토미팅 UI Wireframe Detail UI workflow Graphic Research Design Trend Report GUI Concept GUI Concept & Design Proposal GUI Resource Guideline GUI Design Concept Prototype Final Prototype Prototype 개발 Motion or Prototype 개발
HNINE 협업방식
Invision Tool 주요 Key flow 에대한 Happy path 는빠르게프로토타입함으로빠른조율이가능 작업자간또는클라이언트와의커뮤니케이션을위한용도로활용키스크린만내용정확하게이해하기힘들경우키스크린과함께상세정의제공메일, 통화보다코멘트와태그를걸어특정작업자와업무를조율하는효과적인방식
Zeplin 가변영역이나이미지리소스수정요청에대한부분은여전히많으나, 실시간코멘트로원거리에서도작업이빠르게이루어짐역시옆에앉아있어야... 가이드솔루션초기시장진입으로마켓쉐어가 Sympli.io 보다높음 / 툴에대한익숙함이무서움... 다른서비스로의전환이개발자가대규모인경우에는전환이어려움
나디자이너 Designer 나개발자 Developer 5 년차이상 Android / ios Developr GUI Designer
나디자이너 Designer 나개발자 Developer 가이드라인문서를만들지않아서좋아요. 5 년차이상 문서 page 를하나씩넘겨가며찾지않아서좋아요. NO 가다작업을안해서좋아요. Android / ios Developr (Assets을하나씩만들지않아도됨등등.) GUI Designer 디자이너가준 guide 정보외다른수치값을확인할수있어좋아요.
Guide Tool 을사용하면서 불편점은 없나요?
Functional Cross-Functional A 기업에이전시 A 기업 B 기업 C 스타트업 D 스타트업 협업 에이전시내부개발 & 디자인팀 고객사내부개발 & 디자인팀내부개발 & 디자인팀내부개발 & 디자인팀내부개발 & 디자인팀 Guide 방식 Guide 문서 (ppt) Zeplin Guide 문서 (ppt) Zeplin Zeplin Zeplin InVision Zeplin 사용디자인툴 Photoshop Sketch Photoshop Sketch Sketch Sketch Photoshop Sketch Sketch
Functional organization 언제 Zeplin 을사용하여프로젝트를진행하나요?
Functional organization 언제 Zeplin 을사용하여프로젝트를진행하나요? A 기업보안에문제되지않을선행과제시사용해요. 에이전시고객사에서요청시 (Guide 문서말고, zeplin 으로진행하자고할경우 )
Functional organization Zeplin 을사용하면서불편점은없었나요?
Functional organization Zeplin 을사용하면서불편점은없었나요? A 기업보안 ( 대외비 ) 으로인해 Guide tool 사용하여프로젝트를진행할수없음 에이전시추가적인부가정보필요 ( 가변정보, 비율정보등등 ) 프로젝트히스토리관리가힘들었어요. 최종산출물이없어서.
Zeplin, invision 을사용하면서불편점은없었나요? Cross -Functional organization
Cross -Functional organization Zeplin, invision 을사용하면서불편점은없었나요? 네없었어요. 너무좋아요. 근데사실 Sketch Tool 이편해서편한거일수도있어요.
Cross -Functional organization 추가적인부가정보필요 ( 가변정보, 비율정보등등 ) 은어떻게?? 개발자분들이대략적으로때려맞춰요 말안해도다알아요. 조금다르게개발되더라도 QA 에서확인해요.
Cross -Functional organization 추가적인부가정보필요 ( 가변정보, 비율정보등등 ) 은어떻게?? 개발자분들이대략적으로때려맞춰요 말안해도다알아요. 조금다르게개발되더라도 QA 에서확인해요. 단! 히스토리관리가되지않아히스토리를아는담당자가퇴사하게되면.
Functional organization Cross -Functional organization GUI 디자인 개발 디자인작업완료 GUI 가이드라인문서작성 GUI 가이드라인문서전달 개발진행 디자인검수 디자인검수문서작성
Functional organization Cross -Functional organization GUI 디자인 개발 디자인작업완료 개발진행 디자인검수 디자인검수문서작성
Functional organization Cross -Functional organization GUI 디자인 개발 디자인작업완료 개발진행 디자인검수 디자인검수문서작성
보안 ( 대외비 ) 으로인해가이드툴을사용하여프로젝트를진행할수없음 산출물필요 추가적인부가정보필요 ( 가변정보, 비율정보등등 ) 프로젝트히스토리관리가힘듦
보안 ( 대외비 ) 으로인해가이드툴을사용하여프로젝트를진행할수없음 Cracker9 산출물필요 추가적인부가정보필요 (Veriable, 비율정보등등 ) Plug-in Viewer Diff 프로젝트히스토리관리가힘듦
Cracker9 Export 개발자에게 전달 Viewer 개발 유지보수 Diff
Cracker9 Plug-in
Plug-in_ 추가정보입력기능
Plug-in_ 히스토리입력기능
Viewer_ 비율모드
Viewer_Case 확인기능
Viewer_ 임의영역확인기능
Diff_#1 변경사항확인
Diff_#1 변경사항확인
Diff_#2 변경사항확인
Diff_Overlay mode
작업방식의비교 B2B Solution 파워포인트 GUI 가이드라인 GUI Design GUI 원본정리 GUI 가이드라인문서작업 원본디자인파일확정 Layer 정리 키스크린및 Asset 배치 레이아웃및영역표시 레이아웃정보입력 Asset 지정및추출 :Asset 수치및스타일정보입력 In-house GUI Designer Asset 폴더정리 Outsourcing GUI Company Front-end 개발 수치오류 Asset 누락 커뮤니케이션 Cost 높음 Plug-in Viewer Diff GUI Design GUI 원본정리및 Asset 지정 Front-end 개발 원본디자인파일확정 Layer 정리 Asset 지정 Exporting (Layer 에복잡도에따른 Export time 증가 ) In-house GUI Designer 정제되지않은 Layer 정보까지선별하며 Asset 정보확인 보안으로인한접근불가능 GUI Design GUI 원본정리및스타일정보지정 Front-end 개발 원본디자인파일확정 In-house GUI Designer Layer 정리 / Common Set 적용 스타일정보및 Asset 지정 Exporting Outsourcing : HNINE 디자이너가의도한정제된 Asset 정보확인 윈도우프로그램으로 Local 실행 Revision History 로유지보수개발용이 GUI 디자이너, Front-end 개발자본연의업무에집중 Enterprise 급 Product GUI 유지보수에최적화
Future Work B2B Solution GUI Design GUI 원본정리및스타일정보지정 Front-end 개발 QA or Maintenance Plug-in Viewer Diff B2C Service Zeplin 과다른방식의접근 > 과정의생략 : View Code Generation GUI Design Plug-in Frontend 개발
THANK YOU FOR YOUR ATTENTION Woo Sik Choi, wk@h9works.com Jong Sung Lee, jongsung.lee@h9works.com www.cracker9.io