
#72 PG결제창 디자인 & 퍼블리싱 수정 24.05
star
Tasks
@변효석_로터스포트 @이정아
안녕하세요
PG결제창 디자인 & 퍼블리싱 수정요청드립니다. 아래 링크로 접속하셔서 확인 부탁드리며
관련해 간단하게 온라인 미팅 진행하고자 합니다. 가능한 일정 알려주세요
22일은 오전 10시, 오후 4시 이후에 가능합니다.
Comment 68
오후 4시에 회의 가능합니다.
안녕하세요
피그마 참고하여 수정사항 첨부합니다.
확인 부탁드립니다.
@이정아 PC버전에서 결제수단 신용카드/계좌이체/가상계좌/휴대폰 선택시에 hight 값이 모두 동일해야 합니다.
*Mobile버전은 hight 값 고정이 아닙니다.PC버전은 hight값 고정처리 해주세요
@김도한
안녕하세요
첨부드린 이미지는 좌측 (신규디자인) , 우측(기존디자인) 입니다.
요청하신 PC 버전 높이 고정을 위해서는 좌측 내용으로 수정해야 할것 같습니다.
레이아웃상 우측의 기존 레이아웃 유지하는게 깔끔해보입니다.
두개중에 선택해주시면 적용시키겠습니다.
- PC UI : 제가 보내드린 수정을 그대로 해달라는 것은 아니고 [결제방법] [에스크로 이용자 확인 정보] [현금영수증 신청] [이용약관] 이렇게 구분이나 그룹핑되어있어 사용자에게 인식시키기 위함입니다. 기존 PC 결제창 높이를 유지않고 최적의 높이로 적용하면 되지 않을까 생각됩니다.
- PC 버전 하단 다음/취소 버튼 : 다른 UI로 부탁드립니다.
- 김도한 2024-05-271-1 : 선택or입력 부분 컨텐츠별 그룹핑 처리된 UI적용
1-2 : UI에 따라 전체 결제창 가로/세로 값 재정의 가능
@이정아 @변효석_로터스포트 퍼블리싱 필요 목록 보내드립니다. 모바일/PC동일합니다.
공통 :
신용카드 : 신용카드 & 간편결제
1-1. 결제수단 노출버전 : 신용(활성화 처리)/가상/계좌/휴대폰 -> 신용카드 활성화 시에만 간편결제 버튼 노출
1-2. 결제수단 미노출 버전 : 신용/간편결제
1-3. 결제수단 간편결제만 노출 : 간편결제
가상계좌 :
2-1. 결제수단 노출버전 (에스크로) :
2-2. 결제수단 노출버전 (일반) :
2-3. 결제수단 미노출 버전 (에스크로) :
2-4. 결제수단 미노출 버전 (일반) :
계좌이체 :
3-1. 결제수단 노출버전 (에스크로) :
3-2. 결제수단 노출버전 (일반) :
3-3. 결제수단 미노출 버전 (에스크로) :
3-4. 결제수단 미노출 버전 (일반) :
휴대폰 :
4-1. 결제수단 노출버전 : 신용/가상/계좌/휴대폰(활성화 처리)
4-2. 결제수단 미노출 버전 :휴대폰(활성화 처리)
@김도한
PC버전 버튼, 창 사이즈 수정하여 재첨부합니다.
@이정아 PC버전 공통 수정요청드립니다.
@김도한
컬러변경과 * 표기 추가했습니다.
@김도한 퍼블 작업을 위한 피드백 부탁드립니다.
- 이정아 2024-05-29@이정아
요청하신 페이지 디자인 첨부합니다.
결제창 모바일 퍼블리싱 목록드립니다
http://perfectall.lotusport.co.kr/main/kpn/KPN-payment-mo_new/KPN-payment-list.html
@변효석_로터스포트 모바일버전 수정사항 올려드립니다.
@이정아 피그마에 디자인 요청했습니다.
모바일 버전 수정
[결제수단 노출 퍼블리싱 페이지 필요]
1.신용카드
- 신용카드 결제수단 노출 O, 간편결제 O
- 신용카드 결제수단 노출 O, 간편결제 X (별도 페이지 작업필요)
- 신용카드 결제수단 노출 X, 간편결제 X 신용카드만 (별도 페이지 작업필요)
- 신용카드 결제수단 노출 X, 간편결제 O 간편결제만
2.가상계좌
- 결제수단 노출 O, 일반(에스크로 X) -> 작업필요
- 결제수단 노출 O, 에스크로 O -> 작업필요
- 결제수단 노출 X, 일반(에스크로 X)
- 결제수단 노출 X, 에스크로 O
3.계좌이체
- 결제수단 노출 O, 일반(에스크로 X) -> 작업필요
- 결제수단 노출 O, 에스크로 O -> 작업필요
- 결제수단 노출 X, 일반(에스크로 X)
- 결제수단 노출 X, 에스크로 O
4.휴대폰
- 결제수단 노출 -> 작업필요
- 결제수단 노출 X
[공통 수정사항]
[결제 수단별 페이지별 수정사항]
2-1. 가상계좌 - 결제수단 미노출버전(일반) payment-virtual-01.html :
- 상단 text변경 : 결제수단 가상계좌 -> 무통장계좌입금(가상계좌), 디자인 요청중이나 텍스트만 먼저 변경해서 퍼블리싱 해주세요
- 이용약관 목록 figma와 동일하게 노출
2-2. 가상계좌 - 가상계좌 - 결제수단 미노출버전(에스크) payment-virtual-02.html :
- 상단 text변경 : 결제수단 가상계좌 -> 무통장계좌입금(가상계좌)
- 이용약관 목록 figma와 동일하게 노출, 에스크로 약관
- 에스크로 이용자 확인정보 입력 필드안 안내 텍스트 수정 : 고객님 확인을 위해 휴대전화번호를 입력해주세요.
3-1. 계좌이체 - 결제수단 미노출버전(일반) payment-account-01.html :
- 상단 text변경 : 결제수단 계좌이체 -> 실시간계좌이체, 디자인 요청중이나 텍스트만 먼저 변경해서 퍼블리싱 해주세요
- 이용약관 목록 figma와 동일하게 노출
3-2. 계좌이체 - 결제수단 미노출버전(에스크) payment-account-02.html :
- 이용약관 목록 figma와 동일하게 노출, 에스크로 약관
- 에스크로 이용자 확인정보 입력 필드안 안내 텍스트 수정 : 고객님 확인을 위해 휴대전화번호를 입력해주세요.
@김도한 pc 버전은 목요일까지 전달드리도록 하겠습니다.
모바일수정 첨부합니다.
@김도한
모바일은 수요일까지 전달하겠습니다.
요청하신 타이틀 디자인 3가지 타입으로 진행했습니다.
확인 부탁드립니다.
@이정아 @변효석_로터스포트
아래 이미지 스타일로 진행부탁드립니다.
가상계좌(결제미노출)_01.png
퍼블리싱작업시 유의 사항 :
@이정아 추가로 타이틀 텍스트 크기 조금만더 키워주세요
- 김도한 2024-06-04텍스트사이즈 32px -> 34px로 수정하여 진행하겠습니다.
- 이정아 2024-06-04넵
- 김도한 2024-06-04pc :: http://perfectall.lotusport.co.kr/main/kpn/KPN-payment/pc-KPN-payment-list.html
모바일 :: http://perfectall.lotusport.co.kr/main/kpn/KPN-payment/pc-KPN-payment-list.html
요청하신 내용 작업하여 전달드립니다.
@주한비 PC버전 오류있습니다.
PG 이용약관 내역 보기 클릭 시 결제창이 중앙정렬에서 좌측으로 이동, 약관동의 자세히 보기 닫기 시 다시 중앙으로 이동됨, 중앙 정렬로 되야합니다.
이용약관 동의
이용약관 동의 자세히 보기
@주한비 모바일 버전 : 가상계좌 공통 수정 입니다.
@주한비
PC버전 수정 요청 2번째 입니다.
공통 : 현금영수증 신청하기
에스크로(안전거래) 이용자 확인 정보 입력 필드 *(필수) 표기 추가
공통 : 다음버튼 "활성화 된 상태(컬러적용) 필요"
이용약관 check 기능 : 체크아이콘 클릭시 전체 동의처리

