반응형

archive/learn 21

내가 하고 싶은 UX디자인

나는 사회적 디자인을 하고 싶다. 사회문제에 관심을 갖고 정말 중요한 문제들을 해결하고 싶다. 물질 풍요의 시대이지만 어느때보다 외로움이 급증하고 빈부격차는 심하다. 소셜미디어로 자신을 알리고 내세우는 일이 중요해져 정작 가까운 이웃을 돌아보지 못하고 나와 먼 세상의 것들에 뭔지 모를 욕구가 불타오르고 눈이 멀어져 간다. 상생하는 건강한 사회가 이루어지려면 사회 구성원들의 정신건강이 중요하다. 작은 것들이 큰 것을 형성하기 때문이다. 개개인의 삶에 변화와 성장을 줄 수 있다면 건강항 사회를 만들 수 있다. UX디자인 일을 지속해야할까말까 고민이 많았다. 만약 이 일을 계속 한다면 나는 사람에게 집중하는 일로 만들어가고 싶다. 누구나 조건 없이 환대 받고 사회에서 소속감을 느낄 수 있고 덜 외롭다고 느끼는..

archive/learn 2024.11.05

[앱 리뷰] 요즘 매일 같이 접속하는 서비스, Down Dog!

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

archive/learn 2023.04.05

[Figma] 피그마 컴포넌트 프로퍼티 (Component Properties), 피그마 베리언츠 (Variants) 사용 법 기초

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

archive/learn 2023.03.18

[UX심리] 기억에 더 잘 남게 하는 자이가르닉 효과(미완성 효과)를 이용한 UX 전략

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

archive/learn 2023.01.31

[Figma 팁] 쉽게 곡선형태의 이미지 캐러셀 (Curved Carousel)구현해보기 (매우 쉬움!)

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

archive/learn 2023.01.11

[Figma] 피그마 프로토타이핑 시간 단축 팁

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

archive/learn 2023.01.08

[피그마 UI 연습] #01 - Lifesum App

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..

archive/learn 2022.10.21

[Figma] 피그마 기초 : 배달 앱 화면 보고 연습해보기 (오토레이아웃, 프레임으로 컴포넌트 만들어보기)

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

archive/learn 2022.07.11

[IA] 정보구조는 어떻게 그려야할까? 정보구조의 8가지 원칙

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

archive/learn 2022.05.19

[앱 분석 01. ] Google Maps - 구글맵스 UX 분석

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

archive/learn 2022.05.06

[Figma] 피그마 컴포넌트 활용법

안녕하세요. 오랜만에 피그마 튜토리얼 포스팅이네요. 오늘부터 스스로 매일 30분만이라도 피그마 연습에 투자하고자 합니다. 아직 학생이라 피그마를 매일 쓸일은 없어서, 오랫동안 안쓰면 배워놓은 기능들 다 까먹게 되는게 너무 아깝더라구요. 툴 자체는 배우기 쉽지만 손에 익어야 작업 속도가 빨라지기 때문에 꾸준한 연습이 필요한 것 같아요! 오늘은 피그마 컴포넌트 기능에 대해 자세하게 포스팅해보겠습니다. 피그마를 사용하실줄 아는 분들은 컴포넌트 기능이 어떤 역할을 하는지 알고 계실텐데요! 보통 UI 구성요소들은 반복적으로 여러 화면에 사용됩니다. 가장 쉽게 들 수 있는 예시는 버튼인데요. 같은 색, 모양의 버튼이지만 텍스트만 바뀌는 경우는 해다 버튼은 컴포넌트로 만들어주고 그 컴포넌트를 복사해서 instance..

archive/learn 2022.04.20

[UX] 왜 감성 디자인이 필요할까?

