아톰 속성에는 무엇이 있을까 ? (속성 메뉴얼)

아톰 속성은 스마트메이커에서 제공하는 아톰(객체??)들이 각각 가지고 있는 고유한 값이나 옵션 그리고 설정을 제어할 수 있습니다. 기본적으로 모든 아톰의 속성은 해당 아톰의 UI나 설정을 제어하는 ‘스타일 속성’을 가지고 있으며 데이터베이스와  연동하여 동작하는 ‘데이터 속성’을 가지고 있습니다. 또한 각 아톰별로 특수한 기능이 존재할 경우 별도의 속성이 존재합니다.

 

안녕하세요. 

오늘은 스마트메이커로 앱을 개발할 때 항상 사용하지만 실제로 속성의 의미를 모르고 습관처럼 사용하는 아톰의 속성들에 대해 깊이 있고 자세하게 이야기해보려 합니다. 사실 스마트메이커의 아톰을 다루기 위해서는 각 아톰마다 가지고 있는  아톰속성을 잘 알고 이를 활용하면 앱을 개발하는데 훨씬 많은 도움이 될 것입니다.

 

1. 스타일 속성과 데이터 속성

 

1.1 데이터 입력란 속성

 

데이터 입력란의 속성을 보면 아래 그림과 같이 스타일 속성과 데이터속성이 있습니다.

스타일속성은 데이터입력란이 가지는 고유한 옵션이나 설정값을 제어할 수 있습니다.

데이터속성은 데이터베이스와 연동하여 데이터베이스의 테이블이나 필드(컬럼)을 지정하거나 설정할 수 있습니다.

 

 

데이터 입력란 속성 화면

 

1.2 스크롤 속성

 

스크롤 속성을 보면 데이터 속성과 마찬가지로 스타일 속성과 데이터속성이 있습니다.

스타일속성은 데이터 속성과  같이 스크롤이 가지는 고유한 옵션이나 설정값을 제어할 수 있습니다.

데이터속성도 마찬가지로 데이터베이스와 연동하여 데이터베이스의 테이블이나 필드(컬럼)을 지정하거나 설정할 수 있습니다.

 

 

스크롤 속성 화면

 

 

1.3 기능버튼 속성

 

기능 버튼 속성은 스타일 속성만 존재합니다. 기능버튼으로 데이터베이스와 직접적으로 사용하지 않기 때문에 데이터속성이 필요하지 않기 때문임을 짐작하였을 것입니다.

 

기능버튼 속성화면

 

 

1.4 검색창 속성 

검색창 속성은 데이터베이스와 직접적인 연관이 많은 아톰으로 속성을 보면 역시 데이터속성이 존재하는 것을 알 수 있습니다. 스타일 속성은 당연히 존재하겠죠. 

 

 

검색창 속성화면

 

2. 스타일 속성

그럼 위의 4개의 아톰들이 공통으로 가지고 있는 스타일 속성에 대해 알아보겠습니다.

스타일 속성의 주요 특징은 ‘UI(User Interface)’와 ‘값(Value)‘를 제어하는 것에 의미가 있습니다. 위의 예시에서 입력란이 아니더라도 대부분의 아톰을 화면에 어떻게 표시할 것인가, 아톰에 할당된 값을 어떻게 나오도록 할 것인가 등을  확인하려면 우선적으로 스타일 속성의 옵션을 확인하면 알 수 있습니다. 말이 조금 복잡한데 쉽게 아톰속성에서 체크 또는 선택된 값에 따라 아톰이 보여지는 방식이 달라진다고 생각하면 쉽습니다.

 

 

데이터 입력란 스타일 속성 화면

일반적으로 스타일속성에는 위 그림과 같이 입력속성, 화면속성, 입력값속성 아이콘 설정, 보이기 속성 5가지로 구성되어 있는 것을 알 수 있습니다. 그럼, 간단히 5가지 속성에서 하는 일을 알아보겠습니다.

 

 

입력 속성

- 어떤 입력값을 받을 것인가를 선택할 수 있습니다.

 

한글입력 : 패킹 후 스마트폰에서 입력값을 입력할 때 키보드의 자판에 한글이 먼저 표시되게 지원해 주는 속성입니다.
숫자입력 : 입력란에 숫자만 입력할 수 있도록 설정하는 속성입니다.
암호입력 : 입력된 데이터를 암호화하여 표시하는 속성(예:*****)입니다.
영문(소문자) : 영문 소문자만 입력할 수 있게 설정하는 속성입니다.
영문(대문자) : 영문 대문자만 입력할 수 있게 설정하는 속성입니다.
지우기버튼 : 입력란에 입력된 값을 지울 수 있게 설정하는 속성입니다.

 

 

