🧸 Daily UI 004
Prompt: 계산 기능
계산 기능 또는 인터페이스를 디자인하세요.
일반 계산기인가요, 공학용 계산기인가요, 아니면 주택담보대출이나 자동차 할부 같은 특수 목적 계산기인가요?
신용 점수 예측처럼 특정 값을 예상하기 위한 계산기인가요?
이 계산기는 휴대폰, 태블릿, 웹 앱 중 어디에 사용될 예정인가요?
디자인 전 고려할 질문
계산기 종류는 무엇인가요?
- 기본 계산기: 사칙연산 중심 (+, –, ×, ÷)
- 공학용 계산기: 삼각함수, 로그, 지수 계산 등 포함
- 특수 목적 계산기
- 주택담보대출 계산기: 월 납입금, 이자율 계산 등
- 자동차 할부 계산기
- 신용 점수 예측 계산기
- 칼로리 계산기, 세금 계산기 등도 포함됨
사용 환경은 어디인가요?
- 모바일 앱
- 웹 앱
- 태블릿 UI
→ 환경에 따라 버튼 크기, 배치, 입력 방식이 달라져야 함
디자인 시 포함해야 할 요소
| 요소 | 설명 |
|---|---|
| 입력 영역 | 숫자나 변수 입력을 위한 필드 |
| 버튼 패드 | 숫자 키, 연산 키, 특수 키 포함 |
| 결과 영역 | 실시간 또는 최종 결과 표시 |
| 레이블 및 안내 텍스트 | 입력값이 어떤 의미인지 알려주는 설명 |
| 에러 메시지 | 잘못된 입력에 대한 피드백 제공 |
| 반응형 UI | 디바이스에 따라 유연하게 배치 변경 |
🧸 결과물
- 클론 디자인을 해보았다(왼쪽이 실제 어플UI)
- 수업시간에 배운 컴포넌트도 열심히 사용했구요
- 가운데에 금액 부분의 검은 띠가 이질적이라서 확인 버튼과 같은 색으로 변경해봤다.
- 스터디하면서 받은 피드백
- +10000,+50000처럼 한번에 입력하는 텍스트 넣기
- 00 숫자 버튼 추가하기