UX 디자인에서 감성 요소는 매우 중요한 부분이다. 기술이 발전하고 다양한 서비스가 생겨나며 단순히 본질적인 기능에 대한 충족만으로는 경쟁력을 갖지 못하기 때문이다. 인간은 다른 사람들과 감성적인 교감을 원하고, 유대감을 본능적으로 느끼고 싶어한다. 정서적 경험은 사람들의 기억에 오래 남는다. 하지만 감정이 개입되지 않았던 경험은 빠르게 잊혀진다. 인간관계를 예시로 들어 설명하자면 당연한 얘기다. 내가 사랑하는 사람과 함께할 때는 깊은 감정을 느끼고 정서적 교감을 하게되고 그 사람은 내 기억속에 특별한 사람이고, 매우 큰 의미를 갖게된다. 하지만 친분이 별로 없는 사람에게는 감정을 느낄 새가 없고, 특별한 계기가 없는 이상 나와 상관없는 사람이며, 그냥 스쳐지나가고 기억에 남지 않는다. 우리의 에너지는 ..

archive/learn 2022.04.19

[PM지식] 제품 개발 프로세스 간략 정리

프로덕트 매니저 업무에 대해서도 궁금하여 유데미 PM강좌를 하나 듣고 있다. 5-6년전에 만들어진 강의라 조금 오래되긴 했지만 성장기를 넘어서서 오랫동안 사랑받는 제품을 개발하는데에는 본질적인 프로세스는 크게 바뀌지 않을 것 같아, 툴이나 어떤 산업 트렌드보다는 디지털 프로덕트를 개발할 때 어떤 프레임워크를 통해 의사결정을 내리는지를 알아두면 좋을 것 같다. 강의 챕터중 'Product Development Process' 섹션에 대한 요약이다. 제품 개발 프로세스에는 보통 7가지 단계가 있다. 1. CONCEIVE 첫 단계는 Conceive 이다. 한국에서는 어떤 단어로 표현하는지는 모르겠는데, 처음 서비스에 대한 아이데이션을 하는 단계로 생각하면 될 것 같다. 이 단계에서는 사용자의 문제나 불편을 겪..

archive/learn 2022.02.08

UX 리서치 이해하기 - 사용자 조사의 핵심

세상에는 정보가 넘치고 흥미로운 것도 많고 새로 배울 게 많아 무엇을 선택해서 배울 것인지 정하는 것도 어렵다. 특히 하나에 꽂혀서 직진하는 성향이 아니라 이것저것 다 따져보고 생각이 복잡한 성향을 가진 사람들에게는. 나는 후자 쪽에 속한다. 나의 첫 출발이 너무 다른 업계였어서, UX를 배우기로 정하는데 꽤 많은 시간이 걸렸고 이제야 첫 걸음을 떼어보았다. 결국 하기로 생각한 것은 일단 빠르고 가볍게 시작을 해보는 것이 훨씬 리스크가 적다는 것을 몸소 느꼈다. UX라는 분야를 배우기로 했지만 막상 UX는 산업별로 접근방식이 다르고 회사마다의 방식도 다르고 정형화된 일이 아니어서 (요즘 많은 일들이 그렇지만..) 이 분야에서 먼저 어떤 부분에 집중을 하고 싶은지도 조금 고민된는 부분이었다. 하지만 결국 ..

archive/learn 2021.10.20

[UX 프로젝트] 마켓컬리 UX 리디자인 (1.검색 탭)

UX 는 공부할게 많은 분야인데, 너무 책만 읽고 지식만 습득하다보니 정보가 머릿속에 산발적으로 남아 있고 스스로 생각해보는 시간이 좀 필요한 것 같아 개인 프로젝트를 재미삼아 시작해보았다. 아직 신규 서비스를 생각해낼만한 경험과 아이디어가 부족해 기존의 서비스를 개선하는 UX 리디자인 프로젝트를 시작해보았다. 첫 프로젝트로 마켓컬리를 해보기로 했다! 비주얼 디자인적인 요소들은 그대로 가져가되, 사용성과 경험에 포커싱하여 개인적으로 개선되었으면 좋겠는 포인트들에 대해서만 UX리디자인을 해보려고한다. *읽는 분들이 계시다면, 이 프로젝트는 피그마 연습겸 개인 프로젝트를 진행하기 위한 주관적인 리디자인 프로젝트이며, 마켓컬리가 이렇게 개선되야한다는 주장을 펼치는 것은 아닌 점 참고해주세요 :-) 나는 마켓컬..

