Hunter Hwang님의 포스트

React Native 강의를 열심히 듣고 있어요. 새해 목표로 일주일 정도 들이면 되지 않을까 했는데, 생각보다 꾸준히 공부하기가 쉽지 않네요. 그래도 열심히 기운을 내 보겠습니다! 꾸준함이 있다면 분명 원하는 가치를 유저들에게 전달할 수 있을 거라 믿어요. 그러기 위해선 일차적으로 프로토타입이 나와야겠지요.

github pages를 사용했을 때 제일 좋은 점은, commit & push했을 때 바로 업데이트된다는 점이에요.

랜딩 페이지를 반응형으로 수정하고자 해서, 가이드라인을 Figma에 작성해 보았어요. 플러그인을 이용해, 자동화해서 코드를 뽑아낼 수도 있지만 직접 짜는 것을 전제로 하지 않으면 결국 코드를 수정해야 하더라구요! 디자이너가 프론트엔드 개발자를 위해 Figma 상에 단서(?)를 남길 때, 보통 어떤 방식을 쓰시나요? 저도 더 배워보려고 해요!

프로덕트 소개용 페이지를 github pages로 호스팅했으니, AWS 걱정은 잠시 접어두어도 되겠군요. 이제 jipper의 코어 기능을 구현해 볼 때입니다.

앞서 말했듯 React Native 프레임워크를 사용하기로 미리 결정해 둔 상태입니다. 요즘 사람들은 다 휴대폰으로 쇼핑을 하잖아요? 따라서 쇼핑과 관련이 높은 위시리스트 서비스는 보통 모바일 앱을 선호할 것입니다. 그러나 웹에서 접근도 가능해야겠지요. 가끔 엑셀을 켜고 가계부를 적다가 필요한 물건을 검색하는 경우도 있잖아요. Jipper는 아이폰, 안드로이드, 웹을 지원해야 합니다.

어차피 다 지원할 거라면 마이그레이션할 필요 없이 처음부터 React Native를 사용하기로 했어요. 하지만 러닝 커브가 조금 걱정됩니다. React로 간단한 웹페이지를 만들어 본 경험은 있지만 React Native 사용은 처음이기 때문인데요, 연말에는 조금 쉬어가면서 React Native 공식 문서를 읽고 따라해 보려고 합니다.

드디어 디스콰이엇에 Jipper를 프로덕트로 추가했어요! 사실 런칭이라는 거창한 이름이 붙어 있어서, 조금이라도 사용이 가능한 데모가 있어야 할 것 같지만, 뭐 어때요! 동기 부여를 위해서라면 첫 단추부터 여러분에게 공개할 의향이 가득합니다. Jipper의 탄생을 축하해 주세요. 메리 크리스마스!

저는 제사보다 젯밥에 관심이 있는 스타일입니다. Jipper 프로덕트 링크가 필요한데, 도메인 주소를 아이쇼핑했어요.

GoDaddy, Porkbun, Cloudflare... 요즘 달러도 비싼데 그냥 Github Pages 쓸까요?

사실 Github Pages도 계정당 1개가 아니라 여러 디포지토리를 지원할 수 있었던 것으로 기억합니다. github에서 빈 레포지토리를 만들어준 다음, 터미널에서 git clone으로 가져왔습니다. 설정에서 Pages 설정을 켜 주면, 짜잔! index.html이 잘 보이는군요!

프로덕트 링크를 첨부한다면, 유저가 보는 랜딩 페이지가 있어야겠죠? 앞서 작성한 로고 디자인을 바탕으로, Figma에서 랜딩 페이지를 디자인해 보았습니다. 오늘은 정말 디스콰이엇에 프로덕트를 걸기 위함이 목적이므로, 흘깃 보기에 그럴듯하면 충분하다는 생각으로 작업했어요.

웹디자인 및 프론트엔드 개발 강의를 들으며 느꼈던 게, 워낙 다양한 스크린이 많은 환경이다 보니 100% 완벽한 반응형 디자인을 처음부터 만들 수 없다는 것이었거든요. 그래서 아예 포스터 디자인처럼 1장만 그려 두었습니다!

가장 첫 버전의 Jipper 랜딩 페이지에는 여러분이 보고 계신 JPG 이미지가 띄워질 것입니다. 처음에는 HTML + CSS로 구현하지 않을 거에요. 왜냐하면 어차피 디자인은 바뀔 예정이거든요. 이 JPG 이미지는, 창 가로 사이즈에 100% 맞추어 리사이징되어 보여질 것입니다. 프로토타이핑은 속도가 생명이니까요!

디스콰이엇에 프로덕트를 공유하기 위해서는 썸네일 이미지가 필요해요. 그래서 Jipper를 위한 첫 아이콘을 만들었어요! 크게 디렉션을 잡은 게 아니고, "파란색, 흰 글자, 실리콘 지퍼백. 최대한 일 적게 하기" 정도의 키워드를 가지고 작업했기에 Figma에서 스케치부터 최종본 선택까지 30분 정도 걸렸습니다.

Jipper의 Key feature인 '다대일 위시리스트 공유'라는 메시지가 잘 담긴 로고는 아닙니다. 그러나, 빠른 MVP 실현 후 기능 위주의 피드백을 받는다면, 디자인 컨셉에 대한 아이디에이션도 더 잘 떠오를 거라 믿습니다. 혼자 디자인부터 기획, 개발까지 진행하는 프로젝트이기 때문에 이렇게 진행해도 무방하다고 생각합니다.

이 다음으로는, 역시 디스콰이엇 프로덕트 공유를 위한 프로덕트 페이지를 위해 AWS 호스팅을 알아보려 합니다. 도메인 주소도 알아보아야겠군요! 최소 비용이 제 1 목표입니다.

