본문 바로가기

기획/Adobe XD

[Adobe Xd] 기초_쉬어가는 페이지 1

뭐 딱히 한건 없는것 같다 싶어도, 사실 이제 뭐든 그리실 수 있으실거에요. 

 

우리는 도형을 그릴 수 있고, 글자를 쓸 수 있고, 그려놓은 것들을 패스로 변환하는 방법도, 불투명도를 이용하는 방법도, 기본적으로 주어지는 에셋을 이용해서 와이어프레임을 구성하는 것도 해보았습니다. 

 

이제 딱히 할게 없어졌는데, 오늘은 xd를 이용해서 서비스 화면을 바꾸는걸 살짝 선보여드리려고 해요. 

 

먼저 대상화면을 녹화해서 사진을 추출하는데, 그건 넘어가고요. 화면의 해상도만한 아트보드를 만들어줍니다. 

 

일단 상용서비스를 보여드릴 수는 없으니, 잠시 작업을 할게요.:)

원래 이 모양이 아닌데, 이렇게 모양이 바뀌어 있기도 하고, 비도덕적인 업체에서 마침 따라하고 있기도 해서, 바꾸려고 하던 참이에요. 

이 서비스에서 제공하고 있는 중점적인 기능, 서비스에서 제공하고 싶은 중심기능은 하단에 포진되어 있어요. 

사용자입장에서 화면에 접근해서 해당 중심기능을 활용하는데에 집중하게 하고 싶었고, 그래서 저걸 조금 더 편하게 접근하게 하려고 바꾸고 싶은거죠. 

 

화면에 별도의 다른 기능보다도, 그 중심기능이 중요한 페이지입니다. 

 

데스크탑 웹화면에서 제공하는 중심기능 역시 비슷한데, 우리는 그 중에서도 우리회사의 수익에 중점을 둘 수 밖에 없죠. 고객이 편하고, 우리가 편하게끔.. 

 

현재 구조라면 고객이 적어도 한번이상은 스크롤을 돌려야 할거에요. 

 

그럼 여기서 개선할만한걸 하나씩 적용해 나갑니다. 

 

먼저 엄지손가락이 닿을만한 위치에 버튼들이 있는지, 필요없는 버튼은 없는지, 화면 구성이 조화가 맞는지

 

그러다보니까, 다 날리게 되고 

 

대강 색상은 수정해나가면 되겠지만, 상단에 text만 날려도 항참 영역이 확보되는걸 볼 수 있었어요. 조금 낮춰도 상관없겠네요.:)

내부의 기능들은 공개하기 조금 어렵지만, 우선은 후속작업이 진행되면, 완료되었을 때 기분좋은 마음으로 소식을 공유드리도록 할게요.