@김도한 작업중 문의사항이 생겨 여쭤봅니다. 공통 : 다음버튼 "활성화 된 상태(컬러적용) 필요" 라고 하셨는데 해당 부분은 모바일처럼 필수입력 완료시 활성화인지 단순 활성화 된 컬러 필요인지 확인 부탁드리겠습니다~!
- 주한비 2024-06-11@주한비 @변효석_로터스포트 수정 작업 일정 확인부탁드립니다.
@김도한 금일중으로 처리완료예정입니다
- 주한비 2024-06-11pc :: http://perfectall.lotusport.co.kr/main/kpn/KPN-payment/pc-KPN-payment-list.html
모바일 :: http://perfectall.lotusport.co.kr/main/kpn/KPN-payment-mo_new/KPN-payment-list.html
모바일, pc 오류 및 수정사항 반영하였습니다.
pc 공통 : 다음버튼 "활성화 된 상태(컬러적용) 필요" 는 아직 답변 전이라 우선적으로 단순 비활성화, 활성화 상태로 나눠두었습니다.
수정된 부분은 246011 수정으로 주석달아두었습니다.
@주한비 @변효석_로터스포트
PC버전
수정하여 파일 다시 넣어 두었습니다. 모든 브라우저에서 해당 오류 확인했으며 수정된 부분은 /* 240612 수정 */로 주석 달아두었습니다.
- 주한비 2024-06-12@주한비 @이정아
1번 디자인의 경우 디자인 동일하며 퍼블에서 요소간의 간격 조절하면서 텍스트 보이도록 진행해야 할것 같습니다.
- 이정아 2024-06-17http://perfectall.lotusport.co.kr/main/kpn/KPN-payment/pc-KPN-payment-list.html
pc 수정 반영하였습니다. 파일은 위 링크에서 다운받으실 수 있습니다.
@주한비 @이정아
PG버전 신용카드 유효기간 selectbox 부분 아래와 같이 나옵니다. UI 수정 해주세요
http://perfectall.lotusport.co.kr/main/kpn/KPN-payment/pc-KPN-payment-list.html
스크롤바 넓이에 따라 여백이 생기는 문제로 확인되어 수정하였습니다.
추가로 유효기간 셀렉트 선택시 스크롤 생기는 문제도 같이 반영하였으며 240628 로 수정한 부분 표시하였습니다.
@주한비 @이정아
결제창 수정요청드립니다.
신용카드 - 결제수단 노출버전(해외카드, 구인증, 키인) - pc-payment-card-06.html / payment-card-06.html
[신규] 간편결제 카카오페이 / 토스 / 네이버페이 세부 결제 수단 분기 화면(브릿지페이지) 추가
이전 네이버페이 브릿지 페이지로 생각하시고 작업해주시면 됩니다.
@김도한
안녕하세요
요청하신 페이지 진행하여 첨부합니다.
확인 부탁드립니다.
@변효석_로터스포트 @이정아 오후에 간단히 팀즈로 회의가능하실까요? 가능한 시간알려주세요
@김도한 4시 회의 가능합니다.
- 이정아 2024-07-10@이정아 5시 가능하세요?
- 김도한 2024-07-10@김도한 5시에 회의 부탁드립니다.
- 이정아 2024-07-10@이정아 @변호석 오늘미팅내용으로 요청드린 수정내용을 내일까지 정리해서 드릴게요. 금일 논의한 내용에서 변경됩니다.
@변효석_로터스포트 웹접근성 수정사항 내용은 팀장님 메일로 보내드렸습니다.
접근성 수정 완료하였습니다.
수정된 부분은 240715 접근성 수정으로 주석 달아두었습니다.
접근성 제외 결제창 추가 수정부분은 위의 디자인 체크 부탁드리겠습니다.
pc :: http://perfectall.lotusport.co.kr/main/kpn/KPN-payment/pc-KPN-payment-list.html
모바일 :: http://perfectall.lotusport.co.kr/main/kpn/KPN-payment-mo_new/KPN-payment-list.html
@변효석_로터스포트 @이정아 @주한비
결제창 모바일/PC버전 디자인 및 퍼블리싱 수정요청드립니다. 목요일까지 부탁드립니다.
https://www.figma.com/design/36LRRQvHu869xVutRdLeAB/KPN-PG%EA%B2%B0%EC%A0%9C%EC%B0%BD?node-id=1-660&t=Hg8Q8CiLmwFHuv5R-1
https://www.figma.com/design/36LRRQvHu869xVutRdLeAB/KPN-PG%EA%B2%B0%EC%A0%9C%EC%B0%BD?node-id=0-1&t=Hg8Q8CiLmwFHuv5R-1
@김도한
피그마에 문의드린 [정기결제창]디자인 제외하고
완료된 파일 공유드립니다.
@이정아 피그마에 피드백 드렸습니다. 그부분 적용해서 퍼블리싱 부탁드립니다.
@김도한
수정 적용후 퍼블리싱 진행하고 있습니다.
수정한 파일포함하여 전채 파일 첨부드립니다.
@이정아 PC버전에서 정기결제 외 나머지 퍼블리싱 요청드립니다. 모바일 버전은 전달안해주셨습니다. 확인해주세요
@김도한
모바일 전달드립니다.
@이정아
모바일 버전도 정기결제 부분은 PC버전과 요건 정리해 다시보내드리겠습니다.
KPN 해외카드전용 결제창.png : 첫번째 이메일 입력란 삭제
요것 수정해서 퍼블리싱 진행 부탁드립니다.
@이정아 @주한비 @변효석_로터스포트
pc / mobile 정기결제 결제창은 이미 이전에 리뉴얼 했었으며, 디자인과 퍼블리싱 해주셨습니다.
해당 두가지 버전에 결제카드 등록 페이지에서 "카드구분" "비밀번호" 사이 행에 cvc번호 입력 란 추가해 주시면 됩니다.
아래 개발서버 url에서 확인 하실 수 있습니다.
모바일버전 url접속 > 결제하기 클릭 > KPN 정기결제창 호출 > 약관동의 > hp본인인증 > 결제카드 등록
PC버전 url접속> 전문생성 > 결제하기 클릭 > KPN 정기결제창 호출 > 약관동의 > hp본인인증 > 결제카드 등록
PC버전 : https://testpg.firstpay.co.kr/jsp/test/sample/billingstart.jsp
모바일 버전 : https://testpg.firstpay.co.kr/jsp/test/sample/mbillingstart.jsp
@김도한 모바일시안 이미지중 [결제 카드 등록] 페이지 파일명 확인 부탁드립니다.
- 이정아 2024-08-01@이정아 @주한비 퍼블리싱 파일은 언제 받아볼수 있나요? @변효석_로터스포트
@김도한 죄송합니다. 오늘중으로 전달 예정입니다.
- 주한비 2024-08-02@주한비 @변효석_로터스포트 작업파일 업로드 해주세요
@김도한
pc :: http://perfectall.lotusport.co.kr/main/kpn/KPN-payment/pc-KPN-payment-list.html
모바일 :: http://perfectall.lotusport.co.kr/main/kpn/KPN-payment-mo_new/KPN-payment-list.html
죄송합니다. 페이지 전달드립니다. 노트북 인터넷 이슈로 파일업로드가 안된것 같습니다. 바로 재 정비해서 업로드까지 확인했습니다.
정기결제도 파일 필요한 부분만 전달드립니다.
전체 240802 수정으로 주석 달아두었습니다.
KPN - 정기결제2.zip
@이정아 PC버전에 네이버페이 부분요건을 동일하게 모바일버전도 디자인요청합니다.
@주한비 첨부파일에 '정기결제'페이지에서 수정사항보내드립니다.
as-is : 월/년 입력창 각각 되어있음
to-be : 한필드로 수정, 입력필드 노출 텍슽스 MMYY(0927)
넵.
- 주한비 2024-08-05@김도한
기존에 작업해놓은 페이지가 있는데
해당 내용요청하신 부분일까요?
@이정아 @주한비 보내주신 퍼블리싱 url에서 해당부분 찾을 수가 없습니다. 확인해주세요
@김도한 모바일 누락, 정기결제 수정본 전달드립니다.
240805 수정으로 주석 달아두었습니다.
http://perfectall.lotusport.co.kr/main/kpn/KPN-payment-mo_new/KPN-payment-list.html
KPN - 정기결제_0805.zip
@이정아 @주한비
모바일 버전 네이버페이 부분입니다.
네이버페이 페이지 추가했습니다.
수정된 부분 240805 수정로 주석 달아두었으며 payment-card-12.html에서 확인 부탁드립니다.
http://perfectall.lotusport.co.kr/main/kpn/KPN-payment-mo_new/KPN-payment-list.html
@김도한
pc 반응형 전달드립니다. 어제 말씀대로 분리하여 샘플로 추가해두었으니 아래 링크에서 확인 가능하십니다.
수정된 부분은 common2.css 에서 /* 240809 수정 */ 으로 주석 달아두었습니다.
http://perfectall.lotusport.co.kr/main/kpn/KPN-payment/pc-KPN-payment-list.html