경험기록

최근 약 20일간 나의 작심삼일을 깨게 해준 고마운 앱이 있어 소개 해본다. 제목에서 알 수 있듯이 요가 앱이다. 이전에는 Headspace 같은 명상 앱은 사용 해봤는데 요가 수업 영상을 제공하는 앱은 처음 사용해본다. 앱스토어에서 우연히 발견했는데 로고의 견상자세를 하고 있는 멍멍이 그림이 너무 귀여워 눈길이 갔다. 다른 웰니스나 운동 앱들 보다 눈에 확 띄었다. 역시 귀여운게 최고! 오프라인 요가 수업도 최근 원데이로 체험도 해봤지만 미리 예약 해야하고 못가게 되면 미리 취소 하는 것도 기억해야 하는게 좀 귀찮았다 (벌써 별게 다 귀찮은 나이인가...🥲) 막상 오프라인 요가 세션을 가면 너무 좋고 힐링 되고 여럿이서 함께 호흡을 나누고 티처의 섬세한 가이드가 도움이 많이 되서 온라인이랑 비교 하기는..

안녕하세요 ! 오늘은 피그마 컴포넌트 속성 (Property) 기능을 사용하는 간단한 예제를 보여드리겠습니다 ^^ 컴포넌트 프로퍼티는 서비스의 디자인 시스템이 고도화되고 사용되는 컴포넌트들이 다양해질 때 유용하게 사용되는 피그마 기능인데요! 저도 최근까진 단순히 컴포넌트들을 독립적으로 만들고 최대한 컴포넌트들이 일관성있게 유지되게 수작업으로 해주는 방법밖에 사용해보지 않았는데, 컴포넌트가 많지 않으면 괜찮지만 비슷한 모양의 컴포넌트들이 많아지고, 디자인 수정사항이 자주 발생할 경우 또 일일히 맞춰줘야하는 번거로움이 있는데, 컴포넌트 프로퍼티를 이용하면 훨씬 효율적으로 작업할 수 있고, 너무 많은 컴포넌트를 각각 관리해주지 않아도 되는 장점이 있습니다. 처음에 개념을 이해하는 것이 조금 어려웠지만, 예제로..

무언가를 사람들의 머릿속에 남게 만드는 것은 매우 어려운 일이다. 매순간 우리는 무수한 정보를 의식적으로 또는 무의식적으로 처리하고 있고, 각종 매체에서 쏟아져나오는 정보홍수 속에 살고 있기 때문에 수많은 정보 중 특정 정보가 우리의 머릿속에 남아있다는 것은 그만큼 그 정보가 매우 인상적이었거나, 맥락적으로 우리에게 유익한 정보였거나, 찾던 정보였거나, 감동을 줬거나 하는등 상황에 따라 다르다. 사람들의 기억속에 기업의 제품이나 서비스를 더 잘 각인시키고, 재방문을 높이기 위해 흔하게 사용되는 심리학적 효과에 대해 알아보았다. 용어는 처음들어보지만 많은 서비스에서 이용되는 UX 전략인 듯 하다. "Zeigarnik Effect" 자이가르닉 효과란? 마치지 못하거나 완성하지 못한 일을 쉽게 마음 속에서 지..

안녕하세요! 피그마를 사용한 웹사이트 이미지 캐러셀을 만드는 간단한 방법을 소개해보고자 합니다! 아래와 같이 곡선의 형태로 이미지를 좌우로 넘겨볼 수 있는 캐러셀 방식이에요! 웹사이트 디자인과 어울린다면 이렇게 디자인해볼 수도 있겠네요! 따라하기 쉬우니 순서대로 따라해보세요! 1. Frame을 그려준다. 세로로 조금 더 긴 직사각형의 프레임을 하나 그려준 후 Ctrl+D 를 통해 복제 합니다. 2. 프레임 전체 선택 후, Unsplash 플러그인을 켜준다. 플러그인을 켜면 중간 메뉴의 Preset을 선택하면 한꺼번에 비슷한 주제의 사진을 랜덤하게 넣을 수 있습니다. 필요하면 나중에도 이미지를 바꿀 수있으니 일단은 빠르게 해보기 위해 원하는 이미지 카테고리 선택한 후, Insert Random 을 눌러주세..