archive/learn 2021.07.23

[Figma] 피그마 기초 : Auto Layout (오토 레이아웃) 정복! 예제로 연습해보기

UX분야에 입문을하며, 입문자가 사용하기에 가장 장벽이 낮은 피그마를 기초부터 차근차근 배우고 있는데요! 피그마가 사용하는 것 자체는 쉽게 느껴지는데, 은근 효율적으로 프로토타이핑 작업을 하기 위해 쓰이는 꿀팁, 활용법 등을 배우는게 어려워요. 어떤 하나의 기능을 배우기 위해 유튜브, 인프런 등 여러 튜토리얼들을 찾아봐야하고, 강의하는 분들 저마다 포커스하는 내용이 조금씩 달라서 고급 기능 하나 익히는데 생각보다 어렵네요 ㅠ-ㅠ.. 오늘 공유하는 내용은 Auto Layout 기능이에요. 오토레이아웃 기능이 쓰이는 상황은 매우 다양해서, 다양한 예시를 많이 연습해보면 금방 익숙해질 수 있을 것 같아요! 좋아하는 일러스트레이터이자 디자이너인 파블로 스탠리의 튜토리얼 영상을 참고해서 배웠는데, 그 어떤 피그마..

archive/learn 2021.07.10

[UX/UI] Daily UI : 002

002. 신용카드 결제 화면 두번째 UI 챌린지는 신용카드 결제 (Check Out) 화면이다. 아직 툴 다루는 것도 익숙치 않아 스스로 디자인하는 것이 조금 어려워서 피그마에 익숙해질겸 기존 서비스의 화면을캡처 해서 목업을 똑같이 만들어보는 연습도 좋은 것 같다. 직접 앱을 다운 받아 화면 캡처하는 것도 괜찮지만 mobbin이나 wwit에서 원하는 화면을 쉽게 찾아볼 수 있다. 더보기 (혹시 mobbin.design을 모르시는 분들을 위해) https://mobbin.design 은 해외 유명 서비스들의 어플 전체 화면을 쉽게 찾아볼 수 있는 사이트다. 국내에도 거의 동일한 서비스가 있는 것도 오늘 처음 알았다. https://wwit.design UX/UI 디자이너나 프로덕트 디자이너, PM같은 분들..

archive/learn 2021.06.16

[UX/UI] Daily UI : 001

Sign Up 화면 디자인하기 Create a sign up page, modal, form, or app screen related to signing up for something. It could be for a volunteer event, contest registration, a giveaway, or anything you can image. www.DailyUi.co Daily UI Design Challenge, Inspiration, and Resources Daily UI design challenge. Become a better designer in 100 days. www.dailyui.co 필라테스나 요가 수업 같은 경우 단체 수업이어도 한 타임당 정원이 정해져있어 미리 예약하..

archive/learn 2021.06.14

[UX디자인] 넷플릭스에서 UX 디자인 하는 방법

UX로 커리어 전환이 요즘 내 관심사여서 그런지 유튜브를 보면 전혀 관련 없는 일을 하다가 UX 분야로 커리어 전환을 하는 사람들이 생각보다 많은 것 같아 위안이 된다. UX경험 없이 UX디자이너로 어떻게 취업했는지, UX비전공자가 포트폴리오를 어떻게 만들었는지 등 각자의 커리어 전환 계기와 경험담을 자세히 얘기해주는 영상들을 볼 때마다 나같은 사람들이 많다는 사실에, 혼자가 아니란 생각에 위로를 많이 받는다. 유튜브 만세 ! 저마다 UX를 공부한 방법이 너무 다양해서, 영상을 계속 보다보면 정답이란 게 없는 것 같다. 일단은 어떤 방법으로라든 시작을 하는 것이 중요한 것 같다. UX를 가르키고 있는 온라인 강의 (유료, 무료)도 찾아보면 정말 많아서, 기본기를 배운다는 생각으로 사람들에게 많이 알려져 ..

archive/learn 2021.05.12
728x90
반응형
LIST