티스토리

BBD

검색하기

블로그 홈

BBD

haemapark.tistory.com/m

Become a Better Designer

구독자: 0

방명록 방문하기

주요 글 목록

Daily UI 028 / Contact Page 컨택트 페이지 28번째 과제: Contact Page 컨택트 페이지 UI 디자인 - 주제는 video edit software 서비스의 customer support page로 잡았다. - 검색 / 자주 찾는 도움말 / 직접 문의 순으로 구분하였다. - 네이버 고객센터 페이지를 거의 클론 디자인했고, 직접 문의 입력창을 추가하였다. - 네이버와 구글같은 SaaS 대기업은 하위 서비스가 매우 많기 때문에, 서비스별 고객센터 섹션이 있었다. - 네이버 고객센터의 자주 찾는 도움말에서 주제뿐만 아니라, 태그로도 분류하는 점이 좋았다. - 유형의 제품을 판매하는 삼성, 애플의 경우 제품군별로 문의를 분류하였다. - 솔직히 말해서 네이버나 구글이 직접적인 문의를 최대한 찾기 어렵게 숨겨놓은 느낌이 들었다. (사실 느낌만이 아니.. 공감수 0 댓글수 0 2024. 3. 8.
Daily UI 027 / Dropdown 드롭다운 27번째 과제: Dropdown 드롭다운 UI 드롭다운(Dropdown)이란? 드롭다운 UI는 사용자가 웹사이트나 애플리케이션에서 선택지 중 하나를 선택할 수 있게 해주는 인터페이스 요소이다. 이 요소는 공간을 효율적으로 사용하면서 사용자에게 다양한 옵션을 제공하고자 할 때 유용하다. 드롭다운 메뉴는 클릭 또는 탭으로 활성화되며, 사용자가 선택 가능한 항목 목록을 보여준다. - 드롭다운은 거의 모든 웹사이트에 쓰여서, 어느 레퍼런스를 참고할까 하다가 FAANG과 NAVER의 드롭다운 메뉴를 참고하였다. - 최종적으로는 Google의 Material Design의 가이드라인을 따랐다. 공감수 0 댓글수 0 2024. 3. 6.
Daily UI 026 / Subscribe 구독 26번째 과제: Subscribe 구독 UI 모달(Modal)과 팝업(Popup) 모달은 사용자의 주목을 특정 내용이나 작업에 집중시키기 위해 사용된다. 모달 창은 주로 백그라운드 콘텐츠 위에 중앙에 떠서 나타나며, 사용자가 모달 외부를 클릭하거나 특정 작업을 완료하기 전까지는 모달 이외의 다른 UI 요소와 상호작용할 수 없다. - 백그라운드 콘텐츠를 어둡게 처리하여 사용자의 주의를 모달 내용에 집중시킨다. - 폼 제출, 상세 정보 확인, 경고 메시지 표시 등 중요한 정보 전달이나 사용자 결정을 요구할 때 사용된다. - 사용자가 모달의 명시적인 닫기 옵션(예: 닫기 버튼, 취소 버튼)을 선택하기 전까지 모달을 닫을 수 없다. 팝업은 사용자에게 알림, 광고, 또는 추가 정보를 제공하기 위해 사용된다. 팝업.. 공감수 0 댓글수 0 2024. 3. 6.
Daily UI 025 / TV App 텔레비전 앱 25번째 과제: TV App 텔레비전 앱 UI - 스마트 TV에서 구동되는 OTT 앱으로 주제를 정했고 Netflix를 클론 디자인하였다. - TV는 리모콘이라는 제한적인 도구로 컨트롤해야한다는 점에서 GNB의 위치가 매우 고민되었다. 사용성을 고려하다보니 왜 YouTube, Netflix에서 좌측에 GNB를 위치시켰는지 알 것 같았다. 사용자가 콘텐츠를 탐색하는 방식에는 행(row) 단위로 정보를 처리하는 경향이 있다. 상단에 GNB를 배치할 경우, 사용자는 새로운 콘텐츠를 탐색하기 위해 여러 행을 거슬러 올라가야 한다. 반면 좌측에 GNB를 배치하면, 사용자는 현재 행 내에서만 탐색하면 되므로 접근성이 향상된다. 또한 스크롤을 내릴수록 지속적으로 새로운 컨텐츠가 제공되고, 각 추천 항목 내의 영화 수.. 공감수 0 댓글수 0 2024. 3. 5.
Daily UI 024 / Boarding Pass 탑승권 24번째 과제: Boarding Pass 탑승권 UI 10월에 유럽여행하면서 대한항공, Turkish Airlines, easyJet, Eurail, Omio 등의 다양한 항공사/철도사 어플을 이용했다. 그중 인상깊게 기억하고 있는 앱이 있는데, 바로 Austrian Airlines다. 사실 항공사 앱 느낌이 대체로 비슷하다. 파란색 좋아하고(파란 하늘을 연상시키기 때문인듯) 현대적이다. 그런데 Austrian Airlines은 붉은색이 브랜드 컬러고, 유일하게 세리프체를 사용했기 때문에 눈에 띄었다. 레거시있어보였다. (폰트가 매우 마음에 들어서 찾아보았는데, Portada라는 폰트를 베이스로 쓰고 있다. 출처: https://www.type-together.com/austrian-airlines) .. 공감수 0 댓글수 0 2024. 2. 28.
Daily UI 023 / Onboarding 온보딩 23번째 과제: Onboarding 온보딩 UI Onboarding이란? 사용자가 애플리케이션을 처음 사용할 때 경험하는 인터페이스로, 사용자가 앱의 주요 기능을 이해하고, 필요한 초기 설정을 완료할 수 있도록 돕는다. 좋은 onboarding UI는 사용자가 앱을 쉽고 빠르게 사용하기 시작할 수 있도록 설계되어야 한다. 간결함, 교육적 요소, 시각적 매력, 사용자 행동 유도, 개인 맞춤화, 접근성, 피드백의 기회 등이 필요하다. - 치지직(영상 스트리밍), 핀크(금융), 플로(음악), 모니모(금융), 플랜핏(운동), 텍스쳐(독서), 트로스트(심리 상담), 지그재그(패션 이커머스) 등 다양한 분야의 온보딩 UI를 살펴보았다. - 온보딩은 개인 맞춤화 / 주요 기능 or 가치 소개 / 권한 허용 유도 이렇.. 공감수 0 댓글수 1 2024. 2. 27.
Daily UI 022 / Search 검색 22번째 과제: Search 검색 UI - 숙소 예약 서비스의 검색 UI를 주제로 잡았다. 그에 따라 Booking.com, Airbnb, Expedia, Agoda, Hotels.com의 uxui를 분석하였다. - 공통된 부분은 장소 선택 - 날짜 선택 - 인원 선택의 3가지 카테고리 순으로 진행된다는 것이다. - 장소 선택에서는 인기 여행지나 최근 검색 내역이 먼저 뜬다. 또한 에어비앤비의 경우 유연한 검색이라고, 즉 전세계 어디든 상관없다는 선택지가 있다. 근데 '유연한 검색'은 직관성이 떨어진다. 클릭해보기 전까지는 무슨 뜻인지 잘 모르겠었다. - 날짜 선택은 캘린더에서 정확한 날짜 클릭 / 유연한 일정(기간만 정해짐) 이렇게 두가지 옵션이 있었다. 전자의 경우 캘린더에서 정확한 날짜를 찍더라도 .. 공감수 0 댓글수 0 2024. 2. 26.
Daily UI 021 / Home Monitoring Dashboard 홈 모니터링 대쉬보드 21번째 과제: Home Monitoring Dashboard 홈 모니터링 대쉬보드 Apple Design Resources - Designing for visionOS https://developer.apple.com/design/human-interface-guidelines/designing-for-visionos/ https://developer.apple.com/design/resources/#visionos-apps visionOS 앱 디자인 가이드라인과 figma 파일을 받아볼 수 있다. - 매체를 애플 비전 프로로 잡고 디자인해보았다. - 좌측 카테고리는 오버뷰 / 환경 / 에너지 / 쇼핑 / 보안 / 설정으로 나뉜다. 하단 카테고리는 공간으로 나누었다. - 현실 공간에 pass throu.. 공감수 0 댓글수 0 2024. 2. 21.
Daily UI 020 / Location Tracker 위치 추적기 20번째 과제: Location Tracker 위치 추적기 UI - 내가 주로 사용하는 지도는 카카오맵, 네이버 지도, 구글 맵 정도다. 보통 길찾을 때 / 장소(식당, 카페 등) 서칭할 때 사용한다. - 앱스토어에 검색해보니 위치 추적 및 공유 용도, 등산 특화 등 좀더 구체적인 위치 기반 서비스도 있었다. 이번 과제에서는 '위치 기반 등산 코스 안내 및 추천 앱 서비스'를 주제로 잡았다. - 등산 코스의 추천 및 세부 정보, 코스 안내, 사용자 위치 실시간 공유가 주기능이다. - 등산의 자연친화적인 이미지를 살려, 짙은 초록색을 메인 컬러로 사용하였다. - 텍스트는 필수적인 정보만 간결하게 넣었다. - 등산 진행 척도는 linear progress indicator로 표시하였다. - 지도 배율을 나타.. 공감수 0 댓글수 0 2024. 2. 20.
Daily UI 019 / Leaderboard 리더보드 19번째 과제: Leaderboard 리더보드 UI Leaderboard란? 리더보드는 특정 기준에 따라 순위를 매긴 목록이다. 이는 경쟁적인 환경에서 개인이나 팀의 성과를 비교하고 순위를 매기기 위해 사용된다. - 공교롭게도 저번 과제 주제랑 겹쳐서 같은 포맷으로 제작해 보았다. - 사이드바에 컬러를 줘서 본문 부분과 좀 더 구분되게 UI를 수정하였다. - 표에서 가로 구분선을 넣어서 좀더 정보가 명확히 구분되게 하였다. - 선택한 지표에 따라 순위가 정렬되는 시스템이고, 선택한 지표에는 메인 컬러 및 백그라운드로 하이라이트를 주었다. - 지표가 약 25개 정도 되기 때문에, 한 번에 다 보여주기는 어렵다. 따라서 좌우 버튼을 넣었다. 인디케이터로 지금 어느 범위의 지표들을 보여주고 있는지 볼 수 있다.. 공감수 0 댓글수 0 2024. 2. 19.
Daily UI 018 / Analytics Chart 통계 차트 18번째 과제: Analytics Chart 통계 차트 UI - 주제는 내가 좋아하는 롤 프로 경기로 잡았다. - 게임 관련 서비스 특성상 다크 모드로 특유의 분위기를 주었다. - 각 메뉴바에 어울리는 아이콘을 그렸다. - 사이드바 하단에 사용자의 지역 맞춤으로 당일 진행되는 경기를 알려준다. - damage, gold 카테고리의 경우 대부분 20%전후이기 때문에 상대 비율로 그래프를 보여주었다. - 차트 내 요소를 중앙 정렬할지, 좌측 정렬할지 좀 고민되었다. 아직 잘 모르겠어서 레퍼런스들을 눈여겨봐야겠다. 공감수 0 댓글수 0 2024. 2. 16.
Daily UI 017 / Purchase Receipt 결제 내역 17번째 과제: Purchase Receipt 결제내역 UI - 결제 내역에 필수로 들어가는 내용은 크게 4 섹션이다. 주문번호 / 구매 상품 / 결제 정보 / 배송지 정보 - 총 결제금액을 미괄식으로 보여주는 서비스: 배달의 민족, 에이블리 - 나는 한번도 사용해보지 못해서 몰랐는데, '주문내역 삭제' 기능이 있었다. 도대체 누가 이 기능을 사용할지 궁금하다. - 무신사의 경우 할인율을 엄청나게 설정해두는데, 이로 인해 소비자가 이득보았다는 감정을 극대화하기 위해 할인금액에 컬러를 사용하여 강조한 것으로 보인다. - 총 결제금액을 두괄식으로 보여주었다. - 결제상세의 경우 총 결제금액을 드롭다운되기 전부터 보여주었다. - 결제 직후 결제 내역 화면이 뜨는 경우, 드롭다운이 다 펼쳐져 있는 상태로 보여준.. 공감수 0 댓글수 0 2024. 2. 15.
Daily UI 016 / Pop-up Overlay 16번째 과제: Pop-up Overlay 팝업 UI - 회원가입이 짧게 걸린다는 것을 '3초 회원가입'이라는 라이팅으로 어필했다. - 클릭을 유도하고 싶은 버튼은 우측에 둔다. - X 버튼은 오른쪽 상단에 둔다. 공감수 0 댓글수 0 2024. 2. 15.
Daily UI 015 / On/Off Switch 온오프 스위치 15번째 과제: On/Off Switch 온오프 스위치 iOS 라이트모드와 Google 다크모드 토글을 클론 디자인하였다. * 감기 걸려서 한동안 Daily UI를 못했다 ㅠㅠㅠ 이번 겨울에 독감+감기 총 3번 걸렸음 (집순이인데 도대체 왜 ???) 아무튼 코로나 시국처럼 손 열심히 씻고 마스크도 끼고 다니면서 몸관리해야겠다... Daily UI 챌린지도 다시 시작해보겠습니다 -! 공감수 0 댓글수 1 2024. 2. 13.
Daily UI 014 / Countdown Timer 타이머 14번째 과제: Countdown Timer 타이머 UI 안 그래도 최근에 낼나샵에서 구매한 뽀모도로 타이머를 열심히 사용 중이었는데, 반가운 과제였다. 타이머의 본질은 남은 시간을 보여주는 것이다. 단순 명료할수록 본질에 더 집중할 수 있다. 뽀모도로 타이머의 좋은 점은 숫자가 아닌 눈에 보이는 면적으로 시간을 파악할 수 있다는 것이다. 또한 1분당 면적은 항상 동일하다. 대신 60분을 초과하는 시간은 잴 수 없지만, 애초에 성인 권장 연속집중 시간이 60분이기 때문에 괜찮다. (출처; https://www.newstnt.com/news/articleView.html?idxno=69648#:~:text=%EB%8C%80%EB%87%8C%20%EC%83%9D%EB%A6%AC%ED%95%99%EC%9E%9.. 공감수 0 댓글수 0 2024. 2. 1.
Daily UI 013 / Direct Message 디엠 13번째 과제: Direct Message 디엠 UI 아이폰 메세지, 카카오톡, 인스타그램 DM, 왓츠앱 메세지, 텔레그램, 슬랙을 레퍼런스 분석하였다. 왓츠앱과 텔레그램은 완전이 애플의 HIG를 그대로 따른 디자인이었다. 거의 아이폰 기본앱같이 느껴진다. 슬랙은 여타 앱과 달랐다. 확실히 사내 조직을 위한 서비스여서 그에 맞는 Form follows function이었다. - 메세지 보낸 시각을 기본적으로 보이게 하였다. 분단위로 메세지를 나누면 적당한 선에서 한번씩 호흡을 끊어주는 기능도 있기 때문이다. (아이폰, 디엠의 경우 대화들을 왼쪽으로 밀어야 시각이 표시된다.) - 예전 대화 기록을 보기 위해 위로 스크롤했을 때, 한번에 Go to the Bottom되는 FAB을 넣었다. - 해당 FAB는 .. 공감수 0 댓글수 1 2024. 1. 31.
Daily UI 012 / E-commerce Shop 이커머스 쇼핑몰 12번째 과제: E-commerce Shop 이커머스 쇼핑몰 UI 주제는 '신발을 주력으로 스포츠 의류를 판매하는 브랜드'의 '상세 페이지'로 설정하였다. 컨셉은 이미지 중심적이고, 신발을 다각도로 돌려보며 3D로써 파악할 수 있는 상호작용을 넣는 것이다. 이커머스 쇼핑몰은 정보량도 많고, 만들어야하는 페이지도 많다. 처음에는 호기롭게 온라인 의류편집샵을 주제로 잡고 레퍼런스로 29cm, 무신사, w concept를 분석하려고 했는데, 분석만 해도 하루 안에 해낼 수 없는 양이라는 것을 깨달았다. 이는 하루에 한개씩 UI를 쳐내야하는 DailyUI로는 어울리지 않았다. 그래서 스포츠 신발 브랜드로 시장을 구체화했고, 그에 맞게 Nike, Adidas, New Balance 웹사이트를 분석하였다. 이커머스.. 공감수 0 댓글수 0 2024. 1. 31.
Daily UI 011 / Flash Message 플래쉬 메세지 11번째 과제: Flash Message 플래쉬 메세지 UI Flash Message란? 사용자가 웹사이트나 앱에서 특정 작업을 수행했을 때 잠깐 동안 나타나는 짧은 메시지. 이 메시지는 사용자에게 작업의 성공, 실패, 경고, 정보 등을 알려주는 역할을 한다. 예를 들어, 사용자가 폼을 제출하거나 설정을 변경했을 때, 플래시 메시지는 "저장되었습니다", "업데이트 성공", "잘못된 입력입니다"와 같은 짧은 피드백을 제공한다. 이러한 메시지는 일반적으로 화면의 상단이나 중앙에 잠깐 나타났다가 자동으로 사라지거나, 사용자가 직접 닫을 수 있는 방식으로 디자인된다. 플래시 메시지의 목적은 사용자에게 즉각적이고 명확한 피드백을 제공하여 사용자 경험을 개선하는 것이다. - 사실 Flash Message가 무엇인지.. 공감수 0 댓글수 0 2024. 1. 29.
Daily UI 010 / Social Sharing 소셜 공유 10번째 과제: Social Sharing 소셜 공유 UI - 네이버 블로그에 공유하기 외에도 url 복사하기 버튼이 따로 있는 점이 좋아서 벤치마킹했다. - url 복사 완료 토스트가 떠야 한다. - 아이콘 그리는 것 재미있다. 그런데 막상 실무에서는 일이 너무 많아서 아이콘 하나하나 그릴 시간이 없어서 에셋 쓴다고 한다 흑흑 - 지금 미리 나만의 에셋 만들어둔다는 생각으로 열심히 그려야지...! 공감수 0 댓글수 0 2024. 1. 29.
Daily UI 009 / Music Player 음악 재생 9번째 과제: Music Player 음악 재생 UI 여태까지의 디자인 프로세스는 다음과 같았다. 1. 서비스 컨셉, 기능 등을 간단히 구상한다. 2. 이에 맞게 와이어 프레임을 짠다. 3. 레퍼런스를 찾아보면서 수정한다. 그런데 과정 3을 하다 보면 결국 과정 2도 다시 반복하게 된다는 것을 깨달았다. 그래서 아예 처음부터 레퍼런스를 찾고 간단한 분석을 한 뒤, 디자인을 해야겠다고 생각했다. 클론 디자인의 한계를 못 벗어날 수도 있겠지만, 직접 해보고 판단해 보겠다! - 유튜브 뮤직, 사운드클라우드를 클론 디자인하고 작은 변주를 주었다. - 나는 음악 앱에서 가장 중요한 것은 "앨범 아트를 어떻게 보여줄 것인가"라고 생각한다. 인간은 오감을 가지고 대상을 파악하는데, 그중에서도 시각에 의한 지각이 가장.. 공감수 0 댓글수 0 2024. 1. 29.
Daily UI 008 / 404 Page 404 페이지 8번째 과제: 404 페이지 디자인 404란? HTTP에서 파일을 찾지 못했을 때 나오는 오류 코드다. 서버는 찾았으나 해당 서버 내에서 파일을 찾지 못했을 때 리턴되는 코드값이다. UX적인 관점에서 이탈율을 줄이기 위해서는 404 페이지에 Home 화면으로 가는 버튼 or 다른 흥미로운 콘텐츠 추천 or 검색 기능 or 간단한 게임 / 인터랙션 / 마음을 누그러뜨릴 수 있는 귀여운 이미지 등을 사용하는 것이 좋다. 대부분의 웹사이트 주소 뒤에 /404 를 붙이면 404 페이지를 볼 수 있다. (예시: https://dribbble.com/404) 주제 IT서비스 웹사이트의 404페이지 내용 404 페이지를 찾을 수 없습니다. 입력한 페이지의 주소가 정확한지 다시 한번 확인해주세요. - IT 느낌을 살.. 공감수 0 댓글수 0 2024. 1. 26.
Daily UI 007 / Settings 환경설정 7번째 과제: Settings 환경설정 디자인 주제 앱 환경설정 계정 프로필 이미지, 이름 > 일반 언어 > 다크 모드 (스위치) 알림 앱 푸쉬 (스위치) 이메일 (스위치) SMS (스위치) 운영 공지사항 > 고객센터 > 운영정책 > 캐시관리 > 앱 버전 > - 총 10개의 아이콘을 30px*30px 프레임에 직접 그렸다. 어려웠던 점은 운영정책, 캐시관리, 앱 버전 등의 딱 떠오르는 이미지가 없는 아이콘은 그리기가 어려웠다는 것이다. - 연한 스트로크를 이용하여 라이트한 디자인을 하려고 했는데, 그러면 아이콘은 다 빼고 그냥 텍스트만 넣는 게 가장 깔끔했다. 하지만 너무 딱딱하고 직관성이 낮은 것 같았다.(오직 텍스트로만 정보를 접하니까) - 그런데 면으로 된 아이콘에 색까지 있으니 너무 알록달록해서 .. 공감수 0 댓글수 0 2024. 1. 25.
Daily UI 006 / User Profile 유저 프로필 6번째 과제: User Profile 유저 프로필 디자인 주제 이력서 프로필 이름 이미지 거주 위치 경력 학력 자격 수상 언어 포트폴리오 메인컬러 열정이 가득한 주황색 FF5C00 - 맨 위에는 가장 중요한 정보들을 담았다. 중요 내용을 최대한 압축해서 보여주는 파트이기 때문에 시선 꽂히라고 중앙 정렬을 선택하였다. 근데 한줄 자기소개를 빼먹었다. - 포트폴리오는 파일 다운받거나, 웹사이트로 연결될 수 있게 하였다. - 메세지 보내기, 다운받기, 방문하기 등의 call to action button은 메인 컬러와 background를 써서 눈에 띄게 하였다. 공감수 0 댓글수 0 2024. 1. 24.
Daily UI 005 / App Icon 앱 아이콘 5번째 과제: App Icon 앱 아이콘 디자인 Apple Human Interface Guidelines - App icons https://developer.apple.com/design/human-interface-guidelines/app-icons 이 문서에서 앱 아이콘 가이드라인을 읽을 수 있다. Apple Design Resources https://developer.apple.com/design/resources/ Apple은 무려 피그마 파일까지 공유해주는 최고의 기업이다. 앱 아이콘 사이즈부터 그리드까지 뜯어볼 수 있다. 주제: 타이포를 이용한 앱 아이콘 디자인 특히 알파벳 한글자 (ex. Netflix, Runday, 하나머니, 엘포인트, Mc'Donalds, Naver, Google.. 공감수 0 댓글수 0 2024. 1. 23.
Daily UI 004 / Calculation 계산 4번째 과제: Calculation 계산 UI User Story 공대를 다니는 박해마. 도서관 다 와서 보니 TI nspire cx cas를 안 가져왔다 !?! 일단은 과제를 해야하니 급하게 폰으로 구동가능한 공학용계산기를 찾아보는데... (네 사실 접니다.) 주제 공학용 계산기 아이폰 어플 - 일반 / 공학용으로 나누었다. 디폴트는 일반. 황금비율(1:1.6)로 나누었다. - AC(All Clear), ans(last calculation result), 이전 계산 결과 보는 방법에 대해서는 간단한 지침을 줘도 좋을 것 같다. 해당 버튼 빼고 화면 dim 시키고 무슨 기능인지 간단하게 알려주는 방식으로. - 공학용은 기본적으로 들어가야하는 기능이 많아서,,, iPhone 14 Pro 기준으로 버튼 h.. 공감수 0 댓글수 0 2024. 1. 23.
Daily UI 003 / Landing Page 랜딩 페이지 3번째 과제: Landing Page 랜딩 페이지 UI 랜딩 페이지란? 홈페이지 방문, 키워드 검색 혹은 배너 광고 등으로 유입된 인터넷 이용자가 최초로 보는 페이지를 말한다. 랜딩 페이지는 불필요하거나 혼란을 주는 내용을 최대한 피하고, 방문자가 방문 목적을 쉽고 빠르게 달성할 수 있도록 안내하는 것이 중요한데, 제작자 또는 디자이너가 랜딩 페이지를 어떤 형태 또는 방식으로 디자인하느냐에 따라 방문자의 적극적인 참여 또는 행동을 유발할 수 있다. [네이버 지식백과] 랜딩 페이지 [Landing Page] (PR용어사전) 폰트 클라우드 SaaS로 주제를 잡았다. (ex. 구름다리) 고려해야할 사항 Headline call-to-action buttons typography clarity - 구름다리를 벤.. 공감수 0 댓글수 0 2024. 1. 23.
Daily UI 002 / Credit Card Checkout 신용카드 결제 2번째 과제: Credit Card Checkout 신용카드 결제 UI 결제순서 1. 장바구니 2. 결제 3. 확인 Type 신용 카드 카드 넘버 유효기간 MM/YYCVC 일시불 / 할부결제 버튼 구매목록 합계 - 카드 기반 간편 결제 시스템으로 결정했다. - [+ 다른 카드 등록] 버튼을 어디에 둘까 고민했는데, 이 버튼은 항상 보일 필요가 없기 때문이다. 그래서 우측 디자인으로 가는 게 더 적절해보인다. - PC웹페이지 팝업으로 만들었는데, 생각해보니 팝업보다는 개별 페이지로 존재하는 게 더 적절할 것 같다. 이유: 팝업은 쉽게 닫을 수 있고, 정보량을 상대적으로 조금밖에 못넣는다. - 결제 가격을 일부러 안넣었는데... 넣었어야했다! 공감수 0 댓글수 0 2024. 1. 23.
Daily UI 001 / Sign Up 회원가입 1번째 과제: Sign Up 회원가입 세부 주제 및 항목 등을 설정해보았다. 주제 마라톤 대회 registration sign up 컨셉 energetic, 일러스트레이션 -> 시간 없어서 못함 필요한 정보 날짜, 장소에 대한 알림 핸드폰번호 이메일 이름 생일 medical discomfort 성별 경험 유무 참가비? - Google Material Guide를 보면서 간격과 박스 사이즈 등을 정하였다. - Progress Indicator는 여러 가지가 있지만, linear하게 표현하였다. '마라톤'의 종점까지 달려가야한다는 모티브 - 확인 버튼의 y축 위치는 다르게 설정되었다. 키보드 입력창이 뜰 경우 / 뜨지 않을 경우로 나누어 버튼 클릭이 쉬운 방향으로. - 보호자의 개인정보 입력 시, 보호자 것.. 공감수 0 댓글수 0 2024. 1. 23.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.