안녕하세요, 오늘은 피그마 내 프로토타이핑 기능을 이용할 때 작업 효율을 높일 수 있는 팁 하나를 소개해드리고자 합니다. 피그마 프로토타입 기능은 설계한 서비스의 화면의 순서 또는 플로우대로 연결을 시켜 특정 버튼이나 영역을 눌렀을 때 어떤 화면으로 어떤 인터랙션 스타일 (클릭, 드래그, 스크롤 등) 로 이동할 것인지 목업으로 보여주는 것입니다. 피그마에서도 프로토타입으로 간단한 애니메이션/모션 기능을 넣을 수가 있습니다. 하지만 여러 화면의 플로우를 설계하다보면 Prototype 화면이 매우 지저분해지는 것을 확인 할 수 있습니다. 보통 앱, 웹 서비스들은 여러 페이지들이 서로 연결되어있고, 또 여러 경로를 통해 한 페이지에 진입 할 수 있기 때문에 한가지 기능에 대한 프로토타입이 아니라 전체적인 프로..

UI 디자인 감각을 키우고자 피그마 연습을 게을리하지 말아야겠다. 피그마에서 제공하는 강력한 기능들이 많은데 아직 모르는게 많다.. 튜토리얼만 보고 이해하는것보다 직접 만들어보면서 터득하는게 가장 기억에 오래남는다. 오늘은 미국 다이어트 식단 앱 'Lifesum' 앱 화면 일부를 클론 (디자인 따라 만들기) 연습을 했다. 화면은 mobbin.com 을 참고하였다! https://mobbin.com/apps/lifesum-ios-1f1267a3-fa68-4112-a355-9b2d8bb1fecb/f085cb02-5809-4727-b4d5-7229328a9bcc/screens Lifesum iOS | Mobbin - The world’s largest mobile app design reference libr..

안녕하세요! 오늘은 피그마로 배달 앱 스크린 클론 디자인 연습을 해보았습니다. 피그마의 뛰어난 기능들로 금방 후딱 만들 수 있었는데요! 배달 앱은 미국의 'gopuff' 라는 퀵커머스 딜리버리 앱입니다 :) 참고로 해외 서비스는 Mobbin.com, Collect UI 같은 사이트에서 많이 참고하는 편이에요. 그럼 피그마 완전 기초 연습 해보고 싶으신 분들은 단계별로 따라와주시면 될것 같습니다 :) ------------------------------------------------------------------------------------------------------------- 이 화면에 들어가는 컴포넌트들을 하나 하나 만들어보겠습니다. 예시로 만든 거라 가격이나 메뉴이름은 넣지 않았어요...

글 형식의 블로그 콘텐츠 플랫폼 미디엄 (Medium)의 정보구조를 그려봤다. 이렇게하는게 맞는지는 모르겠지만.. Figjam을 사용해 연습했다. 피그잼 너무 편하지만 정보구조 그리기에는 완벽한 툴은 아닌걸로...ㅎㅎ

학교에서 산학과제로 서비스 기획을 처음해보고 있는데, 앱의 화면과 메뉴구성을 기획하기위해 정보구조를 생각하지 않을 수가 없었다. 애초에 컨셉에만 너무 집중한 나머지 어떤 정보들이 구성되어야하며 어떤 정보가 메인 화면에 나오고, 하위 메뉴에 숨겨져도 되는 정보들에 대한 정의 단계가 없어서 와이어프레임을 하면서 그런 것들을생각해야하다보니 당연히 와이어프레임도 시원시원하게 그려지지 않았다. 정보구조는 서비스 기획에서 아이디어가 어느정도 구체화된 후 꼭 거쳐야 하는 단계임을 몸소 느꼈다. 정보구조 또한 탄탄한 유저 리서치를 통한 사용자 니즈와 태스크를 정확히 이해하고 비즈니스의 목표도 이해가 된 상태에서 진행되어야 한다. 앱에서 보이는 모든 메뉴들은 다 논리적인 근거에 기반해 배치된 것이다. 랜덤하게 정보를 구..

디지털 프로덕트의 UX패턴을 이해하고 도메인별 특성, 인지심리적 요인들을 실제 사례를 통해 이해하는 것이 UX디자이너로서 중요하다고 생각한다. 모든 앱이 똑같을 필요는 없지만 전세계적으로 사용되는 서비스에서 사용된 UX 규칙들, 휴리스틱들에는 다 그만한 이유가 있을 것이다. 다양한 서비스들을 보면서 어떤 목적으로 버튼의 위치를 결정했는지, 시스템의 피드백/행동이 사용자로부터 어떤 행동을 하도록 유도하는건지, 생각해보고 개념화해서 앱 분석 연습을 해볼 예정이다. 미국의 UX 직무 인터뷰에서는 앱 크리틱을 많이 하는편인 것 같다. UX 관련 유튜브를 찾아보면 잡 인터뷰를 위해 App Critique을 어떻게 준비해야할지에 대한 콘텐츠들이 꽤 있는 것을 보았다. 보통은 많이 쓰여지고 잘 알려진 서비스 중 하나..