오늘 한 것
- 내 프로젝트를 위한 와이어프레임 만들기
- 안의 세부사항 꾸며 넣기
오늘은 9시-1시까지 통으로 프로젝트를 위한 기획을 만드는 시간을 가졌다.
맥북이라 Adobe XD를 설치할 수가 없어서 뒤쳐질까봐 걱정이 되어 어제 남아서 상단,메인,컨텐츠의 메인프레임을 거의 끝내두고 간 덕에 좀더 마음의 여유를 갖고 작업할 수 있었다 !! ㅎㅎ
와이어프레임은 "제품을 구성하는 서로 다른 레이아웃을 정적인 로우 피델리티 상태로 재현한 것으로, 간단한 모양만을 사용하여 인터페이스를 시각적으로 묘사한 것입니다" 라고 정의되는데, 말그대로 wire(선)으로 frame(틀)을 잡는 것이다.
이렇게 대략적으로 선으로 칸을 나누고 그 칸안에 어떤 이미지 혹은 글이 들어갈지 대충 한눈에 볼 수 있도록 만든 것!이 바로 와이어프레임이다.
이렇게 와이어프레임을 만들며 레이어가 엄~~청 많이 생겼는데, 이 레이어를 관리하는 게 또 일이면서 재미더라고~?!!! 나 레이어 정리에 재능 발견~!
크게는 상단, 메인, 컨텐츠, 하단으로 나눈 뒤 그 안에 세부로 컨텐츠1,2,3,4 이런식으로 나눴는데 마지막엔 너무 잘 정리된 모습에 뿌듯하기까지 했다 ㅎㅎㅎ !!
이렇게 크게 구성하고, 얘네를 펼치면..
짜잔 !!
.
.
이렇게 와이어프레임을 짠 뒤, 이젠 정말 이걸 보고 코딩을 짜서 바로 만들 수 있도록 이미지도 넣고 관련 글도 넣는 작업을 한다.
오늘은 여기까지! 내일 가서 마저 마무리할 예정이다 :)
이렇게 이미지와 글을 채워넣으며 프레임은 계속해서 수정해가면서 하게 되더라구. 하도 레이어가 많다보니 처음엔 원하는 사각형이나 텍스트만 선택하는 일이 좀 어려웠었는데, 위에 사진에서 처럼 레이어 정리를 잘 해뒀더니 들어가서 척척 찾아서 선택하면 돼서 한결 일하기가 편해졌다 !
XD 3일차에 이렇게 내공이 쌓이다니..! 앞으로가 기대돼!!!!! >_<
내일 나의 목표는 오늘 못 끝낸 걸 완성하고 좀더 다듬기!!
.
.
.
오늘 문득 수업을 마치고 집으로 돌아오는 지하철 안에서
그동안 배우고싶던 개발을 생각만하다가 드디어 배우게 된 지금이,
진짜 너무 행복하다! 내 자신 너무 기특해! 너무 멋져!
라는 생각이 문득 들었다.
아직 개발의 ㄱ자도 시작안한 초짜지만 아직까지는 평탄하게 진행중이다~!
기획도 즐겁고, 앞으로가 그저 기대되는 해맑은 비전공자 개발자(준비생) ㅋㅋㅋ!!
저번주 코로나로 아파서 운동도 1주일 조금 넘게 쉬었지만
오늘부턴 운동도 다시 시작했다 !!!
계속해서 성장하고, 내일을 기대하는 내 자신,
너무 멋져 !!!!
내일 봐- velog :)
