도전을 수용하고 UX 디자인 인턴십에서 우수성을 발휘하기 위한 가이드

제 사용자 디자인 인턴십에 대한 이야기입니다. 나는 당신의 인턴쉽이 나와 비슷할 것이라고 말하는 것이 아닙니다. 사실, 여러분의 기대치를 형성하기 위해 제가 말할 수 있는 것이 있다면, 그것은 바로 이것입니다. 그것들을 모두 제쳐 놓을 준비가 되어 있습니다. 무엇보다도 자신에게 학습할 공간과 시간을 제공하는 것을 잊지 마십시오 . 나는 내가 노력을 멈추지 않고 당신도 멈추지 않기 위해 내가 얼마나 고군분투했고 모든 것이 내 어려움에도 불구하고 얼마나 잘 진행되었는지 상기시켜주기 위해 내 이야기를 공유합니다.

이 모든 것은 2018년 5월에 스페인 그라나다에서 비행기에서 내렸을 때 시작되었습니다. 가방은 옆에, 노트북은 등에, 아주 녹슨 스페인어 몇 개는 머리에 짊어지고 있었습니다. 유럽에서는 처음이었고 Badger Maps에서 UX 디자인 인턴십을 하면서 앞으로 3개월 동안 이곳에 있을 것입니다. 이 시점에서 겨우 1년 동안 UX에 대해 배웠기 때문에 나는 여전히 UX에 익숙했지만 전문적인 환경에서 경험을 쌓을 준비가 되어 있고 열망했습니다.

나에게 할당된 실용적인 설계 작업을 완료하기 위해 기술 지식을 적용하는 방법을 배웠으니 따라해보세요.

• Sketch를 사용하여 iOS 앱용 디자인 시스템을 만드십시오.
• 데이터 가져오기에서 발생하는 오류를 표시하는 새로운 기능을 디자인합니다.
• 내 디자인을 구현하기 위한 기본 HTML, CSS 및 Flexbox를 배우십시오.
• Adobe Illustrator 및 After Effects를 사용하여 애니메이션을 만듭니다.

이 글은 저와 같은 초보자를 위한 것 입니다. 현장을 탐색하려는 UX 디자인을 처음 접하는 경우 — UX 디자인 인턴쉽이 당신에게 적합한지 알아보려면 계속 읽으십시오! 나에게 있어서 내가 완성한 작업은 기대 이상이었다. 디자인 시스템을 만드는 방법, 사용자 요구에 맞게 디자인을 타협하는 방법, 새로운 디자인을 구현하는 데 따르는 어려움, "기쁨의 순간"을 만드는 방법을 배웠습니다. 인턴십에서 매일 새롭고 예측할 수 없는 것을 제시했습니다. 인턴십이 끝날 무렵, 저는 제가 뭔가 실제적이고 실질적인 것을 만들었다는 것을 깨달았습니다.

추천 자료 : 일류 그래픽 디자인 인턴쉽을 시작하는 방법

1장: 레고

나의 첫 번째 작업은 기존 iOS 앱을 위한 디자인 시스템을 만드는 것이었습니다. 나는 과거에 내 자신의 프로젝트와 응용 프로그램을 위해 디자인 시스템을 만든 적이 있지만 회고적으로 만든 적이 없으며 내 것이 아닌 디자인을 위해 만든 적이 없습니다. 과제를 완료하려면 Sketch에서 모형을 리버스 엔지니어링해야 했습니다. 디자인 시스템을 만들려면 먼저 파일을 업데이트하고 최적화해야 합니다.

내 컴퓨터의 Sketch 프로그램이 약 1년 반 동안 구식이었음을 알게 된 것도 이 적절한 순간이었습니다. 최신 버전의 기호, 재정의 및 기타 기능에 대해 알지 못했습니다. 교훈: 소프트웨어를 최신 상태로 유지하십시오.

