자사몰에서 아직 손대지 않은 계정·주문 흐름 세 화면입니다. 왼쪽이 지금, 오른쪽이 제안입니다.
제안 쪽은 실제 스킨 마크업 구조를 그대로 두고 CSS만 입힌 모습으로 그렸습니다. 새로 짠 구조가 아니라 라이브에 그대로 붙습니다.
로그인한 고객이 제일 자주 들어오는 화면입니다. 지금은 등급·적립금·쿠폰·주문현황이 전부 같은 크기의 회색 글씨라 무엇을 먼저 봐야 하는지가 없습니다. 제안은 상단을 딥그린 한 덩어리로 묶어 「나는 지금 어떤 고객인가」를 먼저 보여주고, 주문 현황은 숫자를 키운 칩으로 바꿉니다.
v3 에서 바꾼 것 (버팀) — 색은 그대로 두고 순서만 바꿨습니다. v2 는 초록 덩어리가 화면의 절반(약 500px)을 먹어서 「내 주문 어디 있나」가 스크롤 아래로 밀립니다. 마이샵에 들어오는 첫 번째 이유가 그것이라 맨 위로 올렸고, 이름·등급은 흰 바탕 한 줄로 접었습니다. 적립금·쿠폰은 초록 위 반투명이라 숫자가 흐렸던 것을 흰 카드로 빼서 또렷하게, 자주 안 누르는 「회원정보 변경」은 큰 버튼 자리에서 맨 아래 작은 링크로 내렸습니다. 초록은 진행 중인 주문 한 군데만 씁니다.
v2 에서 바꾼 것 — 일곱 칸 가운데 다섯이 0이라 빈 숫자가 화면의 3분의 1을 먹고 있었습니다. 0 은 한 줄로 접고, 그 자리에 지금 어디까지 왔는지를 단계로 보여줍니다. 첫 주문이 37.9% 라 「전부 0」인 화면이 가장 흔합니다.
스킨은 이미 테이블이 아니라 .row 안에 .title + .wrap 구조입니다. 그런데 CSS가 없어서 입력칸이 30px 높이로 붙어 나오고 안내문이 12px 연회색으로 깔립니다. 제안은 구조를 그대로 두고 라벨을 딥그린 14px로, 입력칸을 48px 높이·12px 라운드로 올리고, 흩어져 있던 필드를 카드 세 덩어리로 묶습니다.
V3 에서 바꾼 것 (회사버팀) — ① 비밀번호 두 칸을 접었습니다. 회원정보를 고치러 오는 사람 대부분은 비번을 안 바꾸는데, 지금은 그 두 칸이 화면 맨 위 제일 좋은 자리를 차지합니다. 아이디·선택 동의도 같이 접어 바꾸러 온 것(이름·연락처·이메일)만 펴 둡니다. ② 저장 버튼을 화면 아래에 붙였습니다(제안서 3번). 이 화면이 폰에서 2,091px = 2.5 화면이라, 끝까지 내려가야 저장이 나옵니다. ③ 「골드 점이 붙은 항목」이라고 쓰여 있는데 9/20 에 골드를 뺐으므로 초록 점으로 고쳤습니다.
여기는 이미 히어로와 카드가 들어가 있습니다. 왼쪽 「지금」은 기본 카페24가 아니라 라이브 현재 모습을 그대로 그린 것입니다. 문제는 본문이 13px·#999라 읽히지 않는다는 점, 그리고 결제를 끝낸 고객에게 다음에 할 일을 주지 않는다는 점입니다. 제안은 글자 대비를 올리고 요약을 세 줄로 줄인 뒤, 아래에 다음 행동 두 개를 조심스럽게 놓았습니다.
V3 에서 바꾼 것 (회사버팀) — ① 체크 링(76px)을 작은 줄로 내렸습니다. 결제가 됐다는 표시는 이미 화면에 온 것만으로 충분한데, 지금은 그 동그라미가 도착 예정일보다 위에서 시선을 먼저 먹습니다. 날짜를 28px로 올려 화면에 들어오는 순간 날짜가 먼저 읽히게 했습니다. ② 결제 정보 네 줄(주문상품·배송비·할인·총액)을 총액 한 줄 + 작은 글 한 줄로 접었습니다 — 방금 결제한 사람은 총액만 확인하지, 내역을 다시 읽지 않습니다.
v2 에서 바꾼 것 — ① 「특별한 한 끼가 곧 도착해요」를 도착 예정일로. 결제를 끝낸 사람이 가장 궁금한 것입니다(오후 1시 이전 주문은 당일 출발이라 계산할 수 있습니다). ② 버튼 두 개를 같은 무게로 주면 아무것도 안 눌러서 하나만 크게 두었습니다. ③ 결제를 끝낸 사람의 55.7%가 비회원이라 비회원용을 따로 그렸습니다 — 마이샵도 적립금도 없는 사람에게 회원 화면을 주면 절반이 빈 채로 보입니다. 그 자리가 4번 안건(가입 안내)입니다.
주문 2,847건(7/23~9/21, 취소 제외)을 센 값입니다. 「초록이 가득하다」 같은 인상 대신 크기를 봅니다.
세 페이지 각각의 고유 래퍼로 범위를 좁혔습니다. 전역 태그 선택자는 한 줄도 없고, 실제 스킨 마크업에 있는 클래스만 썼습니다. 붙이는 자리는 각 페이지 <head> 안 <style> 블록이며, 구매완료는 이미 있는 <style>(139행~) 아래에 이어 붙여야 덮입니다.
/* ══════════════════════════════════════════════════════════════
이태리정미소 · 마이샵 / 회원정보 수정 / 구매완료 — 범위 한정 CSS 초안
2026-09-18 · 데모 검토용, 아직 라이브 미적용
[손대지 않는 영역]
- 알파리뷰 위젯(data-code 0deb134b) 관련 클래스 일절 없음
- GTM / GA4 purchase 스크립트, shk-analytics, IJ 터치 원장 블록 무관
- 결제 관련 JS(order.js / orders.js / form_onetouch.css) 무관
- 전역 태그 선택자(body, div, table, input …) 사용 안 함 — 전부 래퍼 하위로만
[글꼴] Pretendard가 스킨에 로드돼 있지 않으면 Noto Sans KR로 떨어집니다.
붙이기 전에 layout.html 의 @font-face 유무를 한 번 확인할 것.
══════════════════════════════════════════════════════════════ */
/* ════════ 01. 마이샵 홈 — /myshop/index.html ════════
래퍼: .myshopArea.myshopMain (이 조합은 마이샵 홈에만 있음) */
.myshopArea.myshopMain .benefit {
background: linear-gradient(160deg, #036d31 0%, #367d45 55%, #699f61 100%);
border: 0;
border-radius: 0;
padding: 26px 20px 22px;
color: #FFFFFF;
}
.myshopArea.myshopMain .benefit .info .intro {
display: block;
font-size: 19px;
font-weight: 600;
line-height: 1.5;
letter-spacing: -0.3px;
color: #FFFFFF;
}
.myshopArea.myshopMain .benefit .name-wrap .name {
display: inline-flex;
align-items: center;
margin-top: 12px;
padding: 5px 13px;
border: 1px solid rgba(255,255,255,0.6);
border-radius: 999px;
font-size: 14px;
font-weight: 600;
color: #FFFFFF;
}
.myshopArea.myshopMain .benefit .grade p {
margin-top: 14px;
padding: 12px 14px;
background: rgba(255,255,255,0.07);
border: 1px solid rgba(255,255,255,0.14);
border-radius: 12px;
font-size: 14px;
line-height: 1.65;
color: rgba(255,255,255,0.88);
}
.myshopArea.myshopMain .benefit .grade p .txtEm { color: #FFFFFF; font-weight: 600; }
.myshopArea.myshopMain .benefit .col-right {
display: flex;
gap: 10px;
margin-top: 14px;
}
.myshopArea.myshopMain .benefit .col-right a {
flex: 1;
display: block;
padding: 13px 14px;
background: rgba(255,255,255,0.09);
border: 1px solid rgba(255,255,255,0.16);
border-radius: 14px;
text-decoration: none;
}
.myshopArea.myshopMain .benefit .col-right a .title {
display: block;
font-size: 14px;
color: rgba(255,255,255,0.82);
}
.myshopArea.myshopMain .benefit .col-right a .data {
display: block;
margin-top: 5px;
font-family: 'Poppins', 'Pretendard', 'Noto Sans KR', sans-serif;
font-size: 22px;
font-weight: 600;
letter-spacing: -0.2px;
color: #FFFFFF;
}
.myshopArea.myshopMain .benefit .txt .link {
display: flex;
align-items: center;
justify-content: center;
margin-top: 14px;
padding: 12px;
border: 1px solid rgba(255,255,255,0.35);
border-radius: 12px;
font-size: 14px;
font-weight: 600;
color: #FFFFFF;
text-decoration: none;
}
/* 주문처리 현황 — 숫자를 키운 칩 */
.myshopArea.myshopMain .order { padding: 16px 14px 24px; }
.myshopArea.myshopMain .order .cm-title h3 {
font-size: 16px;
font-weight: 700;
letter-spacing: -0.3px;
color: #367d45;
}
.myshopArea.myshopMain .order .cm-title .desc {
font-size: 14px;
font-weight: 500;
color: #4A5A6B;
}
.myshopArea.myshopMain .order .tab-style1 ul {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
margin: 0 0 8px;
padding: 0;
list-style: none;
}
.myshopArea.myshopMain .order .tab-style1 ul + ul {
grid-template-columns: repeat(3, 1fr);
}
.myshopArea.myshopMain .order .tab-style1 li { margin: 0; }
.myshopArea.myshopMain .order .tab-style1 .count {
display: block;
padding: 12px 4px 10px;
background: #F6F8F4;
border: 1px solid #E7E4DC;
border-radius: 12px;
font-size: 14px;
font-weight: 500;
line-height: 1.4;
color: #4A5A6B;
text-align: center;
text-decoration: none;
}
.myshopArea.myshopMain .order .RW .titleArea h3 {
margin-top: 8px;
font-size: 16px;
font-weight: 700;
letter-spacing: -0.3px;
color: #367d45;
}
/* ════════ 02. 회원정보 수정 — /member/modify.html ════════
래퍼: .form-frame .xans-member-edit
(module="member_edit" 가 xans-member-edit 로 렌더됨 — 회원가입·로그인과 겹치지 않음) */
.form-frame .titleArea h2 {
font-size: 22px;
font-weight: 700;
letter-spacing: -0.4px;
color: #1A1A1A;
}
.form-frame .xans-member-edit .join-form {
margin: 0 0 12px;
padding: 18px 16px;
background: #FFFFFF;
border: 1px solid #E7E4DC;
border-radius: 16px;
}
.form-frame .xans-member-edit .join-form .row,
.form-frame .xans-member-edit .typeWrite > div {
padding: 14px 0;
border-top: 1px solid #EEF2EB;
}
.form-frame .xans-member-edit .join-form .row:first-child,
.form-frame .xans-member-edit .typeWrite > div:first-child {
padding-top: 0;
border-top: 0;
}
.form-frame .xans-member-edit .join-form .title {
display: flex;
align-items: center;
gap: 5px;
margin-bottom: 8px;
font-size: 14px;
font-weight: 600;
letter-spacing: -0.2px;
color: #367d45;
}
/* 필수 표시 — 빨간 별 대신 골드 점 */
.form-frame .xans-member-edit .title .req {
display: inline-block;
width: 5px;
height: 5px;
border-radius: 50%;
background: #FFFFFF;
text-indent: -9999px;
overflow: hidden;
}
.form-frame .xans-member-edit .title .icoRequired { width: 8px; height: 8px; }
/* 입력칸 — 30px → 48px. 래퍼 하위 속성 선택자라 전역 오염 없음 */
.form-frame .xans-member-edit input[type="text"],
.form-frame .xans-member-edit input[type="password"],
.form-frame .xans-member-edit input[type="tel"],
.form-frame .xans-member-edit input[type="email"],
.form-frame .xans-member-edit select {
height: 48px;
padding: 0 14px;
background: #FFFFFF;
border: 1px solid #DCD8D0;
border-radius: 12px;
font-size: 15px;
font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
color: #1A1A1A;
}
.form-frame .xans-member-edit input[type="text"]:focus,
.form-frame .xans-member-edit input[type="password"]:focus,
.form-frame .xans-member-edit select:focus {
outline: none;
border-color: #367d45;
box-shadow: 0 0 0 3px rgba(195,165,110,0.22);
}
.form-frame .xans-member-edit .formGroup,
.form-frame .xans-member-edit .verify-box,
.form-frame .xans-member-edit .telGroup {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
/* 안내문 — 12px 연회색 금지, 14px #4A5A6B */
.form-frame .xans-member-edit .txtInfo,
.form-frame .xans-member-edit .desc .txtInfo {
font-size: 14px;
line-height: 1.6;
color: #4A5A6B;
}
.form-frame .xans-member-edit .txtDanger { color: #A4322B; }
.form-frame .xans-member-edit .desc.end { margin-top: 7px; }
/* 보조 버튼 (인증번호받기 · 환불계좌 · 중복확인) */
.form-frame .xans-member-edit .btnNormal {
display: inline-flex;
align-items: center;
justify-content: center;
height: 48px;
padding: 0 16px;
background: #FFFFFF;
border: 1px solid #367d45;
border-radius: 12px;
font-size: 14px;
font-weight: 600;
color: #367d45;
white-space: nowrap;
text-decoration: none;
}
/* 라디오 묶음 */
.form-frame .xans-member-edit .radio-style1 {
display: flex;
gap: 8px;
font-size: 15px;
}
.form-frame .xans-member-edit .radio-style1 label { color: #1A1A1A; }
/* 선택 동의 */
.form-frame .chk-form .agree .title {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 0;
font-size: 14px;
font-weight: 500;
color: #1A1A1A;
}
.form-frame .chk-form .agree .title .more { margin-left: auto; }
/* 하단 버튼 — 세로 두 개 + 탈퇴는 조용한 링크 */
.form-frame .xans-member-edit .group-btn {
display: flex;
flex-direction: column;
gap: 10px;
}
.form-frame .xans-member-edit .group-btn .btn_normal {
display: flex;
align-items: center;
justify-content: center;
height: 54px;
border: 1px solid #367d45;
border-radius: 14px;
background: #367d45;
font-size: 16px;
font-weight: 600;
color: #FFFFFF;
text-decoration: none;
}
.form-frame .xans-member-edit .group-btn .btn_normal.btn1 {
background: #FFFFFF;
color: #367d45;
}
.form-frame .xans-member-edit .group-btn .btn_normal.btn_s {
height: auto;
padding: 6px 0;
border: 0;
background: none;
font-size: 14px;
font-weight: 400;
color: #4A5A6B;
text-decoration: underline;
text-underline-offset: 3px;
}
/* ════════ 03. 구매완료 — /order/order_result.html ════════
래퍼: #mCafe24Order.xans-order-result
이미 들어있는 <style>(139행~) 아래에 이어 붙일 것. 구조는 그대로 두고
글자 크기·대비·글꼴만 올린다. 히어로 그라데이션·체크 링은 유지. */
#userStyle #mCafe24Order,
#userStyle #mCafe24Order .ec-base-table td,
#userStyle #mCafe24Order .ec-base-table th {
font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
}
/* 히어로 요약 — 라벨 대비 올리고 금액은 키움 */
#userStyle #mCafe24Order .resultArea .message strong { font-size: 20px; }
#userStyle #mCafe24Order .resultArea .resultInfo tbody th {
font-size: 14px;
color: rgba(255,255,255,0.72);
}
#userStyle #mCafe24Order .resultArea .resultInfo tbody td { font-size: 15px; }
#userStyle #mCafe24Order .resultArea .resultInfo tbody td .txtEm { font-size: 17px; }
/* 패널 제목 */
#userStyle #mCafe24Order.xans-order-result .title h2 { font-size: 16px; }
/* 본문 13px·#999 → 15px·#4A5A6B (미주 반복 지적: 연한 회색 금지) */
#userStyle #mCafe24Order.xans-order-result .segment .ec-base-table tbody th,
#userStyle #mCafe24Order.xans-order-result .segment .ec-base-table tbody td,
#userStyle #mCafe24Order.xans-order-result .ec-base-table.gCellNarrow tbody th,
#userStyle #mCafe24Order .ec-base-table.typeView tbody th,
#userStyle #mCafe24Order .ec-base-table.typeView tbody td {
font-size: 15px;
line-height: 1.6;
}
#userStyle #mCafe24Order.xans-order-result .segment .ec-base-table tbody th,
#userStyle #mCafe24Order.xans-order-result .ec-base-table.gCellNarrow tbody th,
#userStyle #mCafe24Order .ec-base-table.typeView tbody th {
color: #4A5A6B;
}
#userStyle #mCafe24Order.xans-order-result .segment .ec-base-table tbody td,
#userStyle #mCafe24Order .ec-base-table.typeView tbody td {
color: #1A1A1A;
}
/* 상품 줄 */
#userStyle #mCafe24Order.xans-order-result .ec-base-prdInfo .description .prdName {
font-size: 15px;
font-weight: 600;
}
#userStyle #mCafe24Order .ec-base-prdInfo .description .info li {
font-size: 14px;
color: #4A5A6B;
}
/* 금액 요약 */
#userStyle #mCafe24Order.xans-order-result .orderArea .totalPrice .title h3 {
font-size: 14px;
color: #4A5A6B;
}
#userStyle #mCafe24Order.xans-order-result .orderArea .totalPrice > .contents .ec-base-table.gCellNarrow th,
#userStyle #mCafe24Order.xans-order-result .orderArea .totalPrice .ec-base-table .txtStrong {
font-size: 15px;
}
#userStyle #mCafe24Order .totalPay .heading { font-size: 16px; }
#userStyle #mCafe24Order.xans-order-result .totalPay .txtEm { font-size: 19px; }
#userStyle #mCafe24Order .discountArea .ec-base-box > .heading {
font-size: 14px;
color: #4A5A6B;
}
#userStyle #mCafe24Order #ec-shop_orderConfirmLayer .discountArea .ec-base-table.gCellNarrow tbody th,
#userStyle #mCafe24Order #ec-shop_orderConfirmLayer .discountArea .ec-base-table.gCellNarrow tbody td {
font-size: 15px;
}
/* 결제수단 안 보조 버튼 — 11px 는 너무 작음 */
#userStyle #mCafe24Order .methodButton .btnNormal {
font-size: 14px;
padding: 7px 12px;
color: #367d45;
border-color: #CFCABE;
}
/* 하단 버튼 */
#userStyle #mCafe24Order .ec-base-button[class*="gColumn"] a,
#userStyle #mCafe24Order .ec-base-button[class*="gColumn"] button {
font-size: 16px;
font-weight: 600;
font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
}
/* ── 아래 두 칸(내 기록에 넣기 · 리뷰 남기기)은 마크업 추가가 필요합니다.
이번 범위 아님. 미주 확인 뒤 order_result.html 하단에 블록을 넣고
아래 규칙을 함께 붙이면 됩니다. 지금 붙여도 아무 영향 없습니다. ── */
#userStyle #mCafe24Order .ij-next {
display: flex;
align-items: center;
gap: 12px;
max-width: 640px;
margin: 0 auto 12px;
padding: 15px 16px;
background: #F6F8F4;
border: 1px dashed #B9D4B6;
border-radius: 16px;
color: #1A1A1A;
text-decoration: none;
}
#userStyle #mCafe24Order .ij-next .ij-t { font-size: 15px; font-weight: 600; }
#userStyle #mCafe24Order .ij-next .ij-d { font-size: 14px; color: #4A5A6B; margin-top: 3px; }
#userStyle #mCafe24Order .ij-next .ij-badge {
margin-left: auto;
padding: 4px 9px;
border: 1px solid rgba(195,165,110,0.75);
border-radius: 999px;
background: #EEF5EA;
font-size: 13px;
font-weight: 600;
color: #036d31;
white-space: nowrap;
}
/* ════════ 모바일 ════════ */
@media (max-width: 767px) {
.myshopArea.myshopMain .benefit { padding: 22px 16px 20px; }
.myshopArea.myshopMain .order { padding: 14px 12px 22px; }
.form-frame .xans-member-edit .join-form { margin: 0 12px 12px; padding: 16px 14px; }
.form-frame .xans-member-edit .verify-box { flex-wrap: nowrap; }
.form-frame .xans-member-edit .group-btn { margin: 0 12px; }
#userStyle #mCafe24Order .resultArea .message strong { font-size: 19px; }
#userStyle #mCafe24Order.xans-order-result .segment .ec-base-table tbody th,
#userStyle #mCafe24Order.xans-order-result .segment .ec-base-table tbody td {
padding: 12px 14px;
}
}