[나 혼자 ]홈페이지 제작의 기초작업 - 와이어프레임(2)



웹/앱 개발 전문 회사 샐리입니다.

저번에 이어서 오늘은 xd로 와이어 프레임을 제작해볼게요.

일단 엑스디를 실행하겠습니다. (xd 설치 및 기초 강좌는 이전 포스팅을 참고하세요)



가장 먼저 아트보드 사이즈를 선택할 수 있는데요.

일단 웹 1920px를 선택합니다.


제가 1920을 선택한 건 1920*1080px의 해상도의 모니터 점유율이 높기 때문입니다.


우리가 사용하는 모니터는 데스크톱부터 노트북 사이즈까지 해상도가 다 다릅니다.

만약 1920사이즈의 아트보드(도화지)에 꽉 차게 내용물을 넣게 되면 1920보다 작은 화면에서는 보기 불편하게 되죠. 그래서 데스크탑부터 노트북 사이즈까지 다양하게 커버하기 위해 전체 폭과 작업 사이즈를 따로 놓고 작업을  할 겁니다.




네이버는 실제 작업 사이즈가 1080px입니다. 작업 사이즈는 홈페이지의 성격별로 정하면 되는데요. 

잘 모르겠다면 벤치마킹하고자 하는 사이트를 따라가세요.


저는 작업 사이즈를 1160px로 정하고 xd에서 작업 사이즈 위치를 먼저 잡아보겠습니다.




안내선 만들기

세로 안내선을 만들려면 아트보드의 테두리 왼쪽으로 마우스를 가져다 대어 양방향 화살표가 표시되도록 합니다. 화살표 아이콘을 아트보드 쪽으로 드래그 앤 드롭하여 안내선을 만들고 아트보드의 안내선 위에 놓습니다. 


*안내선 숨기기 : 아트보드를 선택하고 Cmd+;(Mac) 또는 Ctrl+;(Win)을 클릭하여 안내선을 숨깁니다.

*안내선 잠그기 : 안내선을 잠그려면 shift+Cmd+;(Mac) 또는 shift+Ctrl+;(Win)을 누릅니다. 



이제 안내선에 맞춰서 콘텐츠를 그리면 되는데요.  그리는 방법은 다음과 같습니다.




직사각형 및 정사각형 그리기

1. 사각형 도구를 선택합니다.

2. 다음 작업 중 하나를 수행합니다.

-직사각형을 그리려면 직사각형이 원하는 크기가 될 때까지 대각선 방향으로 드래그합니다.

-정사각형을 그리려면 정사각형이 원하는 크기가 될 때까지 Shift 키를 누른 채 대각선으로 드래그합니다.

3. 오브젝트 선택 후, 채우기 옆에 있는 사각형을 클릭합니다. 색상 피커로 색상을 지정합니다.





임의의 위치에 텍스트 입력

텍스트 툴을 클릭하고 텍스트를 입력하려는 위치를 클릭합니다.


텍스트 서식 적용

텍스트를 클릭한 다음 속성 관리자를 사용하여 해당 텍스트에 대한 유형, 글꼴 크기 및 텍스트 정렬을 지정합니다.







드래그로 오브젝트 이동

선택 툴로 하나 이상의 오브젝트를 선택하고 새 위치로 드래그합니다.


오브젝트 정렬 및 배치

정렬 패널을 사용하여 선택한 오브젝트를 선택 요소나 아트보드에 대해 가로 또는 세로로 정렬하거나 배치할 수 있습니다.




위의 방법을 활용해서 각자 서비스에 맞는 화면을 기획해보세요. 

저번에도 말했듯이 와이어프레임은 머릿속에 있는 사이트를 가볍게 꺼내보는 단계라고 보면 됩니다.




오늘 콘텐츠가 도움이 좀 되었나요?

다음 시간부터는 웹디자인에서 자주 사용하는 컴포넌트별로 디자인 꿀팁과 어떻게 활용하는지에 대해 설명드릴게요!


그럼 이만~~~~



여러분만의 홈페이지를 만들어보세요.

만약 홈페이지를 제작하는데 전문가의 도움이 필요하다면 웹/앱 개발 전문 회사 샐리가 도와드리겠습니다.

샐리 메일(stelar@sally.company) 혹은 홈페이지 문의를 통해 연락주세요!



*이 글은 https://helpx.adobe.com/kr/xd/user-guide.html 을 참고해서 작성되었습니다.

#홈페이지제작 #xd와이어프레임 #xd기획 #adobeXD #웹서비스기획 #웹개발 #앱개발 #개발외주업체 #웹아웃소싱 #앱아웃소싱


135, Jungdae-ro, Songpa-gu, Seoul, Republic of Korea