심볼 페이지에 대해 걱정하기 전에 아트보드별로 목업 아트보드를 살펴 보고 현재 릴리스된 애플리케이션 버전에 맞게 업데이트되었는지 확인했습니다 . 완료되면 다른 요소에 대한 기호와 재정의를 만들기 시작했습니다. 나는 머리글과 바닥글로 시작하여 거기에서 계속 진행했습니다.

경험에 비추어 볼 때 요소가 두 페이지 이상에 표시되면 기호로 만들 것입니다. 라이브러리를 구축하면서 디자인 시스템에 다른 아이콘을 추가했습니다. 그러나 디자인 시스템이 내가 구성하려고 시도할 수 있는 것보다 빠르게 진화하고 변화하고 있다는 것이 곧 분명해졌습니다. 중간에 심볼을 정리하려고 하는 것을 그만두고 각 페이지를 다시 만든 후 다시 돌아가서 다시 구성하기로 했습니다. 목업과 상징 사이를 오가는 것과 둘 다에 대한 구성에 대한 걱정을 멈췄을 때 더 효율적으로 작업할 수 있었습니다.

Sketch에서 오버라이드와 기호를 이해하는 것은 쉬웠습니다. 이 기능은 내가 익숙한 것보다 프로그램을 훨씬 강력하게 만들고 향후 디자인을 위한 파일의 작업성을 높였습니다. 디자인 시스템 자체를 만드는 작업은 저에게 프로그램에 대해 깊이 파고들 뿐만 아니라 응용 프로그램 디자인의 모든 세부 사항을 이해하는 데 도전했습니다. 작업하면서 수정할 수 있었던 간격, 아이콘 크기 또는 글꼴 크기의 작은 불일치를 발견하기 시작했습니다.

마지막 단계는 기호 페이지로 돌아가 모든 것을 정리하는 것이었습니다. 나는 모든 기호를 제거하고 사용하지 않는 기호와 복제본을 삭제했습니다. 조금 지루하긴 했지만 이 과정에서 매우 가치 있는 단계였습니다 . 문서 작업 후 기호를 살펴보니 각 페이지에 대한 기호를 어떻게 만들었는지 재평가할 수 있었습니다. 그것들을 함께 그룹화하면서 앱 전체에서 그것들이 어떻게 관련되어 있는지 고려해야 했습니다.

이 사고 과정을 거치면서 네이밍 시스템을 만드는 것이 얼마나 어려운 일인지 깨달았습니다. 충분한 요소를 포함할 수 있을 만큼 광범위하고 모호하지 않도록 구체적이며 다른 디자이너가 쉽게 이해할 수 있는 시스템을 만들어야 했습니다. 내가 만족하는 실행 가능한 시스템을 만나기까지 몇 번의 시도가 필요했습니다. 궁극적 으로 애플리케이션에서 사용된 위치에 따라 요소를 구성하고 목록과 같은 부분을 함께 그룹화했습니다. 앱의 다양한 기능에 대해 고유한 디자인을 가진 Badger와 같은 애플리케이션에서 잘 작동했습니다. 최종 제품은 향후 설계 반복 작업을 위해 훨씬 더 쉽게 작업할 수 있는 보다 체계적인 파일이었습니다.

이 프로젝트의 핵심으로 디자인 현대화를 시도했습니다. 나는 영감을 얻기 위해 네이티브 애플 앱에서 그림을 그리면서 앱 전체에 걸쳐 헤더를 재설계했습니다. 다행스럽게도 팀에서도 이에 대해 만족했으며 앱의 향후 업데이트에서 변경 사항을 구현하는 것을 고려하고 있습니다.

