티스토리 뷰

안녕하세요!


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와 함께 마무리하겠습니다!

( 빛컨 홈페이지 이미지를 사용하였습니다.)















댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
«   2025/02   »
1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28
글 보관함