[Today I Learned] 와이어프레임과 컨포넌트 - 24.11.5

화요일 - 목표
📍카타 - 자주쓰는 & 좋아보이는 앱 프로덕트
📍와이어 프레임
📍컨포넌트

👀 엉금엉금

내가 이렇게 거북이라니.. 손이 느린편이 아닌데 뭔가 하나하나 생각하면서 만들어서 그런지 속도가 엄청 더딘거 같다..ㅜ 사람들 왤케 빠른거야 엉엉엉엉엉엉금엉금🐢🐢🐢

 

▶️디자인 카타 앱 프로덕트

카타 발제

이번 카타는 자주 사용하는 앱 프로덕트와 좋아 보이는 앱 프로덕트 2가지를 선택해 그 요인을 분석하고 작성하는 것이다.

웹 프로덕트와 앱 프로덕트의 차이는?
- 웹 프로덕트: 웹 프로덕트는 웹 브라우저를 통해 사용자가 접근할 수 있는 제품입니다. 예로는 협업 툴, 프로젝트 관리 소프트웨어, 이커머스 플랫폼 등이 있습니다. 예시) 슬랙, 노션, 피그마, 쿠팡 사이트, 무신사 사이트 등
- 앱 프로덕트: 앱 프로덕트는 사용자가 스마트폰이나 태블릿 같은 모바일 기기에 설치하여 사용하는 제품입니다. 예로는 메신저 앱, 사진 편집 앱, 금융 관리 앱, 소셜 미디어 앱 등이 있습니다.예시) 토스 앱, 인스타그램, 카카오뱅크 앱, 쿠팡 앱, 무신사 앱 등

네이버 페이

자주 사용하는 앱 프로덕트는 네이버페이로 선정했다. 더 많이 사용하는 앱도 많았지만 네이버페이가 발표할 요소가 많다고 느꼈다. 모든 금융 관리 앱이 그렇듯 네이버페이 또한 위젯을 제공하고 있어서 홈 화면과 대기 화면에서 바로 네이버페이로 이동이 가능하고, 지갑 위젯을 사용하면 앱에 들어가지 않고도 바코드를 생성할 수 있지만 나는 그렇게까지는 활용하고 있지 않다. 

카드 더미를 누르면 카드가 펼쳐지는 모션도 뭔가 경쾌하다. 이번에 분석해보며 처음 안 사실은 네이버페이는 따로 설정창까지 않아도 바텀 시트로 자주 사용하는 화면을 시작 화면을 설정할 수 있다는 것. 내가 네이버 페이에서 제일 마음에 드는 부분은 페이펫 키우기 서비스이다. 귀여운 것에 환장하는 사람답게 원래는 카카오페이를 더 많이 사용하다가 이 서비스 때문에 네이버페이 앱을 깔았을 정도이다. 이렇듯 이런 서비스는 사용자의 앱 사용량 증가를 유도한다.

스타벅스

좋아 보이는 앱 프로덕트 하나는 스타벅스로 선정했다. 사실 좋아보이는 앱 서치도 내가 자주 사용하는 앱 안에서 찾을 수 밖에 없었는데 실제로 스타벅스도 내가 잘 사용하는 앱 중 하나이다. 

스타벅스는 사이렌 오더 서비스를 제공한 커피 오더 앱의 시초이다. 직접 매장에 방문하여 주문하고 기다리는 시간을 생략할 수 있고, 복잡한 커스텀도 어렵지 않게 할 수 있다. 나만의 커스텀 메뉴도 토글버튼 하나로 홈 화면에 등록할 수도 있다. 내가 가장 잘 활용하는 기능. 또한 스타벅스는 초록색이라는 스타벅스하면 떠오르는 포인트 컬러를 아주 잘 활용한 UI 디자인이다.

듀오링고

두 번째 좋아 보이는 앱 프로덕트는 듀오링고이다. 이 앱도 작년에 정말 사용했던 앱인데 언어 학습을 게임처럼 할 수 있다. 실제로 UI 자체도 게임 UI에서 많이 따온 것 같다. 학습 유닛 창은 스테이지를 깨서 올라가는 듯한 UI이다. SNS 앱처럼 프로필 사진도 꾸밀 수 있고 다른 사람들과 진도 경쟁을 해서 학습을 유도한다. 피드에서는 친구들을 응원할 수 있는 기능도 있다. 

듀오링고가 가장 재밌는 점은 사용자의 접속률와 사용량에 따라 앱 아이콘의 디자인이 변한다는 것이다. 연두색 캐릭터가 열정에 불타오르기도 하고 녹아내리기도 한다. 연두색 부엉이를 BI 캐릭터이고, 포인트 컬러도 연두색으로 적절히 배치하여서 디자인한 UI.

▶️ 와이어 프레임 Low-fi

와이어 프레임 스케치

어제 와이어프레임을 너무 열심히 작업하다보니까 효율적이지 못하다는 판단을 했고, 그래서 오늘은 와이어프레임은 가볍게 스케치로 표현하고 컨포넌트 제작에 들어갔다. 확실히 스케치로 와이어 프레임을 짜니까 시간이 단축됐다. 한 30분 정도 걸렸나?? 와이어프레임이 있으니 필요한 컨포넌트도 잘 보여서 앞으로 이러한 와이어프레임 짜는 방식을 선택할 것 같다.

▶️ 컨포넌트 제작

컬러 스타일과 폰트 스타일

처음에 컬러는 내가 좋아하는 인디블루 색상을 포인트 컬러로 생각했는데, 흠... 아무래도 더 선명한 컬러가 포인트 컬러인게 맞다는 생각이 들어서 레드로 설정하고 인디블루는 세컨더리 컬러로 결정. 폰트 스타일은 혹시 몰라서 많이 만들어 놨는데 작업을 하다보니 타이틀과 바디의 중간 굵기 폰트가 있었으면 생각을 하고 있어서 아마 내일 추가될 예정.

컨포넌트

버튼, 라벨, 네비게이션바, 썸네일 등등의 컨포넌트를 만들었다. 배리언츠와 프로퍼티를 적용하면서 만들다 보니 생각보다는 시간이 꽤 걸렸다ㅜ 이렇게 만들어 놓는게 나중에 좋은거겠지..? 저번주 금요일에는 필수 페이지 말고도 더 추가로 만들 수 있을 것만 같았는데 택도 없는 소리였다고 한다 ㅋ 로고도 있는게 예쁠 것 같아서 가볍게 타이포그래피 로고로 만들었다.

버튼 마스터 컨포넌트를 만들다가 아이콘을 삽입하는 과정에서 아이콘 크기를 줄이면 자꾸만 프레임만 줄어드는거 때문에 낑낑댔는데 가운데 정렬을 해놔서 그런거였다.. scale로 바꾸니까 해결완!

 

 

💭 

컨포넌트만 빨리 만들면 화면에 붙여넣는건 빠르게 될 것 같은데..! 속도보다는 과정에 집중하자 아자자