티스토리 뷰
안녕하세요!
MODLINK 체험단으로서! 체험하면서 느꼈던 저만의 꿀!팁들을 전달해주고 싶은 마음에
어떤게 있을까? 고민하던 중! 쓰게된 글입니다.
(이 글의 모든 내용은 reference없이 머릿 속에서 나온 것이므로 잘못된 개념이 존재할 수 있습니다! 주의 요망!)
저는 이번에 MODLINK를 공부하면서~
체험단 여러분들의 왕성한 활동 덕에 풍부해진 정보 글과 빛컨의 지속적인 예제 실습 글 덕분에
MODLINK의 정보를 얻기가 정~말 쉽게 느껴졌습니다.
하!지!만!
웹/앱에서의 레이아웃 구성하는 정보 글은 잘 없더군요!
우리 공대생들은 디자인 그런거 신경안쓰잖아요?
대~충 도스창에 printf로 원하는 답만 띄우면 되니까...
그래서 준비했습니다!
UI디자인 밋밋하지 않고 조금 더 세련되게 할 수 있는 방법 어디 없을까?
일단 웹 UI 기준으로 글을 진행하겠습니다.
일단 IOT Manager에 접속합니다. (http://iot.vitcon.co.kr/login/)
일단 웹/앱에서 화면을 볼 때 가로로 볼 것인지 세로로 볼 것인지 사용자가 선택할 수 있습니다.
가로로 진행할 경우 세로의 행/열은 신경 쓸 필요 없습니다. 반대도 마찬가지
일단 default인 가로로 진행하겠습니다. (행/열의 사이즈는 생성 후 변경 가능하니 신중하지 않으셔도 됩니다!)
대충 한 번 만들어 보겠습니다.
오른쪽 하단에서 Backcolor로 박스의 배경 색깔을,
Forecolor로 박스 내 글씨의 색깔을 변경할 수 있습니다.
그 외 Height와 Width, Scale 을 이용하여 박스의 높이, 너비, 크기를 변경할 수 있습니다.
이를 이용해 한 번 열심히 꾸며보겠습니다.
사실 대부분 이런 식으로 꾸미기 마련입니다.
백 엔드에 비해 프론트 엔드가 중요도가 낮게 취급되는 만큼,
우리에겐 UI 디자인보단 원하는 동작을 수행하도록 프로그래밍 & 하드웨어를 설계하는 것이
중요도가 높기 때문이죠!
제가 UI를 꾸미면서 든 생각은
이 단조로운 패턴의 item들을 어떻게 하면 조금 더 이쁘게,
사용자가 더 친숙하게 느낄 수 있을까? 라고 고민했습니다.
역시... 갓컨(god + vitcon)은 우리에게
'이미지'
를 추가할 수 있는 권한을 주었습니다.
메뉴의 탭 중 기타 탭을 누르면 위와 같이 이미지 로고를 볼 수 있습니다.
이 이미지를 원하느 곳에 놓고,
오른쪽 하단에 Imageurl을 주목해보겠습니다.
이곳에 우리가 원하는 이미지의 URL을 입력하면 그대로 가져다 쓸 수 있습니다.
인터넷에서 원하는 이미지의 주소를 따온 후, 그대로 써주면 우리가 원하는 이미지로 변환됩니다.
이를 이용하면 잘 짜여진 사진 한장을 그대로 가져다 쓸 수 있죠!
같은 원리로 배경화면에 적용할 수도있습니다.
item이 올라가 있지 않은 칸을 그냥 선택하면 오른쪽 하단 '속성' 부분이 위와 같이 나옵니다.
Background Type부분이 아마 default로 Solid로 선택되어 있을텐데, 이것을 Image로 바꿔줍니다.
그 후 아래 URL을 위와 같은 방식으로 써줍시다.
적용하면 다음과 같은데,
URL 아랫 부분을 보면 Image Layout이 보입니다.
이 것을 바꿔주면 원하는 대로 배경화면이 적용됩니다.
Center = 가운데 맞춤
Stretch = 늘이기
Tile = 바둑판식
(윈도우의 배경화면 설정 방식과 동일)
★ 만약! 다운로드된 이미지의 URL을 생성하고 싶을 떈? ★
http://imageshack.us/ 에 접속하여 URL을 생성할 수 있습니다!
또는 구글에 '이미지 URL 생성하기' 검색!
마지막으로 UI를 여러 개 만들다가 알아낸 점인데!
만약 UI를 세로/가로 둘다 사용하고 싶을 경우에는
가로 UI와 세로 UI를 모두 만드신 후, item들의 인덱스를 모두 정확하게 일치시켜 줍니다.
그렇다면,
앱을 가로로 전환 후 가로 UI에서 사용하든지, 세로로 전환 후 세로UI에서 사용하든지
아이템들의 동작은 동일하게 유지됩니다!
이를 통해 가로로 사용하고 싶을 땐 가로로, 세로로 사용하고 싶을 땐 세로로 사용할 수 있겠죠?
(다시 한 번 갓컨)
다시 한 번 말씀드리자면, 제가 체험단을 진행하면서 알게된 개념이라 잘못된 정보가 있을 수 있습니다!
수정사항 존재할 시 바로 수정하도록 하겠습니다.
마지막으로 이쁘진 않지만,
2차 체험단 프로젝트 - 스마트 도어락에 사용할 제 UI와 함께 마무리하겠습니다!
( 빛컨 홈페이지 이미지를 사용하였습니다.)
'IOT-MODLINK' 카테고리의 다른 글
[Project – 스마트 도어락] 4. 출입 로그 관리 & 케이스 제작 (0) | 2017.12.19 |
---|---|
[IoT-MODLINK] RTC모듈을 이용한 실시간 시간확인! (0) | 2017.12.19 |
[Project – 스마트 도어락] 4. 조명 효과 & 외부 전원 공급하기 (0) | 2017.12.17 |
[Project – 스마트 도어락] 3. 열림/닫힘 상태 확인하기 (0) | 2017.12.17 |
[Project – 스마트 도어락] 2. 도어락 제어하기 (0) | 2017.12.14 |