지난 주 6월 26일부터 27일까지 피그마 컨퍼런스 Config 2024가 열렸다. 디지털 기반 제품 중심의 비즈니스를 전개하고 있는 기업들 사이에서 이미 피그마는 매우 강력한 툴로 자리잡고있다. 그런 피그마의 이번 업데이트를 매우 기대하며 주요 업데이트와 기능들을 살펴보았다.주요 업데이트 및 기능1. 피그마 AI몇 년전 Open AI의 Chat GPT가 AI의 시대를 열고, 오픈소스와 API를 활용한 다양한 서비스들이 만들어지면서 AI는 지금 기술적인 트렌드를 넘어 사용자들의 일상에서 까지 쉽게 접할 수 있게 되었다. 이번 config에서 피그마의 가장 핵심적인 업데이트 내용을 꼽자면 단연 AI 기능일 것이다.프롬프트를 입력하여 디자인 생성 : 텍스트 프롬프트를 입력하면 디자인 초안을 만들 수 있다. ..

4주동안 총 네개의 파트와 32개의 강의를 모두 수강했다. 사실 4주동안 진행하는 디자인 챌린지를 매일매일 수강하고 포스팅할 수 있을까 걱정했다. 하루에 해야 될 할당량은 많진 않지만 그것을 매일 하는것은 어렵다는 것을 알기 때문이다. 글 쓰는 것도 작성해보니 생각보다 오래 걸리고 생각할 것들이 많아서 데일리 미션을 완수할 수 있을거라고 솔직히 장담하진 못했다. 하지만 오늘 이렇게 모든 강의를 수강하고 파이널 미션을 위해 글을 쓰고 있는게 신기하면서도 이게되네? 싶은 마음이었다. 처음이 어렵지, 시작하고나니 오기가 생기고 자연스럽게 습관처럼 자리 잡혀서 자연스러워 진 것 같다. 플러스엑스의 환급챌린지도 이런 자기계발 습관을 자리잡을 수 있게 도와주도록 기획한 것이 아닐까 생각이 들었다. 그랬다면 성공적인..

이번 강의는 플러스엑스가 어떻게 애니메이션 소스들을 활용하는 지 볼 수 있었다. 인터렉티브한 표현을 구현하는데 개발 인터렉션 기능뿐만 아니라 애니메이션 소스들을 사용하여 동적인 느낌을 만들어낸다. 영상소스를 png이미지 시퀀스로 변환하는 방식, 웹 접근성이 떨어지는 gif의 단점을 보완한 apng 이미지 추출방식, mp4영상 소스를 활용하거나, json을 활용한 애니메이션 소스로 제작하는 방식이 있었다. 나는 다른 방식보다도 json을 활용해서 제작하는 방법이 흥미가 갔다. 그 이유는 웹과 앱 서비스에서도 자주 사용되고 용량에 대한 부담이 적으며 무엇보다 피그마와 호환이 되는 점이 매력적이라고 느꼈다. 어플리케이션 쪽에 관심이 많은 나는 마이크로 인터렉션을 활용해서 업무해야 되는 일이 많을텐데 json파..

이번 강의에서는 인터랙션 디자인을 개발하기 위해 인터렉션 가이드 제작하는 법에 대해서 알아보고, 플러스엑스의 디자이너가 인터렉션 디자인 구현을 위해서 개발자와 소통하는 방식을 알아보았다. 디자이너는 디자인 제작 후에 개발자에게 디자인 스타일 가이드와 트랜지션, 마이크로 애니메이션, 속도 등의 디렉션이 담긴 인터렉션 가이드를 전달하게 된다. 하나의 서비스에도 무수히 많은 인터렉티브 요소의 특성들이 담겨있어서 개발자와 커뮤니케이션하기 쉽도록 이런 특성들을 종합해서 가이드를 제작한다. 먼제 메인이 되는 트랜지션 효과에 대해서 가이드를 제작한다. 트랜지션은 로딩 애니메이션 효과나 스크롤 시 적용되는 효과 등 서비스의 인상을 결정 짓는 핵심 요소이다. 트랜지션은 웹사이트뿐만 아니라 앱서비스에서도 다양한 제스처 효..

프로토타입은 UI디자인에서 자주 사용하게 된다. 그렇다면 프로토타입은 언제 사용될까? 모션감, 움직이는 표현 등은 말로 설명하기 어려운 부분들이 많다. 프런트 개발에 익숙하고 경험이 많은 개발자는 디자이너의 의도와 인터렉티브한 표현을 파악하고 대면 소통만으로도 원활하게 작업하기도 하지만 역시 직접 움직이는 모션을 제작해서 보여주는 것이 가장 명확하게 나의 디자인 의도를 전달 가능하고 이해시키기에 쉽다. 또는 디자이너가 텍스트나 말로 전달하기 어렵거나 애매한 상황일 때 프로토타입을 제작해서 보여주면 효과적인 업무 진행이 가능하다. 나 또한 디자인 업무를 제외하면 가장 중요하고 어렵다고 느껴질 수 있는 부분은 바로 디자인 산출물 전달 과정에서 생기는 커뮤니케이션과 개발자와의 조율 과정이라고 생각한다. 시각적..

오늘 강의에서는 인터렉션 디자인은 어떻게 진행되는지 알아보았다. 인터렉션 디자인이라고 해서 특별히 다른 방법으로 진행하는 건 아니다. 보통의 디자인 업무 프로세스와 유사하게 흘러간다. 디자인 아이덴티티와 컨셉 등을 파악하고 관련 레퍼런스를 리서치하고 디자인 작업을 진행한 후 프로토타입을 통해 시안을 확인하고 개발자와 커뮤니케이션을 진행한다. 다만 동적인 요소에 대한 디자인 작업 특성상 제스처 및 행동에 대한 고려 사항이 필요하고 모션 위주의 레퍼런스와 그에 대한 개발 환경 등을 고려해 볼 수 있을 것이다. 특히 움직이는 요소들의 이해를 돕기 위한 프로토타입 작업이 필요할 수 있고 완성된 인터렉션에 대한 가이드 작업을 진행하게 된다. 예전에 비해 웹과 앱에서 구동되는 인터렉션 요소들의 활용이 많아지면서 디..