전반적으로 스케치 파일을 이러한 세부 사항으로 작업하는 것은 예기치 않게 도움이 되는 경험이었습니다. 나는 모든 페이지를 다시 실행함으로써 글꼴 크기, 색상 및 간격과 같은 것에 대한 훨씬 더 근본적인 이해를 남겼습니다. 기존 디자인을 베끼는 연습은 세세한 부분까지 신경써야 해서 매우 만족스러웠습니다. 마치 레고 모델을 조립하는 것과 같았습니다. 저는 모든 부품을 가지고 있었고 최종 제품이 어떻게 생겼는지 알고 있었습니다. 모든 것을 정리하고 모아서 완성품을 만들기만 하면 됩니다. 이것이 제가 UX 디자인을 즐기는 이유 중 하나입니다. 문제를 해결하고 퍼즐을 맞춰 모든 사람이 감상할 수 있는 것을 만드는 것입니다.

2장: 디자인

인턴십의 다음 부분에서는 일부 디자인 작업을 통해 잡초에 빠질 수 있었습니다. 작업: Badger 웹 응용 프로그램에 대한 새 가져오기 페이지를 디자인합니다.

팀은 사용자가 모든 데이터 동기화를 보고 자신의 계정을 직접 관리할 수 있는 시스템을 만들기 위해 오소리와 CRM 통합을 재설계하는 작업을 하고 있었습니다. 현재 연결에는 설정 및 유지 관리를 위해 오소리 CSA 및 AE의 많은 실습 작업이 포함됩니다. 사용자가 데이터 가져오기와 직접 상호 작용할 수 있는 인터페이스를 제공함으로써 CRM 통합을 위한 사용자 경험을 개선하고자 했습니다.

제 목표는 데이터 가져오기에서 발생하는 오류를 표시하는 페이지를 디자인하는 것이었습니다. 이 페이지는 사용자에게 데이터에 필요한 변경 사항을 적용하는 방법과 위치를 알려주기도 했습니다. 단일 가져오기와 관련된 더 많은 오류가 있거나 사용자가 모든 오류를 한 번에 보고 싶은 경우 모든 정보가 포함된 Excel 파일을 다운로드할 수 있어야 합니다.

목표

1. 가져오기 진행 중 상태를 사용자에게 알리는 가져오기 페이지를 만듭니다.
2. 각 가져오기와 관련된 자세한 오류와 함께 Badger와 CRM 간의 계정 동기화 기록을 제공합니다.
3. Badger에서 가져오기 오류가 있는 각 계정에 대해 CRM에 대한 링크를 제공합니다.
4. 사용자가 모든 미해결 오류의 Excel 파일을 다운로드할 수 있습니다.

사용자 스토리

CRM 계정이 있는 Badger 고객 :
CRM을 사용하는 고객으로서 나는 내 CRM을 오소리에 연결하고 모든 데이터 동기화를 시각화하여 프로세스의 모든 오류를 인식하고 필요에 따라 변경할 수 있기를 원합니다.

오소리 :
오소리는 사용자가 CRM 통합 상태를 관리하고 볼 수 있게 하여 시간과 수동 작업을 절약하고 오소리를 CRM 계정에 동기화하는 사용자를 지원하고 문제를 해결할 수 있기를 바랍니다.

디자인에 대해 자세히 알아보기 전에 표시할 정보와 방법을 결정하기 위해 몇 가지 생각을 해야 했습니다.

1. 대량 및 연속 가져오기
   사용자 유형에 따라 Badger로 데이터를 가져오는 두 가지 방법이 있습니다. 스프레드시트를 통해 수행하면 가져오기가 일괄 처리되고 가져오기를 그룹으로 시각화할 수 있습니다. 그러나 CRM과 통합된 사용자는 CRM 내에서 변경 사항을 적용할 때 Badger 데이터를 지속적으로 업데이트해야 합니다. 디자인은 두 사용 사례를 모두 처리할 수 있어야 했습니다.
2. 레코드 가져오기
   이것은 새로운 기능이었기 때문에 우리는 사용자 행동을 절대적으로 확신할 수 없었습니다. 따라서 정보를 구성하는 방법을 결정하는 것이 어려웠습니다. 사용자가 기록 목록에서 무한 스크롤을 하도록 허용해야 합니까? 특정 수입품을 어떻게 검색할까요? 그들이 할 수 있어야합니까? 활동을 일일 또는 월별로 표시해야 합니까?

