본문 바로가기

728x90
반응형

전체 글

PG 결제 서비스에 대한 이해, 결제 서비스에 대해 알아보자(웹훅, API 폴링이란) 우리가 흔히 아는 결제에 대한 이해는 무엇이 있는지에 대해서 알아보자. 그리고 어떻게 하면 구매 단계별에서 결제율을 높일 수 있는지 그 방향성에 대해서도 알아보자 데이터 흐름으로 결제 서비스는 어떻게 기획을 할까? 구매자가 결제하는 프로세스를 이해하면 다음과 같다. 1. 구매자가 고객사의 구매 및 결제 페이지에 접속하여 결제창을 호출하여 구매를 결정할 경우 고객사에 결제 요청을 보내게 된다. 2. 그러면 결제창에서 api 호출로 PG사 PG 결제 요청을 통해 카드사에 카드 결제 요청을 보낸다. 카드사에서 PG사로 카드 결제 결과를 송출하고 그 결괏값을 결제 창으로 인도한다. 3. 이렇게 되면 결제는 완료하게된다. 3가지의 단순 흐름 패턴을 보면 흐름에 따라 구매자는 고객사의 홈페이지의 구매 페이지에 접근.. 더보기
피그마 컴포넌트 완전 정복(파일 다운로드_downloadable PDF file_피그마 고급 응용 기술 배워보기) 해외 사이트에서나 국내 정부사이트에서 한 번쯤은 보고서를 다운로드를 해본 경험이 있을 것이다. 웹/모바일 상에서 어떤 정책 문서가 작성된 파일을 다운로드해 본 경험이 있을 것이다. 웹/모바일 상에서 pdf 파일을 자유롭게 다운로드해 보는 컴포넌트 셋을 만들어보자. ▼완성본 동영상으로 확인▼ 파일_다운로드_컴포넌트_만들어보기 pdf 파일 다운로드 컴포넌트 순서대로 만드는 방법 기초 강의를 뛰어넘어 핵심적으로 주요 내용만 적어보겠습니다. 혹시나 내용이 어렵거나 궁금하신 사항이 있으시면 아래 글을 읽어주시거나 댓글을 남겨 놓으시면 답변을 드리도록 하겠습니다. 피그마 체크박스(checkbox) 컴포넌트 쉽게 만드는 방법(feat.PPT와 무엇이 다를까?) 현직 기획자가 만 PPT로 체크박스를 만드는 방법은 정말.. 더보기
피그마 선택 옵션 컴포넌트 초이스 칩(choice chips) 단계별 적용법(체크박스, 라디오 버튼, 초이스 칩스, 멀티 칩스) 유저들의 개인화가 보편화되면서 기획자들은 유저가 클릭을 조금이라도 더 잘 받을 수 있도록 컴포넌트를 적극 활용하고 설계하고 있다. 어찌 보면 불편한 UI/UX를 고집하는 대기업 쇼핑몰은 존재한다. 그러나 그렇게 굳이 바꾸지 않아도 우리는 매출이 잘나니깐 굳이 바꾸려고 하지 않는다. 회사를 다녀보니....,, 유저의 편의성을 고려한 개인적인 영역을 고려하기보다는 익숙한걸 선호하는 회사가 더럭 있다는 것이다. 보통 외주를 주는 경우가 편의성은 고려하지 않고 뽑아내기 바쁘고 설계는 뒷전인 거 같다는 생각이 든다. 기획자라면 새로운 것을 지속적으로 탐구하고 그로부터 새로운 걸 계속적으로 적용해서 노출부터 시작해서 클릭, 전환, 리텐션까지 계속적으로 업데이트해줘야 한다고 본다. 지지말고 이겨서 올드한 플랫폼을 트.. 더보기
피그마 토글 버튼/스위치 만드는 방법(토글 스위치/토글 옵션/toggle button 토글 버튼은 사용자의 상태 값을 On/Off 값으로 변경할 수 있으며, 상태 전환을 빠르게 바꿀 때 이용 가능합니다. 토글 버튼은 PC버전에서 사용하기보다는 보통 핸드폰에서 많이 사용되는 부분이기에 유저의 사용 편의성에 따라 상태값 전환에 용이하기도 합니다. 자 그럼 이제 토글(toggle button)을 만드는 방법에 대해서 알아보자! 참고적으로 여기 토글을 만들러 왔다는 것은 초급 강의를 모두 수강했다는 가정하에 만들겠다... 컴포넌트를 생성하는 방법 등은 이전 글을 통해 확인하면 조금 더 이해하기 쉽다. 피그마 체크박스(checkbox) 컴포넌트 쉽게 만드는 방법(feat.PPT와 무엇이 다를까?) 현직 기획자가 만PPT로 체크박스를 만드는 방법은 정말 간단합니다. 체크박스 기능은 유저의 검색폭을 .. 더보기
피그마 즐겨찾기(북마크) 컴포넌트 만드는 방법(UI/UX 컴포넌트 쉽게 만들기) 유저들이 즐겨 찾는 항목을 저장하고 싶을 때 보통 별모양을 클릭해서 북마크로 유저의 관심사를 저장합니다. 그래서 오늘은 그 중요한 기능 중하나인 즐겨찾기/북마크 컴포넌트를 만들어 보겠습니다. 초보자도 쉽게 따라 하실 수 있는 북마크/즐겨찾기 컴포넌트 지금부터 시작합니다. ▼▼▼▼완성본은 아래 동영상은 참조해주세요!▼▼▼▼ 즐겨찾기컴포넌트 즐겨찾기 단계적으로 만드는 방법(아래 설명 참조해 주세요!) 우선 즐겨찾기의 핵심인 별모양부터 만들어 봅시다. 아래 순서에 따라 별을 만들고 크기 설정 후 레디우스 크기 설정, 오토레이아웃 순으로 차례대로 따라 하시면 됩니다. 1. 별모양 만들기 - 상단 별모양 클릭 - 크기 : 18x18 - coner radius : 0.5 - auto layout 설정 → 이름 변경.. 더보기
홍콩 맛집 총 정리, 홍콩에서 실패하지 않은 음식점(침사추이/센트럴/몽콕/런타우/색오 등) 이번 홍콩 여행을 다녀오면 홍콩 여행은 참 쉽다는 것을 깨달았다. 사실 교통편이 너무 잘되어있기에 쉽게 이동이 가능하다는 점에 있어서 검색과 어디를 다녀올지를 선택만 잘한다면 홍콩여행은 무조건 성공적인 여행이 될 수 있을 것이라고 생각해요! 아래에 나오는 순서는 모두 무시하셔도 됩니다. 모두 맛집이라 갔다 온 순서대로 올릴 뿐입니다! 홍콩 추천맛집 NO1. 원딤섬_프린스 에드워드역 맛집 위치 정보 : G/F, 209A Tung Choi St, Prince Edward 몽콕역에서도 사실 걸어서 20분~30분 안에 갈 수 있는 거리라 굉장히 가깝습니다. 아침으로 저희 가족은 식사했는데 굉장히 맛있었습니다. 메뉴는 이렇게 시켰습니다. 한국인이라 그런지 한국인 입맛에 최적화된 메뉴를 골랐다. 홍콩은 차문화가 발.. 더보기
피그마 개인정보 보호 정책 자연스럽게 넘어가게하는 컴포넌트 만들기(유저가 자연스럽게 넘어가게 만드는 방법) 오늘은 개인정보 보호 정책을 스무스하게 넘어가기 위한 체크박스를 만들어 볼 건데요! 유저가 빠르게 자사의 홈페이지에서 동의를 받는 방법입니다. 물론, 한국에서 유저의 클릭을 하지 않고 넘어가게 하는 정책에 대한 가이드라인은 회사의 정책마다 다른 것 같습니다. 일단, 이번에 만드는 것은 유저가 클릭을 하지 않고 자연스럽게 클릭이 되는 방식으로 유도해 보겠습니다. 완성본! 개인정보 보호 정책에 동의하는 체크박스 만들기 1. 체크박스 만들기 체크박스 만들기 크기 : 20x20 테두리 크기 : 2 fill : -(삭제/빼기) 2. 체크박스 컴포넌트 변환 체크박스를 선택한 후 컴포넌트로 변환 체크박스 전체 컴포넌트를 선택 자산 명칭 변경 : state values 값 변경 : 차례로 false/true 왼쪽 패널.. 더보기
피그마(figma) 최신 트렌드의 검색 바(interactive search bar) 단계별로 자세히 만드는 방법(PPT 기능 비교) 검색 바는 웹/모바일 모두에 있어 가장 중요한 기능입니다. 그리고 검색되는 검색 바는 계속적으로 진행되고 있습니다. 검색 바는 네이버, 구글 등에서 하고 있는 전체 검색 바의 형태가 있고, 중분류 주제 혹은 소분류 주제를 찾는 검색 바의 형태가 있습니다. 아래와 같은 검색바 형태가 있습니다. 오늘은 아래와 같은 최신 트렌드 검색 바 형태를 만들어보는 시간을 가져보겠습니다. 이제 피그마를 켜주세요! 피그마로 최신 트렌드 검색 바(Search bar) 만드는 방법 1. 돋보기 만들기 1) 단축기 'O' 원 사용 : 18X18 크기, Fill 제거, stroke 2 2) 단축기 'P' 펜툴 사용(두 번째 그림 참고) : 4x4 크기, center, 양 끝 round 변경 3) 단축기 'ctrl+g' 그룹화 :.. 더보기

728x90
반응형