빠른 요약
돈 이체 앱 디자인에서 자주 볼 수 있는 일반적인 상호작용 중 하나는 사용자가 숫자를 입력하는 화면입니다. 예를 들어 친구에게 보내고 싶은 금액을 입력하면, 화면은 그 금액을 통화 형식으로 보이도록 다시 표시합니다. 예: $45.33.
이 레슨에서는 ProtoPie의 내장 함수 중 하나를 사용하여 숫자 입력을 일반적인 통화 형식으로 표시하는 방법을 배웁니다.
배울 내용
이 레슨에서 배우게 될 내용:
ProtoPie의 내장
format()함수를 사용하는 방법공식에서 텍스트 조각들을 함께 결합하는 방법
기기의 기본 키보드를 자동으로 표시하는 방법
일반 알파벳 키보드 대신 숫자 키보드를 표시하는 방법
완료 시간: ≤10분
시작하기 전에
시작 Pie를 열어 보세요. 여기에는 모의 결제 앱의 한 화면이 들어 있습니다. 우리는 사용자가 연락처에 보내려는 금액을 입력하는 화면을 작업하게 됩니다. 사용자는 숫자만 입력할 수 있어야 합니다. 예를 들어 사용자가 5를 입력하면, 이 경험은 이를 5센트로 해석해 $0.05로 표시해야 합니다. 사용자가 50을 입력하면 $0.50으로 표시합니다. 사용자가 505를 입력하면 $5.05로 표시하는 식입니다. 마지막으로, 사용자가 입력하는 대로 표시가 실시간으로 업데이트되기를 원합니다.
단계별 안내
1부: 입력 설정
사용자의 입력을 캡처할 방법이 필요합니다.
캔버스에 입력 레이어를 추가합니다. 지금은 “이체 금액” 레이어와 “계속” 버튼 사이에 배치하세요.
레이어 이름은 기본값인
Input 1로 둡니다.나중에 숨길 것이므로 크기, 글꼴, 색상 등은 신경 쓰지 않아도 됩니다.
지금 미리 보기하면 입력 필드를 탭할 때 일반 알파벳 키보드가 나타나는 것을 볼 수 있습니다.
이제 숫자 키패드가 표시되도록 바꿔 봅시다.
캔버스에서 입력 필드를 선택한 상태로, 오른쪽 속성 패널 아래쪽의 “키보드 옵션” 섹션으로 스크롤합니다.
“유형” 드롭다운에서 필드가 포커스될 때 나타날 키보드를 선택할 수 있습니다. “숫자”를 선택하세요.
이제 미리 보기하면 입력 필드를 탭할 때 숫자 키패드가 나타나는 것을 볼 수 있습니다.
씬이 시작될 때 키패드가 자동으로 나타나게 하고 싶습니다.
시작 트리거를 추가합니다.
키패드는 입력 레이어에 포커스가 있을 때 나타납니다. 시작 트리거 아래에 포커스 응답을
Input 1레이어에 추가하고, “포커스 인”이 선택되어 있는지 확인합니다.
다시 미리 보세요. 씬이 시작될 때 Input 1 레이어가 포커스되어 키패드가 나타나야 합니다. 하지만 Input 레이어 바깥을 탭하면 포커스가 해제되어 키패드가 사라집니다. 키패드가 항상 화면에 남아 있도록 하려면 Input 레이어가 실수로 포커스를 잃지 않도록 추가 설정을 해보겠습니다.
다시 한 번 입력 속성 아래쪽의 “포커스 아웃 옵션”으로 스크롤합니다
“리턴 키 탭” 선택을 해제합니다
“입력 레이어 바깥 탭” 선택을 해제합니다
한 번 더 미리 보세요. 이제 어디를 탭하든 입력 레이어가 포커스된 상태로 유지되고, 키패드도 항상 화면에 남아 있습니다.
2부: 표시용 입력 서식 지정
사용자가 입력하는 동안 표시가 실시간으로 업데이트되기를 원합니다.
입력 레이어에 감지 트리거를 추가하고,
Input 1의 텍스트 속성 변경을 감지하도록 설정합니다.
💡 복습: 감지 트리거는 선택한 객체의 속성이나 선택한 변수의 값이 변경될 때마다 항상 작동합니다.
이제 입력값을 표시해 봅시다!
감지 트리거 아래에 텍스트 응답을 추가합니다.
이체 금액레이어를 선택합니다.내용 아래에서 “수식”을 선택합니다.
계속하기 전에 ProtoPie의 format() 함수를 살펴보겠습니다. 이 함수는 숫자 정보를 특정 방식으로 표시할 수 있게 해줍니다. 예를 들어 천 단위 구분 기호를 추가하거나 숫자를 특정 소수 자리까지 표시할 수 있습니다. 두 개의 매개변수를 받습니다:
value - 서식 지정을 원하는 원래 숫자 — 여기서는 사용자가 입력한 값
format - 숫자를 어떻게 서식 지정할지 나타내는 패턴.
형식은 다음과 같습니다:
format(value:NUMBER,format:TEXT)
format 매개변수는 최대 네 가지 핵심 문자로 구성됩니다:
서식의 정수 부분을 나타내는
#서식의 소수 부분을 나타내는
0소수점 문자(예: 북미에서는
.)구분 문자(예: 천 단위 구분 기호로
,)
몇 가지 예를 살펴보겠습니다:
format(1234.567, "#")은1235를 출력합니다. 서식에 소수 자릿수가 지정되지 않았으므로 정수만 표시됩니다. 출력이 반올림되는 것에 주목하세요.format(1234.567, "#,###")은1,235를 출력합니다. 이는 구분 문자를 지정하며, 연속된 세 개의#문자는 이 구분 문자가 천 단위 구분 기호로 사용됨을 의미합니다.format(1234.567, "#,##")은12,35를 출력합니다. 위의 예와 비슷하지만, 구분 문자 뒤에 연속된 두 개의#문자가 와 있으므로 백 단위 구분 기호처럼 동작합니다.format(1234.567, "#,###.00")은1,234.57을 출력합니다. 이것은.를 소수점 문자로 추가하고 소수 자릿수 두 개를 지정합니다. 출력이 소수 둘째 자리에서 반올림되는 것에 주목하세요.format(1234.567, "#.###,00")은1.234,57을 출력합니다. 이는 위의 형식과 같지만,.는 구분 문자로 사용되고,는 소수점 문자로 사용됩니다. 이는 유럽과 세계 여러 지역에서 숫자를 서식 지정하는 일반적인 방식입니다.
💡 마지막 예는 format() 함수를 사용해 특정 대상에 맞게 경험을 현지화할 수 있음을 보여줍니다.
이 예제에서는 북미식 달러-센트 형식을 사용할 것입니다. 형식은 다음과 같습니다:
$1,234.57
위의 네 번째 예가 이 형식의 숫자 부분을 보여줍니다. 공식에서 $ 문자를 별도로 붙여야 합니다. 실제로 해봅시다!
방금 만든 텍스트 응답에서 다음 공식을 사용합니다:
"$" + format(Input 1.text, "#,###.00")
💡 무슨 일이 일어나고 있나요:
알 수 없는 — 또는 동적인 — 정보를 다룰 때는 동적 정보를 “채워 넣기” 위해 공식을 사용해야 합니다. 이번 경우에는 사용자가 무엇을 입력할지 알 수 없습니다. 따라서 예제에서 보았던 것처럼 명시적인 숫자를 쓰는 대신, format 함수의 첫 번째 매개변수로 Input 1 레이어의 text 속성을 전달합니다. 이 공식이 실행되면 ProtoPie가 입력된 값으로 이를 대체합니다.
또한 출력 시작 부분에 $ 문자를 추가하고 있습니다. 달러 기호와 서식이 지정된 숫자, 두 조각의 텍스트를 + 문자로 연결하는 것입니다. 다른 통화 기호, 예를 들어 € 또는 £를 사용하고 싶다면 공식에서 $를 원하는 기호로 바꾸면 됩니다.
미리 보기해 봅시다! 원하는 경험에 거의 다 왔지만, 무엇을 입력하든 소수점 오른쪽에 센트가 표시되지 않고 달러 정수만 표시되는 것을 볼 수 있습니다.
이것은 전달하는 입력이 항상 정수이기 때문입니다. 우리는 위 입력을 123.45로 해석하길 원하지, 12345로 해석하길 원하지 않습니다. format이 처리하기 전에 입력을 100으로 나누는 기본 계산이 필요합니다.
공식을 다음과 같이 수정합니다:
"$" + format(``Input 1``.text / 100, "#,###.00")
💡 표준 키보드에는 ÷ 키가 없기 때문에, 프로그래머들은 오래전에 계산에서 나눗셈에 / 문자를 사용할 수 있다고 합의했습니다. 마찬가지로 *는 곱셈에 사용됩니다.
다시 미리 보세요. 이제 서식 지정이 완전히 작동할 것입니다!
이제 마지막 정리입니다. 입력 필드를 숨겨 봅시다. 이를 수행하는 방법은 몇 가지가 있습니다. 레이어의 불투명도를 0으로 설정할 수도 있습니다 — 이것도 문제없습니다 — 하지만 이런 상황에서는 레이어를 보이게 둔 채 화면 밖에 배치하는 편을 선호합니다. 이렇게 하면 나중에 이 Pie를 작업해야 할 사람에게 이 경험에 숨겨진 입력 레이어가 있음을 상기시켜 줍니다.
숫자 서식 지정... 식은 죽 먹기!
이 레슨에서는 ProtoPie의 다재다능한 format() 함수를 사용해 숫자 입력을 통화 금액으로 올바르게 표시하는 방법을 배웠습니다. 또한 숨겨진 필드에서 사용자가 입력한 값을 캡처하기 위해 기기의 기본 키보드를 사용하는 방법도 배웠습니다.
더 알아보기
문서: ProtoPie의 내장 함수
팁 & 트릭: 변수와 공식을 사용해 타자기 효과 만들기
팁 & 트릭: 공식과 변수를 사용해 스톱워치 타이머 만들기