궁극적으로 우리는 이러한 각 문제에 대해 최선의 추측만 할 수 있었습니다. 사용자가 이 기능을 사용하기 시작하면 향후 적절하게 조정할 수 있다는 것을 알고 있었기 때문입니다. 이러한 문제를 해결한 후 와이어프레임으로 이동했습니다. 나는 완전히 다른 것을 디자인할 기회가 있었고 이것은 자유롭고도 도전적이었습니다. 최종 디자인은 그 과정에서 만들어진 다양한 디자인의 개별 요소의 정점이었습니다.

디자인 과정

이 과정에서 가장 어려운 부분은 처음부터 다시 시작하는 법을 배우는 것이었습니다. 나는 결국 미적 목적만을 위해 내 디자인에 무언가를 강요하는 것은 이상적이지 않다는 것을 배웠습니다. 이것을 이해하고 내 아이디어를 전달하는 것이 더 나은 디자인에 도달하는 열쇠였습니다. 나는 다른 아이디어를 탐구하기 위해 계속해서 다시 시작하는 방법을 배워야 했습니다.

도전

1. 공백 사용

곧바로 페이지에 어떤 정보를 표시하고 싶은지 탐색해야 했습니다. 우리가 포함할 수 있는 많은 세부 사항이 있었고 확실히 할 수 있는 여지가 있었습니다.

모든 불필요한 정보는 너무 많은 인지 부하를 추가하고 사용자가 실제로 우려하는 것에서 멀어졌습니다. 모든 공백을 없애려고 하는 대신 작업을 해야 했습니다. 이를 염두에 두고 결국 사용자가 가장 우려할 것으로 예상되는 데이터 가져오기와 관련된 오류만 표시하기 위해 모든 관련 없는 정보를 삭제했습니다.

이것은 최종 버전이었습니다.

2. 내비게이션

다음 과제는 정보를 표시하기 위해 사이드바와 헤더 사이에서 결정하는 것이었습니다. 사이드바의 장점은 사용자가 스크롤할 때 정보가 일관되게 표시된다는 것입니다. 그러나 우리는 또한 사이드바에 포함된 정보가 페이지의 나머지 부분에서 일어나는 일과 논리적으로 관련되어 있는지 확인해야 했습니다.

헤더는 깔끔한 단일 컬럼 디자인의 이점을 제공했습니다. 헤더에 얼마나 많은 정보를 담고 있느냐에 따라 수직적인 공간을 많이 차지하는 단점이 있었다. 또한 사용자를 위해 헤더 아래에 있는 내용보다 헤더 내용에 시각적으로 우선 순위를 지정했습니다.

어떤 정보를 어디에 표시할지 결정하고 나면 사이드바 탐색이 더 논리적인 결정이 되었습니다. 우리는 사용자가 주로 가져오기와 관련된 오류와 큰 헤더에 관심을 가질 것으로 예상하며 해당 정보의 너무 많은 부분이 스크롤 없이 볼 수 있습니다. 그러면 사이드바는 사용자가 스크롤할 때 표시되는 가져오기 및 활동 요약을 위한 컨테이너가 될 수 있습니다.

사이드바 디자인 : 사이드바를 만들기로 결정한 후, 어떤 정보를 포함하고 어떻게 표시할지 결정했습니다.

보여줄 정보가 거의 없었기 때문에 시각적으로 흥미로운 디자인을 만들기 위해 고심했습니다. 이런 이유로 사용자를 우선시하고 싶었지만 불필요한 요소를 추가하여 공간을 채우고 있음을 다시 한 번 발견했습니다. 다양한 콘텐츠와 색상 조합을 실험하고 디자인과 사용성 사이에서 타협점을 찾기 위해 노력했습니다. 작업을 하면 할수록 디자인을 뼈대까지 파싱할 수 있었습니다. 유용한 정보와 필러를 구별하기가 더 쉬워졌습니다. 최종 제품은 몇 가지 요약 통계가 포함된 간소화된 디자인입니다. 또한 향후 더 많은 정보를 포함할 수 있는 뛰어난 유연성을 제공합니다.