집으로 돌아가서 데스크탑에서 피그마로 작업을 시작해 보려고 합니다. 후! 요즘 다른 일로 미뤄두었던 포트폴리오 작업을 시작해서 안도감이 드네요.

디스콰이엇에 프로덕트를 공유하기 위해서는 해당 프로덕트 링크가 필요하더라구요.

그래서 Jipper를 위한 간단한 랜딩 페이지를 제작하려고 합니다. 저는 디자인 학도 출신이기에, 실제로 Jipper가 출시된 서비스라고 생각하고 랜딩 페이지를 만들 거에요. 단서만 이렇게 "설계도구요, 목업이구요, 목표입니다." 하고 달아두면 되겠지요? Bootstrap을 사용하면 일주일 내로 만들 수 있을 것 같아요.

썸네일 이미지도 필요하고요. 할 일이 아주 많군요! 너무 겉껍질에 신경쓰지 말고, 핵심 기능을 잘 전달할 수 있으면 좋겠습니다.

아이콘은 깊게 생각하지 않을게요. 메인 컬러 바탕에 글자 J를 대문자 볼드로 넣겠습니다. 다회용 지퍼락에서 서비스 이름 아이디어를 얻었는데, 지금 검색해 보니까 하늘색 제품이 뜨는군요. 제가 좋아하는 색이기도 하니, 하늘색을 이미지 컬러로 잡겠습니다.

더 컨텍스트가 맞는 디자인은 생각하다 보면 나오겠지만, 빠른 구직을 위해서는 빠른 포트폴리오 제작이 생명이니까요.

'다대일 선물 위시리스트' 서비스 이름으로 Jipper라는 이름을 붙여서 좋은 점:

1. "나 이거 갖고파" 하고 겉치레 없이 이야기한다? 쓸모없는 포장을 줄인다는 비유와도 들어맞죠.

포장 축소라고 하면, 크리스마스 선물 상자보다는 페이퍼백이나 지퍼백같은 봉투 이미지가 더 어울리잖아요.

2. 아무래도 요즘 결혼보다는 이사를 많이 하죠? 집들이의 '집'과 Jip. 소리가 같잖아요.

3. 앞서 말한 다회용 지퍼백. 3개 들이 세트에 14900원 정도 하더라구요! 생각보다 가격이 꽤 나갔어요. 하지만 한 번 구매하면 유용하게 쓸 수 있겠죠. 프로젝트가 어떻게 확장할 지 지금 단계에서는 예상이 안 되지만, '몇 천원 더 내고 편리함을 구매'한다는 연상 관계는 수익 모델에 도움이 될 것 같아요.

물론 위시리스트 서비스의 수익구조는 구매처 링크에 대한 수수료가 될 것이 99%여 보입니다.

여튼 Jipper라는 이름에 꽂혔습니다. 디자인도 그에 맞추어 볼 겁니다. 저의 강단과 쪼를 믿어주시기 바랍니다.

강아지를 입양할 때 이름을 짓듯이, 저는 프로젝트 아이디어가 생각나면 이름을 꼭 붙이는 편인데요. 디스콰이엇 로그에는 관련 프로덕트를 태깅할 수 있는 좋은 기능이 있더라고요! 앞서 말한 '다대일 선물 위시리스트' 프로젝트에 이름을 붙이려고 합니다.

처음 붙이는 이름이 완벽하지 않아도 괜찮을 거에요. 출시 전까지 얼마든지 이름을 내 마음 속에서 바꿀 수 있고, 런칭 이후에도 정말 필요하다면 리브랜딩할 수 있죠. 방탄소년단도 BTS로 리브랜딩 했는 걸요!

그래서 제가 정한 이름은, 두구두구두구. Jipper입니다. 보통 선물 하면 생각나는 이미지는 리본이 달린 종이 상자인데요. 예쁜 공단 리본으로 장식되어 있더라도 저는 재활용하지 않고 버리게 되더라구요. 그런데 요즘 다회용 냉장고 지퍼락을 팔던데! 가격대가 좀 있지만 유용해 보입니다.

Jipper라는 이름이, 윈도우 XP 시절 디자이너 없이 만든 이미지 압축 프로그램 이름 같다고요? 다음 로그에서 여러분을 설득해 보겠습니다.

이런 시나리오를 생각해 보세요: 꿈꾸던 집으로 이사 완료! 친구들이 집들이하러 옵니다. 선물도 준비했다니 감동이군요! 앗, 그런데 받은 선물... 어디다 써야 하지? 창고에 집들이 선물을 고이 간직해 둔 경험. 여러분도 있나요?

집들이나 결혼식, 아니면 생일 파티. 선물을 주고받을 일은 생각보다 자주 있어요. 친구가 카카오톡 선물하기에 북마크한 물건을 생일 선물로 준비했더니 우정이 더 돈독해진 경험도 있죠. 솔직하게 "나 이거 갖고 싶다"고 말하는 대신 리스트를 어디다가 올려놓는 것은 생각보다 편리하고 따뜻합니다.

1:1 선물 위시리스트 서비스는 이미 판이 쫙 깔렸으니, 제가 하고자 하는 토이 프로젝트는 집들이, 결혼식 등 다대일 상황에서의 선물 위시리스트 서비스입니다.

학생 시절 서비스 디자인 경험은 몇 번 있지만, 1인 개발은 처음이라 긴장되네요. 웹, 앱. 크로스 플랫폼이 적합하다고 생각되어 React Native를 사용하려고 합니다. 서비스 공개까지 많은 관심 부탁드립니다!