시간을 낭비하지 않는 주니어의 UX/UI
주의: 주니어가 주니어에게 하는 조언입니다!
이 게시글은 Luca Dellapiazza의 Junior UX/UI don't waaste your time 아티클을 번역한 글입니다. 오역이 있을 수 있으니, 지적은 언제든 환영합니다.
수년간 나는 영업부에서 일하면서 '내가 진짜 하고 싶은 일이 무엇인지'에 대해 고민했습니다. 그러던 중, 구글 UX 디자인 과정을 수강했고, 처음으로 UX/UI에 대해 배우기 시작했습니다.
저는 항상 기술과 비디오게임에 열정을 갖고 있었고, 어린 시절부터 플랫폼 디자인으로의 길을 꿈꿔왔습니다. 이탈리아 북부의 작은 마을에서 자랐기 때문에 UX/UI와 비슷한 단어는 들어본 적도 없었지요. 고등학교에 진학하면서 웹사이트와 앱 제작에 관심을 갖게 되었습니다. 프로그래밍 관련 수업을 듣긴 했지만 코딩의 기초나 원론적인 내용만 다루었습니다.
서른이 다 되어서야 제가 평생 찾던 직업이 실제로 존재한다는 것을 알게 되었고, 그 직업이 바로 UX/UI 디자이너라는 것을 알게되었습니다.
첫 개인 프로젝트를 진행하는 건 재밌었지만, 정말 많은 시간이 걸렸고 그 중 일부는 매우 간단한 방법으로 만들 수 있었다는 사실을 이제야 알게 되었습니다. 이렇게 헤매는 것도 배우는 과정의 일부겠죠? 하지만 저와 같은 후배들이 이 시간을 조금이라도 절약하고 새로운 기술을 배울 수 있도록 돕고자 글을 쓰게 되었습니다.
저는 버튼 인터랙션을 만드는 데 많은 시간을 보냈는데요, 거의 몇 시간이 걸렸고 그 결과 잘 작동하는 프로토타입이 나왔지만 와이어프레임은 매우 지저분해졌습니다. (참고로 프로토타입은 여기에서 해볼 수 있습니다.)
정말 지저분했죠!걱정 마세요, 해결책은 있습니다.
최근에 아게 된 사실인데, 인터랙션을 작동시키기 위해서는 각 페이지를 복제할 필요 없이 컴포넌트만 만들면 됩니다. 여기서 컴포넌트란, 페이지에 넣을 수 있는 일종의 항목이라 할 수 있습니다. 저는 새로운 개인 프로젝트에서 해당 페이지에 필요한 컴포넌트를 디자인하기 시작했고, 각 변형을 연결한 다음 페이지에 컴포넌트를 넣었습니다.
그 방법이 뭐냐고요?
새 프레임에 애니메이션을 적용하려는 개체를 만듭니다. 이제 이를 복제하고 여기서 변경해야 할 부분을 디자인합니다.
이제 두 개체를 모두 선택합니다. 그리고 컴포넌트 세트로 설정합니다. (낱선: 베리언트를 말하는 듯 합니다.) 컴포넌트 세트를 만들었다면, 프로토타입 메뉴로 이동합니다. 각 개체를 다른 개체와 연결하고 '변경 대상'을 설정한 다음, 애니메이션을 선택합니다. 이제 디자인 메뉴로 돌아가 첫 번째 컴포넌트를 복사하여 필요한 페이지에 붙여넣어봅시다.
프로토타입을 테스트하면 애니메이션이 작동하는 것을 확인할 수 있습니다! 이 팁으로 시간을 낭비하지 않는다면 좋겠네요. 감사합니다.
낱선: 이분의 포트폴리오 웹사이트를 본 결과, 마우스를 호버했을 때 텍스트가 올라오는 인터랙션 같은 경우에는 페이지를 별도로 만들지 않고 베리언트 안에서 가능하다는 걸 말하고 싶었던 것 같습니다.