가져오기 프로세스 : 가져오기 페이지의 디자인이 완료된 후 가져오기 진행 페이지가 생성되었습니다. 여기서 가장 큰 디자인 과제는 진행 중인 가져오기 동기화를 표시하는 방법을 결정하는 것이었습니다. 팝업 및 오버레이에서 다른 솔루션을 시도했지만 궁극적으로 사이드바에 진행 상황을 표시하는 것으로 해결했습니다. 이렇게 하면 가져오기가 진행되는 동안 사용자가 오류를 해결하고 계정 데이터의 기록 기록을 볼 수 있습니다. 가져오기 중단을 방지하기 위해 '데이터 동기화' 및 'Badger로 돌아가기' 버튼이 비활성화되어 사용자가 페이지를 떠날 수 없습니다.

디자인이 끝나면 HTML과 CSS로 넘어갔습니다.

3장: HTML/CSS

이 프로젝트는 모든 유형의 코딩에 대한 나의 첫 경험이었습니다. 이전에 HTML과 CSS를 배우려고 노력했지만 어느 수준의 숙련도에 도달한 적이 없었습니다. 그리고 자신의 디자인을 모형으로 만드는 것보다 시작하는 더 좋은 방법은 무엇입니까?

HTML 문서를 구성하는 논리를 이해하면 기호와 재정의로 Sketch 문서를 구성하는 것이 생각났습니다. 그러나 유사점은 거기에서 끝이 났습니다. 코딩은 내가 지속적으로 머리를 감싸려고 했던 매우 낯선 일처럼 느껴졌습니다. 제 멘토가 말했듯이 " 당신은 프로그래밍에서 디자인할 때와 매우 다른 근육을 사용하고 있습니다 ." 이제 최종 제품이 손에 들고, 코딩을 배우는 것이 배변 훈련을 받은 이후로 배운 것 중 가장 멋진 일이라는 것을 완전히 확신합니다.

문서를 설정하고 기본 사항을 이해한 후 첫 번째 과제는 Flexbox로 작업하는 것이었습니다. 내가 만든 디자인에는 두 개의 기둥이 나란히 포함되어 있습니다. 오른쪽 부분은 스크롤되는 반면 왼쪽은 정적으로 유지됩니다. Flexbox는 내가 작동할 수 있다고 가정할 때 이 목적을 위한 깨끗한 솔루션처럼 보였습니다.

Flexbox를 구현하는 것은 많은 시행착오와 코드의 맹목적인 복사로 구성되어 다양한 웹사이트를 뒤적거리고 튜토리얼을 읽고 코드를 검사했습니다. 이 전체 과정을 통해 멘토의 지도를 받아 결국 작동하게 되었습니다. flex-direction: column 을 사용하면 모든 요소를 ​​단일 열로 가져오고 flex-direction: row 는 한 행에 배치하는 데 도움이 된다는 것을 마침내 이해한 순간을 잊지 못할 것입니다.

비록 내가 처음에 그것에 대한 이해가 flex-direction: column 였지만 지금은 매우 의미가 있습니다. 놀랍게도 코드가 작동할 때까지 이 사실을 깨닫지 못했습니다. 나는 내 코드를 검토하고 내가 그것을 전혀 이해하지 못했다는 것을 깨달았습니다. 무엇이 나에게 도움이 되었습니까? 내 CSS에서 flex-direction: row 를 내가 column 이라는 클래스에 코딩했습니다. 이 시나리오는 나머지 첫 번째 코딩 경험이 어떻게 진행되었는지를 잘 보여줍니다. 내 멘탈 모델은 코드의 논리와 거의 일치하지 않았으며 종종 충돌하고 서로 다른 방식으로 진행되었습니다. 이런 일이 발생했을 때 나는 돌아가서 내 오해를 찾고 코드를 수정해야했습니다.

