다양한 기능을 가진 컴포넌트들을 활용해 로그인 페이지와 다이얼로그 페이지 만들기
본격적으로 개인과제를 진행하기 전에, 수업 중 배운 컴포넌트들을 미리 세팅하고 그 세팅한 컴포넌트들을 활용해 로그인 페이지와 라이트박스가 함께 있는 다이얼로그 페이지를 제작해보자.
1. 파운데이션에 해당하는 스타일 설정
컬러와 폰트 스타일을 지정하자. 충분히 개인과제로 확장될 수 있기에 신중하게 컬러를 선정하고 폰트도 지정해놓자. 개인과제를 진행하며 충분히 변경될 수도 있지만, 개인적으로 차분함을 느끼는 색깔, 폰트 스타일을 지정해보자. 제공하는 서비스와 컨셉에 따라 신중히 결정되어야 할 부분이겠지만, 지금은 나의 선호대로 지정하자.
2. 파운데이션을 활용한 컴포넌트 제작 및 설정
앞으로 반복되거나 자주 사용하게 될 컴포넌트들을 생각해볼 수 있겠다. 액션, 인풋, 컨테이너, 컨트롤 컴포넌트 등 말이다. 수업 중 배운대로 각 컴포넌트의 기능에 따라 배리언츠들 또한 신중히 설정해주자. 이 컴포넌트는 차후 작업에 어떻게 활용될까? 를 기능 기준으로 생각하다보면, 어떤 분류로 어떤 배리언츠 기능을 설정해야하는지 대략적으로 가늠이 되는 듯 하다. 그러나 아직은 여전히 수업중 배운 순서와 규격대로 따라가기 바쁘다.
3. 로그인 페이지 & 다이얼로그 페이지 제작
쉬울 줄 알았는데 되게 당혹스러울만큼 복잡하고 어려웠다. 컴포넌트들을 한 화면에 끌어올 때 생각해야하는 배치, 또 각 요소간의 간격, 리사이징 값의 설정 등 단순히 컴포넌트들을 가져오기만 하면 끝이 아니라는걸 알게 됐다. 특히 새로운 페이지를 구성할 때 끌어온 각 컴포넌트들을 또다시 오토레이아웃으로 묶는 과정에서 새롭게 적용하는 설정들이 익숙치 않았다. 이것부터 오토레이아웃을 적용해야하나? 아님 저 단계가 끝나면 해야하나? 등 생각해보지 않은 문제들을 마주했다.
사실 다소 당혹스러웠던 부분은 로그인 페이지보다 다이얼로그 페이지였다. 상단의 헤더부분은 좌측정렬이고 아래 액션버튼은 중앙정렬이다. 기본적으로 리포트를 작성하거나 PPT를 만들 때 정렬의 방향에 통일성을 중요시해 제작해왔다. 수업 때 튜터님의 실습을 따라할 땐 별 문제의식없이 했는데, 막상 혼자 페이지를 제작하려하니 정렬과 균형에 대한것들이 다소 어렵게 느껴졌다. 이게 제대로 된 정렬이 맞나? 사용자들은 이 화면을 보고 안정감을 느낄까? 등이었다. 사람에게 기본적으로 인식되어있는 LTR 읽기가 이 정렬에 적용된 것이리라 생각한다. 페이지 프레임과 컴포넌트간 간격도 내가 생각하는 안정감 있는 간격과 튜터님이 해답으로 내놓으신 제작물의 간격과 달라 당황했다. 갈 길이 멀다.
4. 무엇을 배웠는가?
컬러, 폰트스타일을 지정하거나 컴포넌트를 설정해 놓는 근원적 이유에 대해 고민해볼 필요가 있다. 대학생 때 리포트를 쓰거나 발표준비를 하며 이렇게 까다롭게 스타일을 지정해 놓은 적은 없다. 근데 내가 자주 쓰는 폰트를 정리해 놓거나, 제목과 본문에 들어갈 글자의 폰트 사이즈를 내 원칙대로 분류해 놓은 적은 있다. 또, 발표를 준비하며 PPT를 만들 때에도, 페이지들을 준비한 학생은 다 다르지만 이번 발표의 컨셉에 따라 글자와 배경색을 통일하고 자주쓰는 이미지나 아이콘을 따로 한 슬라이드에 몰아 놓았던 기억은 뚜렷하다. 오토레이아웃도 같은 맥락이라고 생각된다. 결국 반복되는 작업이나 때때로 변경이 필요한 작업들에 대해 무용한 반복을 하지 않기 위해 갖춰놓은 하나의 시스템이라고 생각하면 될 듯 하다.
그런 이유라면 수업중 배운 컴포넌트들에만 한정되어 똑같은 형식으로, 베끼듯 만들 필요가 없다. 내가 전체적인 프로젝트의 방향과 컨셉을 이해하고만 있다면, 반복될 것 같은 컴포넌트, 혹은 유용하게 활용가능할 것 같은 배리언츠 기능을 우선순위에 따라 적용하거나 설정할 수 있게 된다. 결국, 이 모든건 체계와 통일성이 갖춰진 하나의 시스템 구축으로 귀결된다. 그럼 무엇이 반복될지, 무엇이 중요한 기능일지는 어떻게 쉽게 구분하고 설정할 수 있게 될까? 컴포넌트들을 모아놓은 페이지를 제작하며 다시한번 느꼈다. 디자인은 결국 실습이다. 머릿속으로만 이해하고 있어봐야 무용지물이다. 끝없이 반복하고 또 반복해봐야, 반복될 주요 기능들을 파악하거나 머릿속으로 생각하는 컨셉을 실제 디지털 화면에 구현시키는 일에 버벅대지 않을 수 있다. 실력있는 디자이너가 되자. 때론 무용해보이는 반복을 통해서라도.
