로그인하여 즐겨찾기를
사용해보세요.
디자인 레퍼런스
이정마 서비스에 적용된 다양한 UI/UX 디자인 방법론을 시각적으로 비교하고 학습할 수 있습니다.
1. 프로필 버튼 내부 여백(Padding)과 정렬 방식 비교
아바타(솔리드 영역)와 쉐브론(선형 아이콘) 간의 시각적/구조적 균형을 맞추기 위한 세 가지 접근 방식입니다.
1. 대칭 패딩 (Symmetrical Padding)
수학적으로 좌우 패딩을 동일하게 부여하는 방식. 구현이 가장 직관적입니다.
2. 시각적 보정 (Optical Alignment)
사람의 눈에 완벽한 대칭으로 보이도록 패딩 값을 미세 조정한 방식입니다.
3. CSS Grid (강제 중앙 정렬)
Flex 대신 Grid를 사용하여 텍스트 영역이 남은 빈 공간(1fr)을 모두 차지하도록 강제 정렬합니다.
2. 대시보드와 상세 콘텐츠 간의 시각적 분리(Separation) 방식 비교
요약 대시보드와 그 아래 이어지는 상세 항목 섹션을 명확히 구분하기 위한 4가지 UI 패턴입니다.
1. 구분선(Divider) 추가
시각적 노이즈를 최소화하면서 얇은 줄 하나만으로 상하 영역의 독립성을 부여합니다.
2. 대시보드 박스(Card) 처리
대시보드 자체에 눈에 띄는 배경색과 패딩을 주어 독립된 컴포넌트 단위로 분리합니다.
3. 세부항목 제목 추가
구조적 그래픽 추가 없이 텍스트(섹션 헤더)만으로 내용이 전환된다는 것을 명시합니다.
상세 점검 결과
4. 모두 적용 (모범 답안)
카드형 강조, 구분선에 의한 여백 확보, 그리고 타이포그래피 안내까지 모두 결합하여 흐름을 완벽하게 끊어줍니다.
상세 점검 결과
3. 가이드 문서용 커스텀 블록 (UI 목업 기반)
단순 이미지 대신 CSS와 컴포넌트를 활용하여 가시성과 사용자 경험(UX)을 극대화한 커스텀 UI 블록 디자인입니다.
1비교 테이블 (Comparison)
요금제 A
- •월 33,000원
- •사은품 10만 원
요금제 B
추천- ✓월 29,000원
- ✓평생 할인
2통계 하이라이트 (Stats)
3안전성 안내 (Safety Check)
✕위험한 방식
- ✕민감한 주민번호/개인정보 요구
- ✕타사 서비스로 무단 연결
✓이정마는 이렇게!
- ✓회원가입/개인정보 입력 없이 즉시 연산
- ✓내 계정에 귀속되는 분리된 데이터 관리
4가이드 인앱 모의 동작 (UI Mock)
5단계별 안내 (Steps)
월 통신 요금 입력
기본 요금제 가격을 입력하세요
받는 혜택 입력
사은품, 상품권 등 총액을 입력하세요
목표 이득 설정
"최소한 이만큼은 남기고 싶다"는 금액을 설정하세요
6자주 묻는 질문 (FAQ)
Q.회원가입 없이 사용할 수 있나요?
계산기 자체는 비회원도 자유롭게 사용 가능합니다. 단, 계산 결과를 "내 개통정보"에 저장하려면 로그인이 필요합니다.
Q.입력한 정보는 안전하게 보관되나요?
네, 입력하신 데이터는 철저히 암호화되어 안전하게 보관되며 가입 조건 알림 외의 다른 용도로는 사용되지 않습니다.
7고객 리뷰 (Testimonial)
“혜택 정보 일일이 입력하려니까 귀찮았는데, 아카이브에서 버튼 하나만 누르니까 바로 등록되네요. 이게 진짜 편하네요.”
“위약금 계산이 복잡해서 항상 헷갈렸는데, 이 계산기 쓰고 나서 해지 타이밍 잡기가 훨씬 편해졌어요.”
8하이라이트 박스 (Highlight)
기억을 돕는 눈에 띄는 포인트
강조해야 할 주의사항이나 핵심 요약 내용을 시각적으로 분리해서 표시합니다.
9인용구 (Quote)
“보이지 않는 비용 중 가장 무서운 것은 바로 결정을 미룸으로써 지불하는 기회비용입니다.”
10질의응답 (Q&A)
기간 한정 0원 요금제 vs 만 원대 평생 요금제, 뭐가 더 좋나요?
스마트폰 교체 주기가 빠르고 부지런히 요금제를 갈아탈 수 있는 분이라면 0원 기간 한정이, 귀찮은 건 딱 질색이고 가입 후 신경 끄고 싶은 분이라면 평생 할인 요금제가 단연코 유리합니다.
11액션 버튼 (Link)
4. 마케팅 랜딩페이지 UI 블록
전환율(CVR) 개선을 위한 FOMO·가격 비교·신뢰도·CTA 유형의 UI 컴포넌트 모음. 이미지 없이 코드로만 구현합니다.
12실시간 활동 뱃지 (Live Activity Badge)
13기능 소개 카드 (Feature Card)
알뜰폰 혜택 계산기
월 요금과 사은품 총액, 목표 이득만 입력하면 최적 해지 타이밍을 즉시 계산해드립니다.
- 설치 없이 웹에서 바로 사용
- 개인정보 입력 없이 즉시 계산
- 결과를 내 개통정보에 저장 가능
14고통 지점 시각화 (Pain Point Visualizer)
전부 혼자 계산하고 계신가요?
조건을 정확히 계산했다면 한 푼도 안 내도 됐던 돈입니다.
이정마 계산기가 대신 계산해드립니다.
15기능 그리드 (Feature Grid)
혜택 계산기
월 요금·사은품·목표 이득 3가지만 입력하면 최적 해지일을 즉시 계산합니다.
과거 프로모션 아카이브
역대 알뜰폰 프로모션을 한눈에 확인. 버튼 하나로 내 개통정보에 바로 등록.
개통정보 관리
내 회선의 사은품 조건·위약금 기간을 한 곳에서 체계적으로 추적합니다.
가입 조건 알림
매월 발신 15분, 유지 기간 등 놓치기 쉬운 조건을 미리 알림으로 챙겨줍니다.
16누적 비교표 (Scaling Comparison Table)
오래 쓸수록 월 평균 비용이 뚝!
17신뢰도 지표 배지 (Trust Badges)
18묶음 기능 카드 (Combined Feature Card)
혜택 계산 + 개통정보 등록
계산기로 최적 타이밍을 찾고, 아카이브에서 버튼 하나로 내 개통정보에 바로 등록하세요.
- 혜택 계산기로 최적 해지일 확인
- 아카이브 프로모션 1-click 등록
- 사은품 조건까지 자동 추적
19가로형 3단 핵심 가치 (Horizontal Steps)
3가지만 입력하세요
월 요금, 사은품 총액, 목표 이득. 딱 세 가지만 넣으면 끝입니다.
최적 해지일을 즉시 계산
복잡한 공식 없이 계산기가 알아서 유지 가능 개월 수와 해지일을 알려줍니다.
내 개통정보에 바로 등록
결과를 그대로 내 개통정보에 저장하고, 조건 알림까지 한 번에 설정하세요.
20공지·상태 안내 박스 (Notice Box)
전 기능 정상 이용 가능합니다
혜택 계산기, 과거 프로모션 아카이브, 개통정보 관리 등 모든 기능을 이용하실 수 있습니다. 문의 사항은 우측 하단 버튼을 이용해주세요.
21성장 바 차트 (Growth Bar Chart)
시장 경쟁으로 알뜰폰 요금제 혜택이 매년 개선되고 있어요.
22하단 전환 유도 배너 (Bottom CTA Banner)
내 통신비, 제대로
계산해본 적 있으신가요?
설치 없이 · 개인정보 없이 · 1분이면 충분해요