Flexbox를 설정한 후 오른쪽 부분이 스크롤되는 동안 왼쪽 열을 고정 상태로 유지하는 방법을 찾아야 했습니다. 내가 원했던 것처럼 단 한 줄의 코드로는 달성할 수 없다는 것이 밝혀졌습니다. 하지만 이 과정을 통해 나머지 과정에서 저를 크게 도운 부모-자식 관계를 이해하는 데 도움이 되었습니다.

세로 타임라인과 다이얼을 코딩하는 것도 하나의 과정이었다. 타임라인은 원래 예상했던 것보다 간단했습니다. 얇은 직사각형을 만들고 내부 그림자와 그라데이션 채우기를 설정하고 각 활동 로그의 너비에 할당할 수 있었습니다.

다이얼은 까다로웠다. 나는 거의 성공하지 못한 순수한 CSS로 그것을 구현하려고 시도했습니다. 몇 번 더 단순한 것으로 디자인을 변경하는 것을 고려했지만(진행률 표시줄과 같은) 계속 유지하게 되어 매우 기쁩니다.

주요 투쟁은 테두리를 따라 배경 원과 겹치기 위해 외부 진행 다이얼을 얻는 것이 었습니다. 여기에서 디자인을 약간 변경했습니다. 진행 다이얼의 언로드 부분을 잘라내는 대신 전체를 겹칩니다. 그것은 내가 처음에 만들고 싶지 않았던 디자인과 코드 사이의 타협이었습니다. 그러나 결과적으로 나는 최종 결과에 만족했고 이것을 깨달았을 때 나는 그 타협을 할 수 있어서 기뻤습니다. 최종 다이얼은 JavaScript를 통해 구현되었습니다.

코딩 과정에서 내가 작성한 코드의 모든 라인을 모든 클래스에 던져서 작동하도록 하는 순간이 있었습니다. 이러한 뒤늦은 통찰력을 보충하기 위해 나는 쓸모없는 코드를 제거하기 위해 모든 요소를 ​​살펴보고 검사하는 데 상당한 시간을 할애해야 했습니다 . 집세가 월세를 내지 않는 세입자를 쫓아내는 집주인이 된 기분이었다. 하우스키핑 수준을 유지하고 코드에 대해 신중하고 사려 깊은 태도를 취하는 데 있어 가장 확실히 배운 교훈이었습니다.

대부분의 경험은 블라인드 트래버스 및 회고 학습처럼 느껴졌습니다. 그러나 완성된 제품을 보는 것보다 더 만족스러운 것은 없었습니다. 그 과정을 거치면서 전에는 한 번도 해본 적이 없는 방식으로 내 작업과 상호 작용할 수 있었고 디자인이 구현되는 방식에 대한 통찰력을 얻을 수 있었습니다. 인턴십에 대한 나의 모든 기대 속에서, 나는 내 자신의 디자인 중 하나를 코딩하고 만들 수 있을 거라고는 전혀 예상하지 못했습니다. 첫날에 할 수 있다는 말을 듣고도 이 페이지가 완성되는 것을 보고 믿기지 않았습니다.

4장: 아기 오소리와 함께 일하기

Badger 사용자를 CRM 계정과 통합하는 프로세스의 일부로 사용자가 CRM에 로그인해야 했으며, 이를 Badger에서 기본 CRM 웹 사이트로 리디렉션해야 했습니다. 한 웹사이트에서 다른 웹사이트로 갑자기 전환되는 것을 방지하기 위해 중간 로딩 페이지를 디자인해야 했습니다.

