1. HTML 데스크탑 모양 만들어보기
이번에는 데스크탑과 모바일 화면모양을 Adobe 와 Windows에서 기본제공하고 있는 에셋을 이용해서 간단히 작성해보겠습니다. (실은 너무 쉽기도 하면서 어렵기도 해요.) 대강 이렇게, 이렇게 생긴�
jaehyunshin.tistory.com
요즈음 추세는 데스크탑이 아닌 모바일 우선이죠. 구글의 search console에서도 모바일 최적화 여부를 우선하고 있기도 합니다. 워낙 모바일 기기를 많이 사용하게 되니까, 지금 저처럼 컴퓨터 앞에 앉아서 작업하는 사람이 많이 주의를 기울여야 할 부분인 것도 같습니다.
앞서 보셨던 데스크탑 화면의 구성은 아래와 같습니다.
마찬가지로 이번에도 한 두어개 집어넣어볼겁니다.
우선은 아트보드를 하나 만들고 저는 360x640으로 만들겁니다.
nav-bar, card, footer로 하나씩 Drag & Drop 해줄거에요.
그럼 아래와 같이 하나의 wire가 완성이 됩니다.
물론 wire만 그리는게 기획하는 사람이 할 일은 아니기도 해요. 먼저 뭘 어떻게 만들지, 벤치마킹할 거리도 찾고, 어떤게 핫한지도 찾아보고, 우리한테 어떻게 적용하면 좋을지 고민도 해보고, 서비스로 구현할 때에는 화면이 하나에서 바로 다음으로 넘어가는게 아니라, 여러가지 동작들에 대한 예상도 해야하기 때문에, 화면 하나로 끝내기 쉽지는 않죠.
아마, 이걸 텍스트로만 풀어낸다고 하면 이런식으로 장황해지는것도 불가피할거고...
의미없는 문서작업이 굉장히 많아질 수밖에 없는게 그게 많이 줄어들어요.
그럼에도 어쨌든 여기까지가 대략의 기본적인 탐색의 끝입니다.
그럼, 잠시 쉬었다가 이제 하나씩 재미있는 것들을 건드리면서 나타나겠습니다.
