https://rface.cargo.site portfolio-kjh.appro Sun, 19 Oct 2025 06:45:41 +0000 https://rface.cargo.site en https://rface.cargo.site/Nav Sun, 18 Apr 2021 16:55:09 +0000 portfolio-kjh.appro https://rface.cargo.site/Nav ︎ APPIT SOLUTION<img src="https://freight.cargo.site/t/original/i/6ab7ceee7c4466eaf9995407c653e00626cae9f30c62b4cb057d56c30c899a78/Big_5-2.png"> ︎ Data-driven Design for MMTH APP<img src="https://freight.cargo.site/t/original/i/8d180f6fb99a9f12b1442acf4968b95d2dd2e50cf8683e5746901afd8f3a2205/Big_4-2.png"> ︎ Pangsuni PILOT<img src="http://freight.cargo.site/t/original/i/d03e668a5a013f3d60a36ffa784f54c91385245ef2d35f43a88a6e498f28de91/Big_3-1.png"> ︎ Motion Designs MOVIE<img src="https://freight.cargo.site/t/original/i/ca9ef5d1e9c0c95d5b54c1554066fc84783473cd60f73d38e5f0c76372c3bf26/Big_2-1.png"> ︎ F &amp; B Mobile Order APP<img src="https://freight.cargo.site/t/original/i/3d77be876ca17259482386a6ac3b82a8929795d5b56776f4b129264b5b6aae50/Big_1-1-1.png"> ︎ GrotesQ WEB<img src="https://freight.cargo.site/t/original/i/45cd67c80b1d7143360bfcc1673a9d022e4e99b8f74ffc1deb9743dca170289f/-_4.png"> ︎ Zero Docs APP<img src="https://freight.cargo.site/t/original/i/803049810fd48a4c5888707bf89f02eb950c4769a8635885d03facee3a508766/__3.png"> ︎ Attale Pro &amp; Attale APP<img src="https://freight.cargo.site/t/original/i/e8cc3cffcab4c4b59296a682d3ebc5638ce358d8bf6332001e6de3223f04ea1d/___2.png"> ︎&nbsp; OFF SHOP&nbsp;WEB<img src="https://freight.cargo.site/t/original/i/d830001773700dcd09f19a7f55580e1524e56798d272382a20f2e5d78ed36476/OffShop_small.png"> ︎Stationery Science Book Trailer MOVIE<img src="https://files.cargocollective.com/c1106382/--1_4.gif">&nbsp; https://rface.cargo.site/APPIT-WALDLUST-BUILD-SOLUTION Sun, 19 Oct 2025 06:45:41 +0000 portfolio-kjh.appro https://rface.cargo.site/APPIT-WALDLUST-BUILD-SOLUTION APPIT: WALDLUST BUILD SOLUTION <img width="2164" height="1338" width_o="2164" height_o="1338" data-src="https://freight.cargo.site/t/original/i/3a906ad7e6dd42cba6fed4ee0726c3774d3917c61eb16ab7b33e8ee257d2f06b/Base_APPIT_1.png" data-mid="239547204" border="0" src="https://freight.cargo.site/w/1000/i/3a906ad7e6dd42cba6fed4ee0726c3774d3917c61eb16ab7b33e8ee257d2f06b/Base_APPIT_1.png" /> 개요 Overview &nbsp;발트루스트의 F &amp; B 브랜드 고객들의 원활한 모바일 오더 제작과 운영을 위한 빌더, 관리자 페이지를 디자인했습니다. ‘앱핏(APPIT)’이란 네이밍은 UX디자인팀에서 제시했으며, 앱(APP)과 핏(FIT)의 합성어로 고객사의 니즈대로 옷의 사이즈를 재는 것처럼 맞춤형 앱을 만들어준다는 의미로 전사 직원 투표를 거쳐 선정되었습니다. &nbsp;작업은 약 10개월동안 자사 기획자, 디자이너, 개발자들과 협업했으며 현재 2025년 11월 하순경 첫 출시를 앞두고 있습니다.&nbsp;앱 화면 디자인&nbsp;<img width="2164" height="1339" width_o="2164" height_o="1339" data-src="https://freight.cargo.site/t/original/i/cd265f8778994ae57ea48c5eb3c1978b6fb37c27f074b7f796023aa38d509d53/Base_APPIT_2.png" data-mid="239547205" border="0" src="https://freight.cargo.site/w/1000/i/cd265f8778994ae57ea48c5eb3c1978b6fb37c27f074b7f796023aa38d509d53/Base_APPIT_2.png" /> <img width="2164" height="1338" width_o="2164" height_o="1338" data-src="https://freight.cargo.site/t/original/i/b84232e024cff97c793ea5407a9b9237e9b6b03ec75f213f589e5bb8e125771c/Base_APPIT_3.png" data-mid="239547206" border="0" src="https://freight.cargo.site/w/1000/i/b84232e024cff97c793ea5407a9b9237e9b6b03ec75f213f589e5bb8e125771c/Base_APPIT_3.png" /> <img width="2164" height="1338" width_o="2164" height_o="1338" data-src="https://freight.cargo.site/t/original/i/ccffbcae233f4fce81bcd4c7f6ce4b1c605e3f6a9e54c40cdb9e9d9dc7380eed/Base_APPIT_4.png" data-mid="239547207" border="0" src="https://freight.cargo.site/w/1000/i/ccffbcae233f4fce81bcd4c7f6ce4b1c605e3f6a9e54c40cdb9e9d9dc7380eed/Base_APPIT_4.png" /> 저의 주 작업 파트와 R &amp; R은 앱의 UXUI 개선 및 신규 디자인(80%)에 집중되어 있었으며 보조적으로 어드민 관리자의 기획과 디자인(5%)을 보완했습니다. <img width="2164" height="1338" width_o="2164" height_o="1338" data-src="https://freight.cargo.site/t/original/i/65157daf827dfa4420d969ff789eebff2e068625577b26f943f5052539a85fc7/Base_APPIT_5.png" data-mid="239547208" border="0" src="https://freight.cargo.site/w/1000/i/65157daf827dfa4420d969ff789eebff2e068625577b26f943f5052539a85fc7/Base_APPIT_5.png" /> 전사적으로 중요한 대형 프로젝트였던만큼 일정 후반부에는 운영상의 내부 관리 서포트를 겸하기도 했습니다.&nbsp; 디자인 라이브러리&nbsp; <img width="3672" height="1884" width_o="3672" height_o="1884" data-src="https://freight.cargo.site/t/original/i/3f11a8ec18af00f8792d8e5fdde234eb5315440e7dec2c7035ccc7be804e47b9/APPIT_.png" data-mid="239547203" border="0" src="https://freight.cargo.site/w/1000/i/3f11a8ec18af00f8792d8e5fdde234eb5315440e7dec2c7035ccc7be804e47b9/APPIT_.png" />기존의 노후화된 UI를 전면 개편하고 라이브러리 키트를 다원화하여 향후 확장성을 고려한 디자인 시스템을 제작했습니다. https://rface.cargo.site/Data-driven-Design-for-MMTH Sat, 18 Oct 2025 17:38:51 +0000 portfolio-kjh.appro https://rface.cargo.site/Data-driven-Design-for-MMTH Data-driven Design for MMTH <img width="3509" height="2481" width_o="3509" height_o="2481" data-src="https://freight.cargo.site/t/original/i/6fb0509a731d9f26b3cdb5eb0aecf280c8bc48c07110698ddae7039ba61179df/_-01.png" data-mid="239545954" border="0" src="https://freight.cargo.site/w/1000/i/6fb0509a731d9f26b3cdb5eb0aecf280c8bc48c07110698ddae7039ba61179df/_-01.png" /> 개요 Overview 매머드 커피의 모바일 앱오더를 정량/정성 데이터 기반으로 개선했습니다. 매머드는 중저가 커피 프랜차이즈 업계에서 중상위권을 유지하는 약 70만명의 앱가입자수와 약 3만 4천 576명의 MAU를 보유한 중요 고객이었습니다. 발트루스트 UX디자인팀은 고객사의 마케터, 자사 기획자, 개발자와 크로스펑셔널하게 협업하며 앱 매출 증진과 UX개선, 사용자 만족도 향상을 위해 약 2년간 프로젝트를 리드했습니다. &nbsp; <img width="3414" height="1754" width_o="3414" height_o="1754" data-src="https://freight.cargo.site/t/original/i/3c84a48f54cf500951d45acab614cdc363f5cd7cd4481bb9406457f42db3095c/.png" data-mid="239546131" border="0" src="https://freight.cargo.site/w/1000/i/3c84a48f54cf500951d45acab614cdc363f5cd7cd4481bb9406457f42db3095c/.png" /> <img width="1723" height="2007" width_o="1723" height_o="2007" data-src="https://freight.cargo.site/t/original/i/0e0b07a21f68f0594201db006603ffb814ed00e591f031bc91bd2e0104631b94/GA-01.png" data-mid="239546125" border="0" src="https://freight.cargo.site/w/1000/i/0e0b07a21f68f0594201db006603ffb814ed00e591f031bc91bd2e0104631b94/GA-01.png" /> <img width="1724" height="1656" width_o="1724" height_o="1656" data-src="https://freight.cargo.site/t/original/i/1be08c38a597c8d5faf33d75683c7b61eb69b01959611850669bb896c80ecf0c/GA-02.png" data-mid="239546126" border="0" src="https://freight.cargo.site/w/1000/i/1be08c38a597c8d5faf33d75683c7b61eb69b01959611850669bb896c80ecf0c/GA-02.png" /> 정량 데이터 수집은 GA4/뷰저블/스노우플레이크로, 정성 데이터 수집은 고객사 점주(내부고객) 및 일반 사용자 설문조사를 통해서 진행했습니다. 이로써 의도한대로 활성화되어 있지 않은 앱의 버튼, 사용자들이 존재를 인지하지 못하고 숨어있는 UX플로우와 기능 등을 찾아내 문제를 발견 및 정의한 후 개선방향을 고객사에게 제안했습니다.&nbsp; 데이터 기반 UX 디자인 개선 1) 로그인 화면 이탈율 감소 (기획 50%, 실제 화면 UI디자인은 팀원이 진행) <img width="1724" height="1550" width_o="1724" height_o="1550" data-src="https://freight.cargo.site/t/original/i/85c5f3b338abe5a242cae8a518ddf0d4f4f610c629be0d2a7ea1b6c35afd055b/-_1.png" data-mid="239546297" border="0" src="https://freight.cargo.site/w/1000/i/85c5f3b338abe5a242cae8a518ddf0d4f4f610c629be0d2a7ea1b6c35afd055b/-_1.png" /> <img width="1724" height="1241" width_o="1724" height_o="1241" data-src="https://freight.cargo.site/t/original/i/0e026154678cd646e03e44c3fb17c9f5e99909808a321e8027450881d4aecb78/-_2.png" data-mid="239546298" border="0" src="https://freight.cargo.site/w/1000/i/0e026154678cd646e03e44c3fb17c9f5e99909808a321e8027450881d4aecb78/-_2.png" /> 2) 프로모션 참가율 증가 (기획 60%, 실제 화면 UI디자인은 팀원이 진행)&nbsp; <img width="1725" height="1320" width_o="1725" height_o="1320" data-src="https://freight.cargo.site/t/original/i/c8053549112f86cb800d869cc4844871fed9b52b8b7fc93ce634392df66f7f63/--_1.png" data-mid="239546331" border="0" src="https://freight.cargo.site/w/1000/i/c8053549112f86cb800d869cc4844871fed9b52b8b7fc93ce634392df66f7f63/--_1.png" /><img width="1724" height="970" width_o="1724" height_o="970" data-src="https://freight.cargo.site/t/original/i/b2c0c56d3207e85b342f7a9ae6f8da4e3fe854b390caa46019d4ee03d8d605c7/--_2_.png" data-mid="239546332" border="0" src="https://freight.cargo.site/w/1000/i/b2c0c56d3207e85b342f7a9ae6f8da4e3fe854b390caa46019d4ee03d8d605c7/--_2_.png" /> 3) 프리퀀시 프로모션 이벤트 응모 완수율 및 매출 증가 (기획 60%, 실제 화면 UI디자인은 팀원이 진행) &nbsp;<img width="1920" height="1080" width_o="1920" height_o="1080" data-src="https://freight.cargo.site/t/original/i/50c70916448e502750da1df2b309edf9cd22825225eb29a38fd299e6b67cbf16/--_1.png" data-mid="239546340" border="0" src="https://freight.cargo.site/w/1000/i/50c70916448e502750da1df2b309edf9cd22825225eb29a38fd299e6b67cbf16/--_1.png" /> <img width="1724" height="1600" width_o="1724" height_o="1600" data-src="https://freight.cargo.site/t/original/i/fede23f32331e664b43e9a759a18534d849d6b257d9707a5166f3d395b6f5657/-_2.png" data-mid="239546343" border="0" src="https://freight.cargo.site/w/1000/i/fede23f32331e664b43e9a759a18534d849d6b257d9707a5166f3d395b6f5657/-_2.png" /> 데이터 레포트 발행&nbsp; <img width="1920" height="1080" width_o="1920" height_o="1080" data-src="https://freight.cargo.site/t/original/i/5f13b310ee956e574d554744e8e91da63a64afcce050dbdbf7d88605f055c93c/_1.png" data-mid="239546352" border="0" src="https://freight.cargo.site/w/1000/i/5f13b310ee956e574d554744e8e91da63a64afcce050dbdbf7d88605f055c93c/_1.png" /> <img width="1920" height="1080" width_o="1920" height_o="1080" data-src="https://freight.cargo.site/t/original/i/6997e8fc5e3ed69ce82286b7f98eb9c750ea329f8880230caf8d89d5a8bc5804/_2.png" data-mid="239546353" border="0" src="https://freight.cargo.site/w/1000/i/6997e8fc5e3ed69ce82286b7f98eb9c750ea329f8880230caf8d89d5a8bc5804/_2.png" /> <img width="1920" height="1080" width_o="1920" height_o="1080" data-src="https://freight.cargo.site/t/original/i/59e8563a76fb4719db7d4925ad3b20506a47aae82d2ca8885dd1c1ee045f6c32/_3.png" data-mid="239546354" border="0" src="https://freight.cargo.site/w/1000/i/59e8563a76fb4719db7d4925ad3b20506a47aae82d2ca8885dd1c1ee045f6c32/_3.png" /> 프로젝트 초기 1년간은 분기별 1회 정적인 형태의 PDF로 보고서를 발송하다가, 자사가 스노우플레이크를 도입한 이후로는 동적 보고서 전환했습니다. 저희 팀 디자이너들은 피그마에 보고서의 전체 레이아웃을 디자인하고 간단한 파이썬 코드 작성을 통해서 내용을 구성해나갔습니다. (보고서 디자인 100%, 레포트 내용 구성 10%)&nbsp; GA4, 스노우플레이크의 도입과정에 대한 후기는 송언지 디자이너 팀원이 작성해주셨어요-: 👉📊 데이터 레포트로 UX, 마케팅 인사이트 도출하기: 스노우플레이크&nbsp;LINK 👉유저 행동을 포착하는 망원경, GA4 도입기 LINK CRM 서비스 제안&nbsp; <img width="1920" height="1080" width_o="1920" height_o="1080" data-src="https://freight.cargo.site/t/original/i/d8643314c2c90ece5a26470fb0f0e57c00496116b163509ead9dbf61d64ef1b4/_CRM.png" data-mid="239546582" border="0" src="https://freight.cargo.site/w/1000/i/d8643314c2c90ece5a26470fb0f0e57c00496116b163509ead9dbf61d64ef1b4/_CRM.png" /> 매머드 커피에게 필요한 CRM 마케팅 방법론을 자사 마케터 팀원과 설계하고 제안드렸으며 필요한 컨설팅 작업, 광고 컨텐츠 디자인 설계도 병행했습니다. &nbsp;&nbsp; https://rface.cargo.site/Pangsuni Sat, 18 Oct 2025 16:58:24 +0000 portfolio-kjh.appro https://rface.cargo.site/Pangsuni Pangsuni <img width="2164" height="1338" width_o="2164" height_o="1338" data-src="https://freight.cargo.site/t/original/i/9f809f50939b62009018a81ea4fccff785711379bede9786acac880ba3c98d7d/Base__1.png" data-mid="239540648" border="0" src="https://freight.cargo.site/w/1000/i/9f809f50939b62009018a81ea4fccff785711379bede9786acac880ba3c98d7d/Base__1.png" /> 개요 Overview 빵순이(Pangsuni)는 예약 기능을 중점으로 한 베이커리 플랫폼 서비스로 기획되었으며, 발트루스트의 파일럿 프로젝트로서 1년여간 베타 테스트 기간을 거쳤습니다. 저는 동료 마케터 1명, 디자이너 1명과 함께 공동 PO로서 제품의 아이데이션부터 PRD작성, MVP작업, 기획과 디자인까지의 모든 작업을 총괄하였습니다. <img width="2164" height="1339" width_o="2164" height_o="1339" data-src="https://freight.cargo.site/t/original/i/2c366b5e6d3f36ae76b49a5982ca45a8e00e23cd160761de1a3e1712d0c7a385/Base__2.png" data-mid="239540649" border="0" src="https://freight.cargo.site/w/1000/i/2c366b5e6d3f36ae76b49a5982ca45a8e00e23cd160761de1a3e1712d0c7a385/Base__2.png" /><img width="2164" height="1338" width_o="2164" height_o="1338" data-src="https://freight.cargo.site/t/original/i/769128ed1c7cc6feebb9a877956749c8fbda3c4296af359e2607997b3865bb56/Base__3.png" data-mid="239540650" border="0" src="https://freight.cargo.site/w/1000/i/769128ed1c7cc6feebb9a877956749c8fbda3c4296af359e2607997b3865bb56/Base__3.png" /> 상세한 제작 일지는 하단의 디스콰이엇에서 연재한 글로 대신합니다.&nbsp; &nbsp;메이킹 로그 1편, 크로스펑셔널 스쿼드팀이 일하는 법 https://dis.qa/s4U6 2편, DDD 워크샵 https://dis.qa/mlJBa 3편, PMF(Product Market Fit) 찍먹하기 https://dis.qa/jlQ4편, 파일럿 프로젝트 문닫기 https://dis.qa/JPNWrg 크리스마스 기획전 이벤트&nbsp; 1) 도메인 https://pangsuni.com/&nbsp; <img width="2164" height="1338" width_o="2164" height_o="1338" data-src="https://freight.cargo.site/t/original/i/7998de6e0a672a10f650ced3d04123af0fe4349583d89f66c28aebe3829f795d/Base__4_2.png" data-mid="239540668" border="0" src="https://freight.cargo.site/w/1000/i/7998de6e0a672a10f650ced3d04123af0fe4349583d89f66c28aebe3829f795d/Base__4_2.png" /> MVP로서 시장에서의 경험을 쌓고 고객과 소비자의 반응을 미리 확인하기 위해 크리스마스 기간 동안 6곳의 소규모 베이커리 가게들과 업무 협약을 맺고 시즌전용 상품 예약 서비스를 운영하였습니다. 전체 판매 상품의 갯수는 63개였으며 총 판매액은 290만 500원으로 마감하였습니다.&nbsp; 2) B2B 고객 매뉴얼&nbsp; 3) 매머드 커피 X 빵순이 콜라보레이션 이벤트&nbsp; <img width="2164" height="1338" width_o="2164" height_o="1338" data-src="https://freight.cargo.site/t/original/i/ff441cec35236abe521d988245af734dc30a72db5cff447d2b3d290c02ed36e8/Base__5_2.png" data-mid="239540669" border="0" src="https://freight.cargo.site/w/1000/i/ff441cec35236abe521d988245af734dc30a72db5cff447d2b3d290c02ed36e8/Base__5_2.png" /> 기존의 발트루스트 카페 프랜차이즈 고객중 매머드 커피의 디저트 고관여 고객들에게 빵순이 서비스에 대한 혜택을 드리는 이벤트를 진행해서, 자사의 SI 고객사 업무와 새 자체 프로덕트 간의 중첩지대를 모색하고 사용성 테스트를 하고자 했습니다. 앱내 이벤트 페이지 노출, 당근마켓 광고를 통해 참여자를 모집했고 빵순이 서비스를 이용해 예약을 완료한 고객에게 매머드 오더 선불카드를 충전해주는 리워드를 제공하는 식으로 진행했습니다. 실제 당첨자는 13명으로 마무리했습니다. 4) 데이터 리포트&nbsp; <img width="2128" height="1574" width_o="2128" height_o="1574" data-src="https://freight.cargo.site/t/original/i/f4479f536a09d50a17a8e77c48e14ace390d895380541b0e89f4116657dae16c/Base__6_.png" data-mid="239540653" border="0" src="https://freight.cargo.site/w/1000/i/f4479f536a09d50a17a8e77c48e14ace390d895380541b0e89f4116657dae16c/Base__6_.png" /> https://lookerstudio.google.com/reporting/e47adecd-2e11-4483-a1f5-ddc20984cd2f 크리스마스 이벤트의 정량적 성과지표를 확인하고, 6인의 사장님들께 이후 CRM 마케팅의 팁을 알려드리기 위해 데이터리포트를 발행했습니다. ‘빵순이 일요초대석’ 사용성 테스트 &nbsp; <img width="785" height="785" width_o="785" height_o="785" data-src="https://freight.cargo.site/t/original/i/b0d6e518ba95be86903dcf7fafaf09aea1b723984d6f4cb939998a62f9a0e494/Base__6.png" data-mid="239540654" border="0" src="https://freight.cargo.site/w/785/i/b0d6e518ba95be86903dcf7fafaf09aea1b723984d6f4cb939998a62f9a0e494/Base__6.png" /> <img width="785" height="785" width_o="785" height_o="785" data-src="https://freight.cargo.site/t/original/i/3c50210d7818a865972a4003da3e7a07629c0cba92264102932fd0e04a88bd94/Base__7.png" data-mid="239540655" border="0" src="https://freight.cargo.site/w/785/i/3c50210d7818a865972a4003da3e7a07629c0cba92264102932fd0e04a88bd94/Base__7.png" /> <img width="785" height="785" width_o="785" height_o="785" data-src="https://freight.cargo.site/t/original/i/ceaa93715752e8606da03dd40fb7266593cf310ff857592ce81fc7551b85e3f6/Base__8.png" data-mid="239540656" border="0" src="https://freight.cargo.site/w/785/i/ceaa93715752e8606da03dd40fb7266593cf310ff857592ce81fc7551b85e3f6/Base__8.png" /> * 문토 소셜링 모집 링크 https://www.munto.kr/socialing?id=409442영화보기+시식회를 접목한 소규모 행사를 개최해 빵순이 서비스를 소개하고 반응을 알아보는 시간을 가졌습니다. 13명의 참가자분이 오프라인 행사에 오셨으며 빵에 대한 개인적인 경험과 서비스에 대한 관심도를 현장에서 직접 대화로 풀며 정성 데이터를 수집할 수 있었습니다.&nbsp; &nbsp; https://rface.cargo.site/Motion-Designs Sat, 18 Oct 2025 16:18:09 +0000 portfolio-kjh.appro https://rface.cargo.site/Motion-Designs Motion Designs 개요 Overview UXUI 디자인시 동적인 모션 애니메이션을 추가해 사용자의 이목을 끌거나 UX상의 길찾기를 도와주는 상호작용을 강화하고자 하였습니다. 기존의 발트루스트에서 제작된 앱들은 모두 정적이거나 개발자가 가이드 없이 코드로 애니메이션을 만들고 있었기 때문에, 디자이너가 직접 만드는 애니메이션 시안과 관련 가이드를 실제 개발에 적용하게 되어 퀄리티를 높였다는 점에 의의가 있었습니다. &nbsp; 제작 툴은 어도비 애프터 이펙트와 로티파일을 사용했으며, 파일 용량 최적화를 위해 애프터 이펙트를 쓴 경우에도 BodyMovin 같은 플러그인을 통해 확장자를 json으로 앱내 삽입했습니다. &nbsp; &nbsp; Order Button -퀴즈노스/지미존스/앱핏APPIT- <img width="500" height="500" width_o="500" height_o="500" data-src="https://freight.cargo.site/t/original/i/91b993b18e312c0d505a455a2027dee0a1a083f7f7ea6bcbdbdf09055915ae37/Rottie_resize.gif" data-mid="239566069" border="0" data-scale="24" src="https://freight.cargo.site/w/500/i/91b993b18e312c0d505a455a2027dee0a1a083f7f7ea6bcbdbdf09055915ae37/Rottie_resize.gif" /> &nbsp;Tab Menu-앱핏APPIT- Loadling Icon-할리스 점주앱- https://rface.cargo.site/F-B-Mobile-Order Sat, 18 Oct 2025 13:30:26 +0000 portfolio-kjh.appro https://rface.cargo.site/F-B-Mobile-Order F&amp;B Mobile Ordering Service 개요 Overview 2년 10개월 동안 발트루스트에 근무하며&nbsp; F &amp; B 분야 모바일 앱 제작의 UXUI디자인 파트에서 기여했습니다. 제가 리드했던 UX디자인팀의 주 OKR 은 탬플릿 기반의 신규 앱 UI 디자인과 디자인 시스템 구축, B2B 고객 니즈에 맞춘 기존 앱 유지보수 및 디자인 리뉴얼이었습니다.&nbsp; &nbsp; <img width="3579" height="2056" width_o="3579" height_o="2056" data-src="https://freight.cargo.site/t/original/i/4e9b57272dc188ed2146eb6e02655695bdb966b4709195315b6f1093f4150ea1/_.png" data-mid="239538250" border="0" src="https://freight.cargo.site/w/1000/i/4e9b57272dc188ed2146eb6e02655695bdb966b4709195315b6f1093f4150ea1/_.png" /> <img width="1336" height="666" width_o="1336" height_o="666" data-src="https://freight.cargo.site/t/original/i/df855db841a0efe76fe7efec57748185dbe235fa330e8314390a5982d87ef787/-----2.png" data-mid="239538248" border="0" src="https://freight.cargo.site/w/1000/i/df855db841a0efe76fe7efec57748185dbe235fa330e8314390a5982d87ef787/-----2.png" /> 발트루스트는 메가MGC 커피 같은 카페 계열 위주의 식음료 프랜차이즈 약 38곳의 고객사를 보유하고 있고 이 중 제가 제작에 참여한 신규앱은 9종, 디자인을 리뉴얼한 앱은 4종, 유지보수를 관리하고 기여한 앱은 약 14종이었습니다. <img width="1920" height="1080" width_o="1920" height_o="1080" data-src="https://freight.cargo.site/t/original/i/ae7e592740fdda2635955cc0d22e2b63b0f07305bb5b35585dc9cfdac995a255/-.png" data-mid="239538436" border="0" src="https://freight.cargo.site/w/1000/i/ae7e592740fdda2635955cc0d22e2b63b0f07305bb5b35585dc9cfdac995a255/-.png" /> <img width="1920" height="1080" width_o="1920" height_o="1080" data-src="https://freight.cargo.site/t/original/i/ca7591ac68b269219a61bb4cc750e6a87ec6f2d7eb3ba39b43c05ce3130cdf2a/.png" data-mid="239538438" border="0" src="https://freight.cargo.site/w/1000/i/ca7591ac68b269219a61bb4cc750e6a87ec6f2d7eb3ba39b43c05ce3130cdf2a/.png" /> <img width="1920" height="1080" width_o="1920" height_o="1080" data-src="https://freight.cargo.site/t/original/i/265c29b5a5afb9c4c03ccf675ef623545ed9e28a1568c18710fc8d335368fed0/_-.png" data-mid="239538437" border="0" src="https://freight.cargo.site/w/1000/i/265c29b5a5afb9c4c03ccf675ef623545ed9e28a1568c18710fc8d335368fed0/_-.png" /> 앱들은 커스텀 범위의 경중에 따라 순서대로 라이트형(메인/멤버십만), 스탠다드형(메인/멤버십/오더 페이지까지), 스페셜형(전체)으로 분류해서 관리했으며 저는 주로 디자인 난이도가 높은 스탠다드형과 스페셜형을 작업했습니다. 하단에는 대표작만을 요약해 담았습니다. &nbsp; Jimmy John's 지미존스-신규앱/스탠다드형- <img width="2163" height="1443" width_o="2163" height_o="1443" data-src="https://freight.cargo.site/t/original/i/bc7d16629d03c3c356b551670308bbe0f549f3db727e1dc53a9b538e8d2d9e92/Base_.png" data-mid="239539509" border="0" src="https://freight.cargo.site/w/1000/i/bc7d16629d03c3c356b551670308bbe0f549f3db727e1dc53a9b538e8d2d9e92/Base_.png" /> 지미존스는 빠르고 신선함을 추구하는 활기찬 에너지, 영한 고객층, 정통 아메리칸 클래식 스타일의 선명함을 추구하는 브랜드입니다. 이러한 특징이 디자인에 잘 녹여지고 고객사가 원하는 필수 기능간의 조화로운 UX가 디자인의 메인 미션이었습니다. 볼드한 타이포그래피, 강한 대비의 레드 앤 블랙 컬러 시스템을 강조하고자 하였습니다.&nbsp; -UI 디자인- 1) 디자인 컨셉과 컬러 시스템, 애니메이션 (기여도 100%)2) 상세페이지: 메인, 사이드 드로워 페이지 디자인 (전체 중 기여도 30%) -프로토타이핑-&nbsp; -스토어 출시-🔗 구글 플레이스토어 🔗 ios 앱스토어 PARANMANJAN 파란만잔&nbsp;-신규앱/라이트형- <img width="2163" height="1444" width_o="2163" height_o="1444" data-src="https://freight.cargo.site/t/original/i/3667c0f04615a62851a3a3ca1ad946b1c4447f0a62cfa9f82c02e93d40b9a67f/Base_.png" data-mid="239539511" border="0" src="https://freight.cargo.site/w/1000/i/3667c0f04615a62851a3a3ca1ad946b1c4447f0a62cfa9f82c02e93d40b9a67f/Base_.png" /> -UI 디자인-1) 디자인 컨셉과 컬러 시스템, 애니메이션 (기여도 100%)2) 상세페이지: 메인, 스탬프 멤버십 페이지 디자인 (전체 중 기여도 20%) 파란만잔은 커피와 베이커리 기반의 프랜차이즈로 맛과 취향의 다채로움을 특징으로 내세우는 브랜드입니다. 실제 오프라인 매장의 인테리어도 맥시멀리스트들에게 사랑받을 만한 아기자기한 소품과 굿즈, 넓직한 좌석구조가 돋보입니다. 이러한 특징에 맞춰, 메인의 타이메뉴에 삽입 되는 아이콘에 디테일한 요소를 풍부하게 넣었으며 멤버십 페이지의 일러스트 그래픽에서도 잔재미를 주었습니다. -스토어 출시-🔗 구글 플레이스토어&nbsp; 🔗 ios 앱스토어 쿠우쿠우&nbsp;-신규앱/스페셜형-<img width="2163" height="1444" width_o="2163" height_o="1444" data-src="https://freight.cargo.site/t/original/i/197555513387a6ea987e1002abddc9135ef7dad58453cdea1b3d3adcff0b29ee/Base_.png" data-mid="239539510" border="0" src="https://freight.cargo.site/w/1000/i/197555513387a6ea987e1002abddc9135ef7dad58453cdea1b3d3adcff0b29ee/Base_.png" /> -UI 디자인-1) 제안서 시안 디자인, 디자인 컨셉과 컬러 시스템, 애니메이션 (기여도 100%)2) 상세페이지: 메인, 포인트 멤버십, 메뉴보기, 매장뱃지 페이지 디자인 (전체 중 기여도 40%) 초밥과 스시 뷔페 브랜드 쿠우쿠우의 앱 제작을 위한 제안서부터 실제 앱 디자인까지 작업을 맡았습니다. 기존에 자사 탬플릿에서 제작된 사례가 없던 종류의 페이지들, 새로운 기능들이 있어 고객사와 자사 기획팀, 중간 협력 기획사 ‘아트그라피’ 등 여러 담당자와 장시간 협업했습니다.&nbsp;-프로토타이핑- 발트루스트의 멤버십 앱과 협력사 친구플러스의 쇼핑몰 홈페이지 앱 사이의 전환 애니메이션 작업을 많은 테스트를 거쳐 담당 개발자와 소통하며 진행했습니다.&nbsp; -스토어 출시-🔗 구글 플레이스토어&nbsp; 🔗 ios 앱스토어 카페봄봄&nbsp;-디자인 리뉴얼/스페셜형- <img width="2163" height="1443" width_o="2163" height_o="1443" data-src="https://freight.cargo.site/t/original/i/c04c2f7b45742b474038c6d13cfb764003462013cdcb75130dd90fc644761ddc/Base_.png" data-mid="239539584" border="0" src="https://freight.cargo.site/w/1000/i/c04c2f7b45742b474038c6d13cfb764003462013cdcb75130dd90fc644761ddc/Base_.png" /> -UI 디자인-1) 디자인 컨셉과 컬러 시스템, 애니메이션 (기여도 100%)2) 상세페이지: 메인, 사이드 드로워, 스탬프 멤버십 페이지 디자인 (전체 중 기여도 20%) -스토어 출시-🔗 구글 플레이스토어&nbsp; 🔗 ios 앱스토어 (*리뉴얼 버전은 2025년 11월 중순 경 업데이트될 예정입니다.)메가 MGC 커피&nbsp;-SI 유지보수/스페셜형- <img width="2014" height="1230" width_o="2014" height_o="1230" data-src="https://freight.cargo.site/t/original/i/bef4845fe351ed32ad97aea67d71812e894a997896861827fea783767bcc17a7/-.png" data-mid="239539489" border="0" src="https://freight.cargo.site/w/1000/i/bef4845fe351ed32ad97aea67d71812e894a997896861827fea783767bcc17a7/-.png" /> <img width="2163" height="1443" width_o="2163" height_o="1443" data-src="https://freight.cargo.site/t/original/i/d2587891cbf24f7de49c958cf43eebdd3cadb52c6c3801258168e48e69fa5d23/Base_.png" data-mid="239539508" border="0" src="https://freight.cargo.site/w/1000/i/d2587891cbf24f7de49c958cf43eebdd3cadb52c6c3801258168e48e69fa5d23/Base_.png" />-UI 디자인-1) 모바일과 에이전트 UXUI 디자인 (기여도 100%) 발트루스트의 가장 큰 고객사인 메가커피의 홀케이크 예약 서비스 디자인 전반을 담당했습니다. 자사 기획팀의 기획안을 골자로 UI디자인만을 진행했으며 앱과 연관해 기존의 에이전트 디자인도 수정했습니다. 새로운 예약 기능의 추가였기 때문에 담당 서비스 기획자와 기획을 미팅과 테스트를 통해 같이 수정해가면서 작업을 완수했습니다. &nbsp;&nbsp; -스토어 출시-🔗 구글 플레이스토어&nbsp; 🔗 ios 앱스토어(*메가커피의 앱 리뉴얼로 인해 현재는 실제 앱에서는 볼 수 없는 기능입니다.) https://rface.cargo.site/GrotesQ Thu, 09 Feb 2023 05:09:04 +0000 portfolio-kjh.appro https://rface.cargo.site/GrotesQ GrotesQ 개요 Overview 다양한 형태의 웹서비스 고도화와 신규 개발 의뢰를 수행하는 스튜디오, 그로테스큐에서 했던 작업들을 소개합니다. UX 디자인을 메인 롤로 두고, 기획과 PM업무를 서브 롤로 수행했습니다. UI 라이브러리 입사한 시점부터, 디자이너 동료 1명과 함께 착수하는 모든 프로젝트들을 디자인 하면서 작업한 컴포넌트와 시스템을 사내 UI 라이브러리로 정리하고, 쥬니어 디자이너들한테 가이드라인을 줄 수 있는 플러그인이나 디자인 레퍼런스 관련 내용도 기록하는 페이지를 만들었습니다. 이 외에도 피그마의 각 페이지들의 특징과 정보를 개발자와 클라이언트들이 인지하기 쉽게 하기 위해서, 일목요연한 트리구조를 만드는 등 전반적인 사내 디자인 프로세스를 정립했습니다. 레이어 지지 Layer.gg <img width="12500" height="8338" width_o="12500" height_o="8338" data-src="https://freight.cargo.site/t/original/i/5400044b3d62d020b588395cce063cab68982c2d3501881ca4d871db5aeb902a/__.png" data-mid="167811960" border="0" src="https://freight.cargo.site/w/1000/i/5400044b3d62d020b588395cce063cab68982c2d3501881ca4d871db5aeb902a/__.png" /> <img width="12500" height="8338" width_o="12500" height_o="8338" data-src="https://freight.cargo.site/t/original/i/ff44a6a1e927ef84ddb36fe49f0f58474e2a8eb8b49e6ef235f1abcaff49d056/__2.png" data-mid="167811998" border="0" src="https://freight.cargo.site/w/1000/i/ff44a6a1e927ef84ddb36fe49f0f58474e2a8eb8b49e6ef235f1abcaff49d056/__2.png" /> 개요 Overview 레이어 지지는 블록체인과 크립토 경제의 실시간 변동상황을 트레이더들에게 알려주는 웹사이트입니다. 크게는 정보제공과 커뮤니티 교류, 이 두가지 핵심 기능을 제공하면서, 기존의 고객사가 텔레그램을 통해 마이크로 뉴스 형식으로 서비스하던 내용을 정식 사이트화하려는 미션이 있었습니다. <img width="12500" height="8338" width_o="12500" height_o="8338" data-src="https://freight.cargo.site/t/original/i/7a24f5eeac8c41a53ac128f99b76ee61592c96a11c76b07e0b4df2261d4a7a74/__3.png" data-mid="167812033" border="0" src="https://freight.cargo.site/w/1000/i/7a24f5eeac8c41a53ac128f99b76ee61592c96a11c76b07e0b4df2261d4a7a74/__3.png" /> 디자인 리서치 Design Research https://www.notion.so/_09-05-4c29e9be5f8b46aaa6fecd32ca703ae4 디자인 컨셉 Design Concept &lt;1&gt; 글래스 질감 / 그라디언트 / 홀로그램 / 네온 Glassmorphism / Smooth Gradient /&nbsp;Layer + Shadow Holographic /&nbsp;Neon -2021년도부터 UX/UI 트렌드로 유행중인 글래스모피즘을 적용해, 투명한 레이어, 그라데이션 컬러를 곳곳에 사용했습니다. -컬러 구성도 보색 대비를 기반으로 네온 컬러 위주로 사용해 현실세계와 다른 가상의 개념인 크립토 생태계의 분위기를 잘 표현할 수 있게 했습니다. &lt;2&gt; 클레이모피즘 / 메타버스 / 커뮤니티 친화성 Claymorphism / Metaverse / Community Friendly -커뮤니티 사용시 유저가 자신을 가상 세계에서 살아 움직이는 캐릭터처럼 느낄 수 있도록, 사이트에서 기본으로 제공하는 3D 일러스트의 프로필 사진을 취향껏 골라쓸 수 있는 연출을 했습니다. -전체적인 디자인의 인상을 NFT 게임 UI와 유사하게 구성했습니다. &lt;3&gt; 분할화면 Split Screen Design -섹션에 따라 컬러를 과감하게 분할해서 사용해서 정보의 성격을 시각적으로 깔끔하게 분리해서 알아 볼 수 있게끔 유도했습니다. &lt;4&gt; 방대한 정보의 미니멀라이징 Minimalizing Complexity, but Intensive Visualization -뎁스를 늘리지 않으면서, 모든 정보를 펼쳐서 늘어뜨리지만은 않는 방식을 고민했습니다. 방대하고 복잡한 정보들로 페이지가 구성되기 때문에, 탭메뉴/토글버튼/페이지네이션을 최대한 활용해서 정보들을 수납했습니다. &lt;5&gt; 네거티브 컬러 / 다크모드 Split Screen Design -한번의 많은 정보를 전달해야 하고 실시간으로 업데이트되야 하는 트레이딩 보드의 성격을 고려해, 유저의 피로도를 낮추고 집중도를 높일 수 있도록 반전된 배합과 다크모드를 기본으로 하는 컬러 시스템을 활용했습니다.&nbsp; &nbsp; <img width="12500" height="8338" width_o="12500" height_o="8338" data-src="https://freight.cargo.site/t/original/i/700a75fa33c62a06a65d676d3123ecdfb3c0011fef31f52b83c43f63c310f82f/__4.png" data-mid="167812445" border="0" src="https://freight.cargo.site/w/1000/i/700a75fa33c62a06a65d676d3123ecdfb3c0011fef31f52b83c43f63c310f82f/__4.png" /> <img width="12500" height="8338" width_o="12500" height_o="8338" data-src="https://freight.cargo.site/t/original/i/b1b40f66b5d668da276d9a7d2bda18213e96e87b652b7baf9c7059b40a7ce26f/__5.png" data-mid="167812468" border="0" src="https://freight.cargo.site/w/1000/i/b1b40f66b5d668da276d9a7d2bda18213e96e87b652b7baf9c7059b40a7ce26f/__5.png" />컴포넌트 Components 페이지 디자인 Pages https://rface.cargo.site/zerodocs Wed, 01 Jun 2022 04:20:06 +0000 portfolio-kjh.appro https://rface.cargo.site/zerodocs Zero Docs <img width="12500" height="8338" width_o="12500" height_o="8338" data-src="https://freight.cargo.site/t/original/i/2d7fbbbbe25e7f6d393a8ad2e67196d47c1251df56c2823999dd7fce3fd284ae/.jpg" data-mid="144214853" border="0" src="https://freight.cargo.site/w/1000/i/2d7fbbbbe25e7f6d393a8ad2e67196d47c1251df56c2823999dd7fce3fd284ae/.jpg" /> 개요 Overview 제로독스는 웹/앱 서비스를 이용하는 사용자의 개인정보 침해를 방지하기위해, 회원 이용약관을 자동으로 모으고 위험성도 분석해주는 모바일 어플리케이션입니다. &nbsp; &lt;제작 정보&gt; 375*812px (Iphone 11 pro) Figma, Adobe Illustration 아하 포인트 AHA Point 1. 귀찮고 어려운 ‘이용 약관’ 문서를 한번에 모아서 볼 수 있게 해준다. 2. 이용약관 내용 중 개인정보 침해 위험 요소를 미리 짚어줘서 유출 피해를 미연에 방지하도록 돕는다. 정보구조도 IA 인앱 라이팅 UX Writing 컨셉 Concept <img width="12500" height="8338" width_o="12500" height_o="8338" data-src="https://freight.cargo.site/t/original/i/47793bfe0d4c721cba31190221f7f516ca4a1ab81986b54cc96727e5c9111858/2.jpg" data-mid="144214854" border="0" src="https://freight.cargo.site/w/1000/i/47793bfe0d4c721cba31190221f7f516ca4a1ab81986b54cc96727e5c9111858/2.jpg" /> 1. 로고 Logo 수면아래에서 헤엄치는 상어의 지느러미를 브랜드 아이덴티티로 만들어서 이용약관 내용 안에 잠재해 있는 위험요소를 위트있게 표현하고자 했습니다. 상어 모티브 그 자체가, 0에서 2마리로 수가 늘어날 수록 해당 약관 내용에 대한 위험지표도 크게 보여주는 인디케이터 역할을 하게끔 장치했습니다. 2. 컬러 Color 강한 대비로 주목성이 높아, 도로 교통 표지판에 많이 쓰이는 블랙과 옐로우를 주 컬러로 썼으며, 위험/주의/안전에 따라 그린/옐로우/오렌지의 신호등식 3색 컬러를 번갈아 사용했습니다. 하이파이 프로토 타입 디자인 Hi-fi Prototype <img width="12500" height="8338" width_o="12500" height_o="8338" data-src="https://freight.cargo.site/t/original/i/2afcd43e10ab166b22f7fde27be41853a26c74577fa35df6b8c13bdfeb33c5ea/3.jpg" data-mid="144214855" border="0" src="https://freight.cargo.site/w/1000/i/2afcd43e10ab166b22f7fde27be41853a26c74577fa35df6b8c13bdfeb33c5ea/3.jpg" /> <img width="12500" height="8338" width_o="12500" height_o="8338" data-src="https://freight.cargo.site/t/original/i/f1e0639e3a8f6d92b197bf9a351b452753457c13ed8e40b92f961877497d2331/4.jpg" data-mid="144214856" border="0" src="https://freight.cargo.site/w/1000/i/f1e0639e3a8f6d92b197bf9a351b452753457c13ed8e40b92f961877497d2331/4.jpg" /> <img width="12500" height="8338" width_o="12500" height_o="8338" data-src="https://freight.cargo.site/t/original/i/f3d4ee5b4d38a13443a4e99a7a0fa5e493bbfddcc6e1d619f5c3f3e54845d4fe/5.jpg" data-mid="144214858" border="0" src="https://freight.cargo.site/w/1000/i/f3d4ee5b4d38a13443a4e99a7a0fa5e493bbfddcc6e1d619f5c3f3e54845d4fe/5.jpg" /> <img width="12500" height="8338" width_o="12500" height_o="8338" data-src="https://freight.cargo.site/t/original/i/d3423a061613e8004801f23b82624971e97991f7d2f62f48921691a9762a212f/6.jpg" data-mid="144214859" border="0" src="https://freight.cargo.site/w/1000/i/d3423a061613e8004801f23b82624971e97991f7d2f62f48921691a9762a212f/6.jpg" /> <img width="12500" height="8338" width_o="12500" height_o="8338" data-src="https://freight.cargo.site/t/original/i/e39c38c3551d07d5fa8ca4ef005e4b335070653fd21c26ca2028569ea943ef65/7.jpg" data-mid="144214860" border="0" src="https://freight.cargo.site/w/1000/i/e39c38c3551d07d5fa8ca4ef005e4b335070653fd21c26ca2028569ea943ef65/7.jpg" /> <img width="12500" height="8338" width_o="12500" height_o="8338" data-src="https://freight.cargo.site/t/original/i/bcd4daf53c054712a1ee61e0ec98ac93179a13af55c68807019d675d16c2c675/8.jpg" data-mid="144214861" border="0" src="https://freight.cargo.site/w/1000/i/bcd4daf53c054712a1ee61e0ec98ac93179a13af55c68807019d675d16c2c675/8.jpg" /> <img width="12500" height="8338" width_o="12500" height_o="8338" data-src="https://freight.cargo.site/t/original/i/2fc1afa5506628531c1966f2f7b0957b30b727240d593ff8c771a29cd1c81d64/9.jpg" data-mid="144214862" border="0" src="https://freight.cargo.site/w/1000/i/2fc1afa5506628531c1966f2f7b0957b30b727240d593ff8c771a29cd1c81d64/9.jpg" /> https://rface.cargo.site/lapllab Wed, 01 Jun 2022 03:28:58 +0000 portfolio-kjh.appro https://rface.cargo.site/lapllab Attale Pro &amp;&nbsp;Attale <img width="12500" height="8338" width_o="12500" height_o="8338" data-src="https://freight.cargo.site/t/original/i/efd3ed29d7bc5f8552ad82be10e6a1c9ab337b7126c72a112be804e41cbcb5cd/-_1.jpg" data-mid="144213089" border="0" src="https://freight.cargo.site/w/1000/i/efd3ed29d7bc5f8552ad82be10e6a1c9ab337b7126c72a112be804e41cbcb5cd/-_1.jpg" /> 개요 Overview 라이프플래닝연구소(*이하 라플랩)에서 UX/컨텐츠 디자이너로 일하며, 프로덕트를 성장시키는데 기여했습니다. 라플랩에는 B2B와 B2C 대상의 프로덕트, 어테일 프로(Attale Pro)와 어테일(Attale)이 있으며 이중 저는 어테일 파트에서 가장 많은 리소스를 투여했습니다.&nbsp; 어테일과 어테일 프로는 모두 생산성 어플리케이션으로 생애설계협회라는 사회학/복지 이론을 베이스로 만들어졌으며, 유저가 재무와 직업 영역은 물론 관계 등 인생의 총 8가지 영역에서 스스로의 비전대로 균형있게 삶을 플래닝한다는 공통의 모토를 갖는 제품들입니다. 일반적인 스케줄링 앱이나 식단 등의 일상 관리앱에 비해서, 전나이대에 걸친 포괄적이고 장기적인 관점으로 유저의 라이프플래닝 이슈들에 접근한다는 특성이 있었습니다. 어테일의 경우는 특히, 제품의 아하포인트부터 타겟팅, 페인포인트 설정부터 유저테스트 등 까지, 전반적인 기획 개편이 프로덕트 개발 초기 시점보다 훨씬 더 사용자 친화적으로 이루어져야 한다는 미션이 있었으며, 이 미션 수행에 있어 저는 디자인은 물론 기획 부분과 전반적인 프로젝트 매니징에 있어서도 팀원들과 함께 공통의 기여를 했습니다. 하단의 작업들은 그 결과물들입니다. &lt;제작 정보&gt; 360*800px (Android Large) Figma, Adobe Illustration, Maze 1. Attale Pro <img width="12500" height="8338" width_o="12500" height_o="8338" data-src="https://freight.cargo.site/t/original/i/9d4dc4029ec583edc8ffc48a538ed3b410c7f94d9b98eaf5fd1475f0ebb522b6/-_2_.jpg" data-mid="144275492" border="0" src="https://freight.cargo.site/w/1000/i/9d4dc4029ec583edc8ffc48a538ed3b410c7f94d9b98eaf5fd1475f0ebb522b6/-_2_.jpg" /> <img width="12500" height="8338" width_o="12500" height_o="8338" data-src="https://freight.cargo.site/t/original/i/0e535368996f3e9c799abadc0fd95f5496f4e6cbd44d253c2bbdc3c3e28e5d17/-__.jpg" data-mid="144275984" border="0" src="https://freight.cargo.site/w/1000/i/0e535368996f3e9c799abadc0fd95f5496f4e6cbd44d253c2bbdc3c3e28e5d17/-__.jpg" /> -컨텐츠 디자인-&nbsp;온보딩 화면 및 홈 화면에 삽입되는 배너 8종을&nbsp; 디자인하고, 금융감독원 대상의 영업 프리젠테이션 자리에서 쓰이는 홍보 동영상을 제작했습니다. <img width="12500" height="8338" width_o="12500" height_o="8338" data-src="https://freight.cargo.site/t/original/i/ac3a0e717ec0ed6781e919f1c640c0a075c77e40f382e3a49f065b3495415a3a/-__2.jpg" data-mid="144275985" border="0" src="https://freight.cargo.site/w/1000/i/ac3a0e717ec0ed6781e919f1c640c0a075c77e40f382e3a49f065b3495415a3a/-__2.jpg" /> <img width="12500" height="8338" width_o="12500" height_o="8338" data-src="https://freight.cargo.site/t/original/i/7d42d82747fc1a1e0bb3567000bcfda4806e0190c1a737ee24f0da900b1cbb80/-__3.jpg" data-mid="144275986" border="0" src="https://freight.cargo.site/w/1000/i/7d42d82747fc1a1e0bb3567000bcfda4806e0190c1a737ee24f0da900b1cbb80/-__3.jpg" /> -사용성 개선- 지출/자산/소득 분류의 선택 방식을 기존의 텍스트 리스트형식에서 보다 직관적인 아이콘 형식으로 바꾸는 디자인을 진행했습니다.&nbsp; *구글 플레이스토어 다운링크 https://vo.la/ql5frq 2. Attale Finance -사용성 개선- 사용자가 자신이 설정한 목표에 자산을 연동시킬 시, 기존 구버전 어플에서는 5뎁스 이상으로 지나치게 뎁스가 동굴처럼 깊어져 들어가는 문제가 있었습니다. 이 문제를 개선하기 위해 3뎁스 안에서 유저가 어플 안에서 길을 잃어버리지 않고 자신의 자산 연동설정을 완료할 수 있도록 다이얼로그창을 생성하는 방향으로 디자인을 진행했습니다. &nbsp; *구글 플레이스토어 다운링크&nbsp;https://vo.la/zyAgOT 3. Attale 2.0 -기획 공통 기여- 1) 페인포인트, 솔루션, BM(Business Model) (기여도 3-40%) 2) 인앱 / 바이럴 컨텐츠 기획 (기여도: 100%) 서비스 기획자 한 분, 마케터 한 분과 어테일의 개편이라는 미션을 공동 수행하는 팀을 꾸려 1달정도는 기획에 집중해서 위의 1)과 2)의 기초토대를 설계했습니다. &nbsp; *페인포인트 기획문서 링크&nbsp; https://whimsical.com/2-0-MXiJHzHFoqc9UKGfojt7gU -디자인- 1) UI 디자인 (기여도 40%)2) 컨텐츠 디자인 (기여도 100%)&nbsp;<img width="12500" height="8338" width_o="12500" height_o="8338" data-src="https://freight.cargo.site/t/original/i/42c429a0b59e6bc0db0009ff2e87a3506fd311812ecd4b584ce1e50afe36fc57/-__4.jpg" data-mid="144275987" border="0" src="https://freight.cargo.site/w/1000/i/42c429a0b59e6bc0db0009ff2e87a3506fd311812ecd4b584ce1e50afe36fc57/-__4.jpg" /> <img width="12500" height="8338" width_o="12500" height_o="8338" data-src="https://freight.cargo.site/t/original/i/dab639226216c9e6f0390909ac96d483cd2224bcedd9670735763da09b933736/-_6p.jpg" data-mid="144276655" border="0" src="https://freight.cargo.site/w/1000/i/dab639226216c9e6f0390909ac96d483cd2224bcedd9670735763da09b933736/-_6p.jpg" /><img width="12500" height="8338" width_o="12500" height_o="8338" data-src="https://freight.cargo.site/t/original/i/2346b49520dd54a435f98581618654626cf279bf273344e8699d9bb964448bfa/-_2_2.jpg" data-mid="144275495" border="0" src="https://freight.cargo.site/w/1000/i/2346b49520dd54a435f98581618654626cf279bf273344e8699d9bb964448bfa/-_2_2.jpg" /><img width="12500" height="8338" width_o="12500" height_o="8338" data-src="https://freight.cargo.site/t/original/i/b13f018526d7484acd5f256d4731914eed064bb8d28c3041810a72fda164992a/-_2_3.jpg" data-mid="144275513" border="0" src="https://freight.cargo.site/w/1000/i/b13f018526d7484acd5f256d4731914eed064bb8d28c3041810a72fda164992a/-_2_3.jpg" />유저테스트와 실제 프로덕트 출시에 있어 최종적으로는, 제가 기획단계에서 냈던 아이디어중 ‘목표 키트’라는 형태가 개발단계까지 반영되어 구현되었습니다. 목표 키트의 기본 아이디어는 학교에 처음 입학하거나, 회사 조직에 처음 들어오는 사회초년생들을 대상으로인생의 ‘웰컴 키트’를 제공해주면 도움을 줄 수 있다는 발상에서 출발했습니다. 실제로 근래의 많은 대학 학과나 동아리, HR 부서에서 쥬니어들이 공동체에 잘 적응할 수 있도록 유무형적인 온보딩 교육과 프로젝트를 하고 있습니다. 키트 형태의 선물을 주기도 하고 교육 프로그램을 진행하기도 합니다. 무엇을 준비해야 하는지, 어떤 것부터 미리 생각해두어야 하는지 처음부터 알기 어려운 것을 단계별로 ‘태스크’라는 형태의 투두리스트 형식의 셋(set)을 짜서 점선을 그리듯이 경로를 미리 보여주면 ‘라이프 플래닝’이라는 큰 미션을 버겁지 않게 자신이 할 수 있는 수준으로 작은 것 부터 시작할 수 있다는 것이 저를 포함한 기획팀의 가설이었습니다. &nbsp; 이 가설은 이후 MVP 설문조사와 유저테스트를 거치면서 목표 키트라는 아이디어에 대한 좋은 유저들의 반응을 이끌어내며앞으로도 꾸준히 정교화해서 발전시켜볼만한 것이라는 인사이트를 얻을 수 있었습니다.&nbsp;&nbsp; <img width="12500" height="8338" width_o="12500" height_o="8338" data-src="https://freight.cargo.site/t/original/i/814052c8676a42fb76b96c95e1c59c8a44aeabdea74374c72e7e9e9377a9bcf3/-__7.jpg" data-mid="144275990" border="0" src="https://freight.cargo.site/w/1000/i/814052c8676a42fb76b96c95e1c59c8a44aeabdea74374c72e7e9e9377a9bcf3/-__7.jpg" /> <img width="12500" height="8338" width_o="12500" height_o="8338" data-src="https://freight.cargo.site/t/original/i/00a12087cdd8aef182231f300864001d255902f445c3f40c37afd7a75a684abe/-__8.jpg" data-mid="144275991" border="0" src="https://freight.cargo.site/w/1000/i/00a12087cdd8aef182231f300864001d255902f445c3f40c37afd7a75a684abe/-__8.jpg" /> *첫번째 MVP 설문조사 링크 https://lapllab.oopy.io/b3be5ea0-1222-484e-8c98-b123217a506d<img width="12500" height="8338" width_o="12500" height_o="8338" data-src="https://freight.cargo.site/t/original/i/5935f3c5ff1d482ca20ab23f0442d9b8acb741ed0d360fc2ef4cd92f36f74ef7/-__9.jpg" data-mid="144275992" border="0" src="https://freight.cargo.site/w/1000/i/5935f3c5ff1d482ca20ab23f0442d9b8acb741ed0d360fc2ef4cd92f36f74ef7/-__9.jpg" /> *어테일 2.0 유저테스트 링크 https://t.maze.co/81991992 https://rface.cargo.site/OffShop Sun, 18 Apr 2021 16:55:10 +0000 portfolio-kjh.appro https://rface.cargo.site/OffShop Off-Shop <img width="8750" height="5836" width_o="8750" height_o="5836" data-src="https://freight.cargo.site/t/original/i/a499606eedc5796402e001fe39ed446bacfdf6ad3ea9b65514e8fde2e84b684f/__3.jpg" data-mid="125147138" border="0" src="https://freight.cargo.site/w/1000/i/a499606eedc5796402e001fe39ed446bacfdf6ad3ea9b65514e8fde2e84b684f/__3.jpg" /> 개요 Overview 오프숍(Off-Shop)은 ‘낮춰진 할인가로 쇼핑한다’, ‘시즌이 지난 제품을 판매한다’의 의미로, 브랜딩부터 UX 디자인까지 진행한 가상의 사업체명입니다. &lt;제작 정보&gt; 1920*1080px Sketch, Figma, Adobe Illustration, Photoshop 전략 Strategy 기존의 리테일 시장, 중고마켓, 아울렛 백화점을 애용하는 안목있는 소비자들을 타겟화 오프시즌 마켓에서 퀄리티 높은 물건을 합리적으로 쇼핑하는 소비자에게 좋은 플랫폼을 제공 파편적으로 흩어져 있는 각 브랜드별 시즌오프 세일 정보와 혜택, 아울렛 입고, 재고상황을 한눈에 볼 수 있게 구조화 오프헌터 서비스를 통해 희소성 있는 상품을 끝까지 찾아주는 고 퀄리티 서비스 제공&nbsp; (회원제나 유료로 전환할 수 있는 등급별 내용 제시) 코로나 펜데믹 이후 지속되는 소비불황 속에서 각 브랜드사가 재고품을 보다 원활하게 유통시킬 수 있도록 서비스를 제공 브랜드와의 제휴를 통해 오프숍에서만 추가로 획득할 수 있는 추가 혜택과 할인 적용 쿠폰 서비스 제공 <img width="8750" height="5836" width_o="8750" height_o="5836" data-src="https://freight.cargo.site/t/original/i/c916b16b51e4092b3bc062b324128d1958fc5d19a9436a14961d57a915ce8e52/__32.jpg" data-mid="125147145" border="0" src="https://freight.cargo.site/w/1000/i/c916b16b51e4092b3bc062b324128d1958fc5d19a9436a14961d57a915ce8e52/__32.jpg" /> <img width="8750" height="5836" width_o="8750" height_o="5836" data-src="https://freight.cargo.site/t/original/i/472e9b09f34050243a73d98a7bfa6e4b99b3f95e20737e52d42f31ce24399f24/__33.jpg" data-mid="125147146" border="0" src="https://freight.cargo.site/w/1000/i/472e9b09f34050243a73d98a7bfa6e4b99b3f95e20737e52d42f31ce24399f24/__33.jpg" /> <img width="8750" height="5836" width_o="8750" height_o="5836" data-src="https://freight.cargo.site/t/original/i/43f817a7eb2047906d45ea993e413b6fdf7a9718402716683b375266d80ac825/__34.jpg" data-mid="125147147" border="0" src="https://freight.cargo.site/w/1000/i/43f817a7eb2047906d45ea993e413b6fdf7a9718402716683b375266d80ac825/__34.jpg" /> 컨셉 Concept&nbsp; 1. 로고 Logo -원가에 취소선을 긋고 낮춰진 세일가를 병행 표시하는 상품 가격표시 관행에서 아이디어를 얻어, 가로 획이 길다란 직선을 주요 모티브로 활용했습니다. &nbsp; 2. 타이포그래피 Typography -부드러운 휴머니즘 인상의 고딕계열을 써서, 정확한 상품 정보에 대한 신뢰를 주면서도 캐주얼하고 친숙한 인상을 주고자 했습니다.&nbsp; 3. 컬러 Color -완전히 새로운 신상(White)이나 매우 오래된 빈티지(Black)가 아닌, 그 중간 쯤의 이월상품이란 의미로 뉴트럴한 쿨그레이 계열의 컬러를 주로 사용했습니다. -캘린더 기능과 관련한 영역에서는 스케줄러에 “슥-슥-” 마커펜 색표기를 한 것 같은 인상을 주기 위해서, 부분적으로 파스텔톤 컬러를 썼습니다. &nbsp;&nbsp; 기획서 Proposal 1. 목표 설정 1.1 공감하기 (관련 기사) 1.2 정의하기 2. 문제점 도출 2.1 경쟁사 리서치 2.2 아이디어 리스트화 3. 프로토타입 만들기 3.1 유저 플로우 &nbsp; <img width="8750" height="5836" width_o="8750" height_o="5836" data-src="https://freight.cargo.site/t/original/i/d8f79c298aaa2922de4be51d36498379312a13d3b57cd708297e9d6c9c5dfc04/__37.jpg" data-mid="125147150" border="0" src="https://freight.cargo.site/w/1000/i/d8f79c298aaa2922de4be51d36498379312a13d3b57cd708297e9d6c9c5dfc04/__37.jpg" /> <img width="8750" height="5836" width_o="8750" height_o="5836" data-src="https://freight.cargo.site/t/original/i/cd13a2bb68208ae0f96efd2a656fde249e65eaee1fa405e6aedfa22b4322527c/__38.jpg" data-mid="125147151" border="0" src="https://freight.cargo.site/w/1000/i/cd13a2bb68208ae0f96efd2a656fde249e65eaee1fa405e6aedfa22b4322527c/__38.jpg" /> <img width="8750" height="5836" width_o="8750" height_o="5836" data-src="https://freight.cargo.site/t/original/i/502063c90779af534d29ec3f4ef9a56b72e4d06892e2bda3f056cc3b911225a7/__35.jpg" data-mid="125147148" border="0" src="https://freight.cargo.site/w/1000/i/502063c90779af534d29ec3f4ef9a56b72e4d06892e2bda3f056cc3b911225a7/__35.jpg" /> <img width="8750" height="5836" width_o="8750" height_o="5836" data-src="https://freight.cargo.site/t/original/i/fb2b9a5359c83b41b53f51b91b44cdf0c020eb6338bf1eacf92caabb25eb9a1a/__36.jpg" data-mid="125147149" border="0" src="https://freight.cargo.site/w/1000/i/fb2b9a5359c83b41b53f51b91b44cdf0c020eb6338bf1eacf92caabb25eb9a1a/__36.jpg" /> <img width="1920" height="1080" width_o="1920" height_o="1080" data-src="https://freight.cargo.site/t/original/i/e36bd20a0b0001e097c71b3df5ee4d83b27f71385d8da82b0d94007d314fcff6/Offshop-Banner.gif" data-mid="125115148" border="0" src="https://freight.cargo.site/w/1000/i/e36bd20a0b0001e097c71b3df5ee4d83b27f71385d8da82b0d94007d314fcff6/Offshop-Banner.gif" /> 사용성 Usability 1. 4가지 배너&nbsp; -높은 비율로 세일 진행중인 브랜드 소개-&gt;핵심 서비스인 오프 헌터 서비스 체험 유도-&gt;오프숍 첫 론칭 기념 이벤트-&gt;오프시즌 마켓 이용 안내, 순서대로 배너 노출 -오프시즌 마켓과 리테일 시장이 무엇인지, 기존의 중고샵 서비스와 오프숍은 무엇이 다른지 설명하는 페이지로 연결하는 단계를 만들어두기 2. 강력한 검색 기능 -오프숍을 방문하는 고객들은 이미 사이트를 방문하기 전부터 찾고 있는 브랜드와 상품, 모델명이 확실하다는 전제로 강력한 검색창 기능 제공 -검색창 좌측에 최근 검색어와 인기 검색어 리스트를 제공해서 선택에 도움을 주고, 오프헌터 서비스 체험 유도 -검색후 원하는 상품이 없을시 오프헌터 서비스를 이용해 찾을 수 있게끔 체험 유도&nbsp; &nbsp; 3. 캘린더 버튼&nbsp; -카테고리 버튼 옆에 캘린더 버튼을 배치해서, 월별 인기 브랜드 세일 일정을 한눈에 정리해서 노출. ’세일’이라는 정보에 집중할 수 있게끔함. 레이아웃과 디자인 요소 Layout &amp; Design Element&nbsp; -필요한 정보에만 집중할 수 있도록 최소한의 요소만을 활용 -시즌이 지나 창고에 쌓여있는 재고 상품들을 유추할 수 있는 박스들, 3D렌더링된 옷과 리빙 제품의 외형들의 이미지 사용 -고급화하기 보다는 캐쥬얼한 인상을 주는 사진, 일러스트 이미지 사용 <img width="8750" height="5836" width_o="8750" height_o="5836" data-src="https://freight.cargo.site/t/original/i/cc003bfc0188bccb6a3f664c9aee2a12d186668988cda47d2b50b5820ba28ec4/__39.jpg" data-mid="125147152" border="0" src="https://freight.cargo.site/w/1000/i/cc003bfc0188bccb6a3f664c9aee2a12d186668988cda47d2b50b5820ba28ec4/__39.jpg" /> <img width="8750" height="5836" width_o="8750" height_o="5836" data-src="https://freight.cargo.site/t/original/i/bc22ecaf229f4e7b8283a9114af331052d006bf743bd9cf3238705a28eff2805/__310.jpg" data-mid="125147153" border="0" src="https://freight.cargo.site/w/1000/i/bc22ecaf229f4e7b8283a9114af331052d006bf743bd9cf3238705a28eff2805/__310.jpg" /> <img width="8750" height="5836" width_o="8750" height_o="5836" data-src="https://freight.cargo.site/t/original/i/5e7a0bcbd4ca04cb37146bddf68dc51f831ac01b616718d751cbd89b5f4ff1d7/__311.jpg" data-mid="125147154" border="0" src="https://freight.cargo.site/w/1000/i/5e7a0bcbd4ca04cb37146bddf68dc51f831ac01b616718d751cbd89b5f4ff1d7/__311.jpg" /> <img width="8750" height="5836" width_o="8750" height_o="5836" data-src="https://freight.cargo.site/t/original/i/c415eb9898be72b3baab09e7de1e4af69ecfa015df6db239998b4375ceda8cc3/__312.jpg" data-mid="125147155" border="0" src="https://freight.cargo.site/w/1000/i/c415eb9898be72b3baab09e7de1e4af69ecfa015df6db239998b4375ceda8cc3/__312.jpg" /> <img width="8750" height="5836" width_o="8750" height_o="5836" data-src="https://freight.cargo.site/t/original/i/480e3a9e51f114cbb1b7d8690fb7c6a3ec21fcd29a8698a9f0d2ee93e0f888cf/__313.jpg" data-mid="125147156" border="0" src="https://freight.cargo.site/w/1000/i/480e3a9e51f114cbb1b7d8690fb7c6a3ec21fcd29a8698a9f0d2ee93e0f888cf/__313.jpg" /> <img width="8750" height="5836" width_o="8750" height_o="5836" data-src="https://freight.cargo.site/t/original/i/2c46528dfab3f7e9498696fa7a90254016755a892c489cdccd2eee79d20f43d3/__314.jpg" data-mid="125147157" border="0" src="https://freight.cargo.site/w/1000/i/2c46528dfab3f7e9498696fa7a90254016755a892c489cdccd2eee79d20f43d3/__314.jpg" /> <img width="8750" height="5836" width_o="8750" height_o="5836" data-src="https://freight.cargo.site/t/original/i/4f94cde14f2e0b41c9b83fb25436b3dac145f3ecf6ec3902d2e63be3dbf29c3a/__315.jpg" data-mid="125147158" border="0" src="https://freight.cargo.site/w/1000/i/4f94cde14f2e0b41c9b83fb25436b3dac145f3ecf6ec3902d2e63be3dbf29c3a/__315.jpg" /> <img width="8750" height="5836" width_o="8750" height_o="5836" data-src="https://freight.cargo.site/t/original/i/ff43095cee0327716116665a74672c8097ef58a567b99b0003005bbe9a143b17/__316.jpg" data-mid="125147159" border="0" src="https://freight.cargo.site/w/1000/i/ff43095cee0327716116665a74672c8097ef58a567b99b0003005bbe9a143b17/__316.jpg" /> <img width="8750" height="5836" width_o="8750" height_o="5836" data-src="https://freight.cargo.site/t/original/i/bd274049e2a4bac565ace01f1715a2d8d6c34949d3fdadfb740a10a79a725a6d/__317.jpg" data-mid="125147160" border="0" src="https://freight.cargo.site/w/1000/i/bd274049e2a4bac565ace01f1715a2d8d6c34949d3fdadfb740a10a79a725a6d/__317.jpg" /> <img width="8750" height="5836" width_o="8750" height_o="5836" data-src="https://freight.cargo.site/t/original/i/3f37bce9fa144374e400bcd34bfba7c4445026b3510e7d83b6182eb3e75e9276/__318.jpg" data-mid="125147161" border="0" src="https://freight.cargo.site/w/1000/i/3f37bce9fa144374e400bcd34bfba7c4445026b3510e7d83b6182eb3e75e9276/__318.jpg" /> <img width="8750" height="5836" width_o="8750" height_o="5836" data-src="https://freight.cargo.site/t/original/i/869902e3076aa36f87a652083b9512a1707a5bbcc03bfa36f14da5d4cdb12ea4/__319.jpg" data-mid="125147162" border="0" src="https://freight.cargo.site/w/1000/i/869902e3076aa36f87a652083b9512a1707a5bbcc03bfa36f14da5d4cdb12ea4/__319.jpg" /> <img width="8750" height="5836" width_o="8750" height_o="5836" data-src="https://freight.cargo.site/t/original/i/a1282d80921db1fccce2f8e12c8835c0d0767ef8e9e04b040ad201f76f96faf4/__320.jpg" data-mid="125147163" border="0" src="https://freight.cargo.site/w/1000/i/a1282d80921db1fccce2f8e12c8835c0d0767ef8e9e04b040ad201f76f96faf4/__320.jpg" />