나는 평범한 정적 리디렉션 페이지로 시작했습니다. 그것들은 간단하고 그들의 목적을 확실히 성취했지만 우리는 그것들에 그다지 만족하지 않았습니다.

문제는 사용자에게 웹사이트가 보이는 데 몇 초 만에 떠나는 것임을 알리는 간단하고 흥미로운 것을 만드는 것이었습니다. 디자인은 스스로를 소개하고, 왜 거기에 있는지 설명하고, 누가 보기에 질리기 전에 떠나야 합니다. 그것은 본질적으로 스피드 데이트의 연습이었습니다. 이를 염두에 두고 애니메이션, 특히 기존 로고에서 영감을 받은 건방진 작은 오소리의 애니메이션을 시도하기로 결정했습니다.

오소리 로고를 시작 기준으로 사용하여 Adobe Illustrator에서 다양한 오소리 캐릭터를 만들었습니다. 원래 로고는 로딩 애니메이션치고는 너무 심해서 조금 더 귀여운 것으로 골랐습니다. 일관성을 위해 원래 로고의 빨간색 가슴과 얼굴 특징을 유지하고 이러한 요소를 중심으로 몸과 머리를 만드는 데 주력했습니다. 머리와 줄무늬는 내가 만족하는 모양으로 마사지하는 데 시간이 걸렸습니다. 몸은 조금 더 수월한 형태를 취했지만, 머리와 몸의 적당한 비율을 찾는 데는 조금 더 오랜 시간이 걸렸다. 일단 정하고 나면 애니메이션 작업으로 넘어갈 준비가 되었습니다.

나의 첫 번째 본능은 스톱모션 애니메이션을 시도하는 것이었다. 나는 그것이 훌륭할 것이라고 생각했습니다. La Wallace and Gromit. 그러나 첫 번째 시도와 두 번째 시도, 그리고 이어지는 모든 시도 후에, 어렸을 때 그 쇼를 보는 것이 스톱 모션 애니메이션을 만드는 데 필요한 기술을 완전히 갖추지 못했다는 것이 분명해졌습니다.

내가 원하는 부드러움을 얻을 수 없었고 매우 짧은 로딩 애니메이션에 대해 너무 거슬리는 작은 불일치가 있었습니다. 애니메이션은 일반적으로 초당 23프레임으로 실행되며 내 오소리 애니메이션은 초당 약 15프레임만 사용했습니다. 더 많은 프레임을 추가할 것을 고려했지만 멘토의 제안에 따라 캐릭터 애니메이션을 대신 사용하기로 결정했습니다.

5개 이상의 움직이는 부분이 있는 애니메이션을 만든 것은 이번이 처음이었고 시각적으로 만족스러운 방식으로 2차원 캐릭터를 애니메이션하는 방법을 이해하는 데 확실히 학습 곡선 이 있었습니다. 모션을 사실적으로 만들기 위해 개별 요소가 전체와 독립적으로 움직이도록 애니메이션해야 했습니다. 애니메이션 작업을 하면서 가져온 레이어가 점점 더 세분화되었습니다. 프로그램의 동작과 오소리를 움직이는 방법을 배우면서 머리가 한 레이어에서 다섯 레이어로 바뀌었습니다.

나는 몸의 각 팔다리를 고정하고 몸의 부모 레이어에 자식으로 각 신체 부분을 설정했습니다. 허벅지와 어깨 상단에 앵커 포인트를 적절하게 설정하여 적절하게 이동했는지 확인한 다음 회전과 여유를 사용하여 신체 부위의 움직임을 시뮬레이션했습니다. 머리는 약간 까다로웠고 몸과 독립적으로 약간의 수직 움직임이 필요했습니다. 점프를 보다 사실적으로 보이게 하기 위해 머리가 나머지 몸체에 의해 위로 밀리기 전에 공간에 약간 매달려 있고 나머지 몸체보다 약간 후에 아래로 내려오도록 했습니다. 또한 코를 앞세우고 점프할 때는 위를 가리키고 달리는 동안은 직선처럼 보이도록 각도를 조정했습니다.

