인터랙션을 위한 프로토타입 제작과 피그마를 통한 협업 방법

• 인터랙션

'디자인에서도 일관성이 필요하지만, 인터랙션에서도 일관성이 필요하다.' 강사님께서 말씀하신 이 말이 신선하면서도 와닿게 느껴졌다. 대체로 UIUX 디자인 분야에서는 특히 더 일관성을 중시하는 것 같다.
 
피그마를 통한 인터랙션 강의를 들어보는 것도 처음이고, 인터랙션을 직접 만들어본 것도 처음이었다. 예전에 스케치라는 프로그램을 사용해서 인터랙션을 구현해본 적이 있었는데, 그때는 정말 너무 어렵게 다가왔었다. 당시에는 피그마가 없었고, 스케치라는 프로그램에만 의존해 UI를 제작하던 때였어서 더 어렵게 느껴졌던 것 같다.
 
그치만, 지금 피그마를 통해 인터랙션을 제작해보니, 피그마 정말 똑똑하고 쉬운 프로그램이구나.. 라는 생각을 또 한번 하게 되었다😭 (피그마 사랑해요...)
쉽고 직관적인 아이콘과 버튼들은 대체 이거 누가 만들었을까? 싶은 서비스를 제공한다. '쉬운 서비스를 만들고 싶다면 피그마를 보라'는 말이 백번 천번 맞는 말이다. 더 빨리 기초 강의를 들었다면 확실히 더 좋았을 것 같다. (내돈내산이지만 지금도 후회하지 않고, 앞으로도 후회하지 않을 예정이다😋)
 
사실 나는 UIUX 디자이너라는 큰 분야 안에서도 비주얼 인터랙션 디자이너가 되고 싶은 마음이 제일 크다. 그래서 오히려 이런 인터랙션에 대한 공부와 갈증이 생겼었는데, 확실히 해보니 재미있기도 하고, 별거 아니네~! 싶은 생각도 들지만, 이러한 생각은 내가 이미 모르는 것들을 배웠기 때문이겠지🤣
 
 

제작해 본 인터랙션

 
 
 
아래부터는 협업 관련해 알려주신 사항들인데, 이 점들도 아주 유용하게 다가왔다.
실제로 개발자 분들과 협업 시, 이러한 사항들을 잘 체크한 후 전달 드려야겠다 라고 다시 깨닫기✍🏻
 

• 협업

아이폰은 1배수, 2배수, 3배수 모두 폴더에 함께 넣어서 줘도됨
안드로이드는 1배수, 2배수, 3배수를 각각 폴더링하여 줘야함 (이후에 개발 이슈가 될 수 있음)
 
금지된 사항들
 
1. 파일 이름 소문자 사용
파일 이름은 소문자를 사용해야 함 (ex. Favorite.png -> favorite.png)

 

2. 첫글자 숫자 금지
24-favorite.png -> favorite-24.png
 
3. 띄어쓰기 금지
favorite red.png -> favorite-red.png
 
4. 축약하기
Button -> btn
Image - img
icon - ic
 
5. 규칙만들기
유형+이름_숫자 등
ic-favorite-24.png
btn_go_hover.png
 
 
오늘까지 피그마 학습 끄읕!👩🏻‍💻