화면 속성

- 화면에 아톰을 어떻게 표시할 것인가를 선택할 수 있습니다.

 

자동크기  : 설정한 폰트의 크기에 따라 데이터 입력란의 크기(세로)가 자동으로 조절되는 속성입니다.
읽기 전용 : 입력란에 조회되어 있는 데이터를 수정할 수 없게 설정하는 속성입니다.
자동탭이동 : 입력란에 설정한 최대 자릿수로 값이 입력되었을 때 다음에 입력할 데이터입력란으로 자동으로 초점이 이동되게 설정하는 속성입니다.
다중라인 : 입력란의 크기에 맞춰 자동으로 입력 라인이 변경되는 속성입니다.
수직스크롤 : 다중라인 속성체크 시 활성화되며 입력란 내에 스크롤을 표시할 건지 여부를 체크하는 속성입니다.
둥근 모서리 : 입력란의 테두리를 둥근형태로 설정할 때 사용하는 속성입니다.
초점활성화 : 어느 입력란에 초점이 이동되어 있는지 직관적으로 확인하고 싶을 때  사용하는 속성입니다.
필수입력표시 : 데이터속성에 필수입력속성 체크 후 기능버튼의 저장버튼을 눌렀을 때 입력란에 값이 입력되어있지 않다면 입력란의 테두리를 강조하는 속성입니다.
취소선 : 입력된 데이터에 취소선이 삽입되는 속성입니다.

 

입력값 속성

- 해당 아톰이 어떤 입력값을 받을 것인가를 선택할 수 있습니다.

기본값 : 입력란에 값을 미리 지정할 때 사용하는 속성이며 강제로 값을 미리 입력하여 사용할 수도 있으며 앱을 설치한 사용자의 기본정보 등을 가져올 수 있는 속성(전화번호, 이메일, 디바이스타입등)
접두어 : 입력란에 설정된 자료형태가 문자형일 때 사용가능한 속성이며 속성 부분에 특정 문자를 입력하면 화면에는 보이지 않지만 데이터를 저장 시 설정한 문자가 DB에 같이 저장되는 속성(속성에 SMART를 입력하였다면 실제 DB에 저장되는 값은 “SMART”+사용자가 입력한 값)
동적속성 : 스마트폰에서 동작하는 전용 속성이며 전화 걸기, 이메일 보내기, 위치 나타내기, 웹사이트열기 등을 사용할 수 있는 속성 
유효성검사 : 회원가입 화면을 구현할 때 형식이 정상적으로 입력되었는지 체크할 때 사용하는 속성 
아톰명표시 : 입력란에 설정한 아톰명을 표시할 때 사용하는 속성 
아이콘설정 : 입력란에 아이콘 이미지를 설정하는 속성

 

아이콘 설정

- 해당 아톰에 아이콘을 추가할 것인가를 선택할 수 있습니다. 입력란에 아이콘을 추가하여 사용자가 직관적으로 무엇에 사용하는 아톰인지를 알 수 있습니다.

 

보이기 속성

-  해당 아톰을 화면에 보이게 할 것인가를 선택할 수 있습니다.

화면 감춤 : 실행모드로 전환하거나 모바일에서 실행 시 설정된 아톰을 화면에서 감춤을 시키는 속성입니다.
선택표시 : 실행모드에서 키보드의 F9키를 누르면 체크된 아톰이 보이기/감추기가 설정되는 속성으로 복잡한 화면을 구현할 때 사용되는 속성입니다. ( 윈도 환경에서 사용 )
비활성화 : 데이터는 표시되나 편집할 수 없도록 하는 속성이며 읽기 전용속성과 다르게 데이터 선택도 되지 않게 하는 속성입니다.

 

오늘은 스타일 속성에 대해서 자세히 알아보았습니다. 다음 포스팅에서는 오늘 알아보지 못한 데이터 속성에 대해 자세히 알아보겠습니다. 데이터 속성은 데이터베이스와 관련된 속성으로 중요한 기능이 많으니 다음 포스팅 놓치지 마세요.

 

오늘은 여기까지...

감사합니다.