사용자를 오소리로 다시 리디렉션하는 페이지의 애니메이션은 CRM의 정보로 가득 찬 배낭을 메고 오소리에게 다시 달려가는 아기 오소리를 표시했습니다.

그리고 마지막으로: 혼란스러운 오소리. 이것은 내가 생성해야 하는 마지막 페이지에 대해 수행되었습니다. 통합 프로세스에서 예기치 않은 복잡성을 사용자에게 알리는 오류 페이지입니다. 동정심 많고 혼란스러운 오소리보다 더 나은 방법이 어디 있겠습니까?

여기에서 까다로운 부분은 기존 만화 오소리의 측면 프로필과 로고를 결합하여 전면을 향한 머리 모양을 만드는 것이 었습니다. 이 프로젝트를 시작하기 전에는 실제 살아있는 오소리를 한 번도 본 적이 없었습니다. 말할 필요도 없이 Badger는 이번 달 내 Google 이미지 검색에 포함되었습니다. 오소리의 머리가 실제로 얼마나 평평한지 보고 놀랐습니다. 처음 몇 가지 디자인에서 이것을 모방하려고 시도했지만 결과에 만족하지 못했습니다. 코, 줄무늬 및 귀의 위치를 ​​조정하여 모양을 좀 더 작업하여 최종 결과를 얻었습니다.

이 애니메이션 과정을 통해 기존 지식을 더 높은 수준으로 끌어올릴 수 있었습니다. 내가 할 수 있다고 생각하는 일에 자신을 제한하기보다 내가 아는 것 이상으로 나 자신을 밀어붙일 필요가 있었습니다 . 저는 원래 캐릭터 애니메이션을 할 자신이 없었기 때문에 스톱모션 애니메이션으로 시작했습니다. 새롭고 색다른 시도를 할 수 있는 기회를 줌으로써 내 기대를 뛰어넘는 것을 성취할 수 있었다.

결론

인턴십에서 보낸 3개월은 정말 만족스러웠습니다. 매일매일이 새로운 것을 배우고 시도하는 것이었습니다. 내가 하는 모든 일에는 도전이 있었습니다. 심지어 디자인과 같이 더 친숙한 작업을 하는 경우에도 마찬가지였습니다. 나는 무언가를 만들 때마다 그것이 어떻게 받아들여질지 매우 불안하고 두려웠다. 자기 의심도 많고 버려지는 생각도 많았습니다.

그런 이유로 팀의 일원이 되고 나를 올바른 방향으로 이끌어줄 멘토가 있다는 것은 정말 놀라운 일이었습니다. 다른 것을 시도하라는 말은 종종 다른 것을 시도하고 더 크고 더 나은 것을 달성하는 데 필요한 유일한 격려였습니다 . 나는 두더지 때리기 게임에서 머리를 계속해서 맞았지만 항상 계속해서 튀어나오는 설치류로 내 자신을 상상하는 것을 좋아합니다. 이제 투쟁과 도전은 끝났고, 나는 그것을 다시 하고 싶을 뿐입니다.

내가 배운 것과 내가 할 수 있다고 생각했던 것 이상으로 밀어붙이는 방법에 감사드립니다. 내가 몇 달 동안 얼마나 멀리 왔는지 보는 것은 미친 짓입니다. UX 디자이너가 되는 것에 대한 나의 이해는 기능을 파악하는 것부터 디자인을 망치고 나서 그것을 구현하기 위한 프론트 엔드 코드를 작성하는 것까지 엄청나게 성장했습니다. 이 인턴십은 제가 얼마나 더 배워야 하는지 배웠고 계속 일하도록 동기를 부여했습니다. 나는 내가 할 수 있는 것이 내가 할 줄 아는 것으로 제한되어서는 안 된다는 것을 이해하게 되었습니다.