본문 바로가기

전체 글74

리뷰 요약부터 취향 추천까지, AI가 바꾸는 쇼핑 경험 (ft. 네이버스토어/다이소/무신사 앱) AI의 발전 속도가 무서울 정도로 빠릅니다.이제는 텍스트나 이미지를 생성하는 ‘생성형 AI’를 넘어, 겉보기에는 무관해 보였던 다양한 산업과 서비스에서도 AI 기술을 적극적으로 활용하는 추세가 보이고 있습니다.그렇다면 우리 일상에서 자주 사용하는 쇼핑몰 앱은 어떨까요?아직은 AI를 적극적으로 활용하는 곳이 많지는 않지만, 명시적으로 ‘AI’를 사용하고 있음을 보여주는 세 곳이 있어 자세히 살펴보도록 하겠습니다. 목차1. 네이버스토어 - 리뷰 요약 키워드2. 다이소 - 다른 유저의 구매 행동 요약3. 무신사 - 유사한 스타일 x 나의 취향을 고려한 상품 추천 1. 네이버스토어(N+스토어) : 리뷰 요약 키워드네이버 스토어 앱에는 리뷰 상단에 ‘AI 리뷰 요약’ 기능이 새롭게 도입되었습니다. 이 기능은 사용.. 2025. 7. 31.
피그마(Figma) AI 기능 : 이미지 제작/수정/배경 제거까지 손쉽게 피그마(Figma)가 AI 기능을 출시했는데요 (뒷북) Figma를 실행한 뒤 작업 화면 하단의 도구 모음에서 별 모양 아이콘을 클릭하면 새로운 AI 기능들을 한눈에 확인할 수 있습니다.기존 AI툴과 차별화된 점은 디자인 도중에 자연스럽게 AI 기능을 사용할 수 있다는 것인데요, 이번 글에서는 그중에서도 특히 이미지 생성, 수정, 배경 제거 기능에 집중해 각각 어떤 기능인지 자세히 소개해볼게요. 1. 텍스트로 이미지 생성하기Figma의 AI 기능 중 하나는 텍스트 프롬프트만으로 이미지를 만들어주는 기능입니다. 사용 방법은 간단합니다.텍스트로 원하는 이미지를 설명 → Make it 버튼 선택잠시 기다리면 AI 이미지가 자동으로 생성 됩니다.이 기능은 GPT 기반 이미지 생성 모델(DALL·E) 을 활용하고.. 2025. 7. 29.
[UX레퍼런스] 현대카드 홈화면 : 탐색 경험에 집중한 피드형 UI 카드사 앱 중 가장 트렌디하고 차별화된 UI/UX를 보여주는 현대카드.오늘은 현대카드 앱의 홈화면 UX를 분석하고, 현대카드가 어떤 고객 경험을 추구하고 있는지 살펴보려고 합니다.먼저 큰 틀에서 홈화면이 어떻게 구성되어 있는지 먼저 분석해 보겠습니다. 홈화면 구성1. 앱바(App Bar)상단에는 앱의 대표 메뉴와 알림 아이콘이 고정되어 있습니다.알림, 혜택, 금융, 자산, 앱카드 등 주요 메뉴로 바로 이동할 수 있게 되어 있어 상위 구조로의 접근성을 높여줍니다.고정된 앱바를 통해 사용자는 스크롤 상태와 관계없이 주요 기능에 빠르게 접근할 수 있습니다. 2. 퀵메뉴(Quick Menu)앱바 아래에는 자주 쓰이는 기능들을 원형 아이콘으로 제공하고 있습니다.예: 민생소비쿠폰, 보유 바우처, 브랜드 혜택 등사용.. 2025. 7. 25.
Hero UI Chat : 생성형 AI와 대화로 웹사이트 뚝딱 만들기 요즘 기획자들 사이에서 ‘Vibe 코딩’이 유행하고 있어요.정확한 명세나 코드를 몰라도, AI에게 자연어로 “이런 기능, 웹페이지 만들어줘”라고 말하면 코드로 구현해주는 방식을 말하죠. 예를 들어,“고양이 카드 뽑기 페이지 만들거야. 뽑기 버튼 누르면 귀여운 고양이랑 명언 보여줘!”이렇게만 말해도, AI가 그걸 알아듣고 실제 웹페이지를 만들어주는 시대가 온 거예요.이처럼 기획자의 아이디어(감성+취향+방향성)만 있으면 웹이 구현되는 새로운 코딩 방식이 바로 ‘Vibe 코딩’이고, 그 대표적인 도구 중 하나가 Hero UI입니다.이번에 Hero UI를 직접 사용하여, ‘랜덤 고양이 카드 생성기’ 웹페이지를 만들어봤는데요, 놀랍게도 제작 요청-수정-웹배포까지 5분도 안 걸렸고, 복잡한 코드 작성은 1도 필.. 2025. 5. 22.
예쁘면 더 잘 쓴다? Aesthetic-Usability Effect로 보는 UX 디자인 법칙 사용성이 부족해도 계속 쓰는 앱이 있다?어떤 앱은 조금 불편해도 자꾸 쓰게 되고, 어떤 앱은 기능이 좋아 보여도 이상하게 손이 안 가는 경우가 있죠.그 이유는 '디자인이 주는 첫인상'이 사용성에 대한 인식까지 바꿔버릴 수 있기 때문입니다.UX 심리학에서는 이를 Aesthetic-Usability Effect라고 부릅니다.Aesthetic-Usability Effect란?이 효과는 1995년, 일본 히타치 디자인 센터(Hitachi Design Center)에서 진행한 연구에서 비롯됐어요.연구진은 ATM 사용자 인터페이스(UI)의 26가지 버전을 만들고, 252명의 참가자에게 각 디자인이 얼마나 사용하기 쉬운지(사용성)와 얼마나 보기 좋은지(심미성)를 평가해달라고 요청했어요.그 결과, UI가 실제로 얼마나.. 2025. 5. 20.
챗지피티 : 손으로 그린 스케치를 실사 이미지로 바꾸기 멈출 줄 모르는 챗GPT 이미지 생성 기능의 열풍,이번에는 내가 손으로 직접 그린 스케치를 실제 사진같은 이미지로 바꾸는 방법을 알아보겠습니다.이 방법을 이용하면 only 텍스트로 이미지를 생성하는 것보다, 내 의도에 더욱 가까운 결과물을 만들 수 있어요.그 방법을 지금부터 함께 알아봅시다.목차1. 프롬프트 작성하기 - 기본정보 - 추가정보2. 이미지 생성하기 - 선 스케치로 - 채색 스케치로 - CC0 스케치 활용 1. 프롬프트 작성하기프롬프트는 기본적인 것과, 디테일을 가미한 추가 정보로 나누어 입력할 수 있어요. ✅ 기본 정보무엇을 그린 것인지에 대한 설명 (대략적인 구도, 소재의 위치 등)ex. 소녀가 공원 벤치에 앉아 책을 읽고 있음"이 스케치를 실사 이미지로 바꿔줘"라는 요.. 2025. 5. 8.
UX 화면설계서 템플릿의 구성 및 작성 요령 (기본정보, 와이어프레임, 설명) 앱이나 웹 서비스를 만들 때, 기획자의 머릿속에 있는 아이디어를 디자이너, 개발자 등 실무자들이 똑같이 구현하기란 쉽지 않습니다.이럴 때 필요한 것이 바로 UX 화면설계서인데요. 기획 의도를 명확하게 정리하고, 디자이너·개발자·QA 등과 원활하게 소통하기 위해 꼭 필요한 핵심 문서입니다.이번 글에서는 기획자의 의도를 실제로 구현하기 위한 화면설계서를 어떻게 만들면 좋을지 그 구조와 작성 요령을 함께 알아보겠습니다. 화면설계서의 개념화면설계서는 앱/웹 서비스의 각 화면이 어떻게 구성되어야 하는지 문서화한 자료로, 기획자가 의도한 기능과 흐름을 명확하게 전달하기 위한 산출물입니다.보통 와이어프레임과 함께 조건, 기능, 정책 설명이 포함되어 있어 유관 부서와의 커뮤니케이션에 기준점을 제공해 줍니다. 역할PM,.. 2025. 4. 23.
[UX스터디] 만보기 UI는 어떻게 만들까? (ft. 토스/카카오) 걷기만 해도 포인트를 주는 고마운 만보기!요즘엔 토스나 카카오 같은 앱에서도 만보기 기능이 기본이죠. 매일 아무 생각 없이 사용하는 기능이지만, 그 안에도 나름의 구조와 기획 의도가 숨어 있다는 사실을 아시나요?오늘은 만보기 UI가 어떻게 만들어지는지 샅샅이 파헤쳐 보겠습니다.목차1. 만보기 서비스를 제공하는 이유2. 만보기를 이루는 정보 : 기본/부가/통계 정보3. 광고 연계만보기 서비스를 제공하는 이유토스, 카카오 같은 대형 플랫폼 기업들은 왜 수익도 나지 않는, 오히려 고객에게 돈을 줘야 하는 만보기 서비스를 제공할까요?표면적으로는 기업이 손해를 보는 것처럼 보이지만, 사실은 꽤 야심찬 전략이 숨어있습니다.만보기를 제공하면 사용자가 매일 우리 앱을 사용해야 할 이유가 생깁니다. 저만해도 거의 매일 .. 2025. 4. 15.
[UX 스터디] 계좌번호 복사-붙여넣기 UI with 토스/카카오뱅크 계좌이체할 때, 계좌번호를 다 외우시는 편인가요?저는 매번 못 외워서 복사+붙여넣기 기능을 사용하곤 합니다.그런데 이렇게 자주 쓰는 ‘계좌번호 복사 + 붙여넣기’ 기능의 UI가 어떻게 구성되어 있는지는 한 번도 주의 깊게 본 적이 없더라구요. 그래서 이번 글에서는 이 기능이 실제로 어떤 흐름과 구조로 이루어져 있는지 자세히 살펴보려고 합니다.[복사]와 [붙여넣기] 두 가지 부분으로 나누어 살펴볼게요. 1. 복사주로 계좌번호를 공유할 때 사용하는 카카오톡의 복사 기능을 살펴봤습니다.계좌번호가 적힌 말풍선을 꾸욱 눌렀을 때 : 여러 부가 기능이 나타남 → 복사 or 선택 복사계좌번호 숫자를 눌렀을 때 → 바텀시트가 나타남 → 복사 위의 두 가지 방법으로 계좌 번호를 복사할 수 있었습니다.다양한 부가기능이 함.. 2025. 4. 14.
[UX 스터디] 텍스트 입력 필드에서 에러 메시지 표시하기 안녕하세요, 여러분!오늘은 텍스트 필드에 입력한 값의 유효성 검증 시점과 그 결과에 따라 어떤 피드백을 줄 것인지 자세히 살펴보는 시간을 갖겠습니다. 텍스트 필드란?텍스트 필드는 사용자가 이름, 이메일, 주소 등 텍스트 정보를 입력할 수 있도록 하는 기본적인 UI 요소입니다. 일반적으로 입력 전, 입력 중, 입력 후의 상태를 갖고 있으며, 각 상태에 따라 시각적 표현이 달라집니다.유효성 검증이란?입력 필드 유효성 검증은 사용자가 입력한 값이 규칙에 맞는지 확인하는 기능입니다. 유효성 검사를 통해 잘못된 데이터를 입력하지 못하게 하고, 오류가 발생하면 사용자에게 알려줄 수 있습니다. 텍스트 필드의 상태 정의먼저 텍스트 입력 필드의 상태에 대한 정의부터 해보겠습니다.1. Enabled (Default) : .. 2025. 4. 10.
[AI탐방] 챗GPT로 이미지를 폴라로이드 & TV & 액자 속에 넣기 챗GPT로 지브리풍 이미지를 만드는 것이 화제입니다. 저작권 논란 속에서도 대중에게 지피티의 존재감을 확실하게 각인시킨 전환점이 되기도 했습니다. 이 기세를 이어(?) 챗GPT를 활용하여 이미지를 변환할 수 있는 방법을 세 가지 소개드리고자 합니다.1. 폴라로이드 사진으로 만들기먼저 휴대폰으로 찍은 사진을 폴라로이드 사진처럼 바꿔보겠습니다.바꾸고싶은 사진을 같이 첨부하면서 아래와 같은 프롬프트를 작성해 보세요.프롬프트 결과 그럼 이렇게 폴라로이드 필름 속으로 쏙 들어간 사진을 보실 수 있습니다.원본 이미지와 살짝 차이가 나지만 오히려 더 매끄럽게, 깔끔하게 사진이 가공된 것을 보실 수 있습니다.2. 티비 속에 넣기다음으로는 사진을 TV 브라운관 속으로 넣어보겠습니다.마찬가지로 사진을 준비해주시고, 프롬프.. 2025. 4. 9.
[Figma] 피그마 오토 레이아웃(Auto Layout) 기능으로 버튼 디자인하기 오늘은 피그마의 대표 기능 중 하나인, Auto Layout을 활용하여 버튼을 만들어 보겠습니다.Auto Layout이란?Auto Layout은 요소들 사이의 간격, 정렬, 크기 조절 등을 자동으로 설정해주는 피그마의 기능입니다. 텍스트 길이가 바뀌어도 여백이 유지되고, 여러 요소를 묶어 정렬하거나 간격을 조절할 때 매우 유용합니다. 반복되는 UI 컴포넌트를 만들 때 시간을 절약하고 일관성을 유지할 수 있는 핵심 기능입니다. 기본 : 버튼 만들기아래와 같은 순서로 차근차근 따라하시면 30초 안에 버튼을 만들 수 있습니다.1. 텍스트 작성하기 [T] 버튼을 눌러 버튼명이 될 텍스트를 작성해 줍니다.2. 텍스트를 그룹으로 만들기[Group selection] 또는 [ctrl/command + G]를 눌러 방.. 2025. 4. 8.
[UX 스터디] 다양한 방식을 고려한 로그인 UI를 만들어보자 (소셜/계정/이메일) 로그인 화면은 우리 서비스가 사용자와 처음 만나는 관문입니다.이 단순한 화면이 서비스의 첫인상을 결정하고, 나아가 사용자와의 관계를 좌우하죠.로그인이 복잡하면 사용자는 불편함을 느끼고, 첫 만남에서부터 부정적인 인상을 받을 수 있습니다.반대로, 로그인이 지나치게 간편하면 보안에 대한 신뢰가 흔들릴 수도 있습니다.그렇다면, “안전하면서도 쉽고 간편한 로그인 경험”을 제공하려면 어떻게 해야 할까요?오늘은 로그인 화면을 구성하는 주요 요소와 레퍼런스를 살펴보고, 로그인 UI를 재구성해보겠습니다.🔐 로그인 화면의 구성 요소로그인 화면은 다음과 같은 세부 요소들로 구성되어 있습니다. 로그인 방식 ID(휴대폰번호/이메일)/PW 제공 시 → 입력 필드 소셜 로그인 제공 시 → 아이콘이 표기된 버튼.. 2025. 2. 18.
정보 구조 (IA : Information Architecture) 설계 방법 (초간단 ver) 좋은 사용자 경험을 만드는 성공의 열쇠는 정보 구조와 플로우에 있습니다.  정보 구조(Information Architecture)란?제품/서비스에 담고 있는 정보의 전체적인 구성을 의미합니다.주요 메뉴에는 무엇이 있고, 각 메뉴에서 접근 가능한 페이지는 무엇이며, 각 페이지와 연결되는 페이지는 무엇인지 등을 총망라하죠.건물을 설계할 때 몇층으로 지을지, 기둥을 어디에 세우고, 방을 몇개로 나눌지 결정하는 것과 같습니다.  플로우(Flow)란?정보 구조 속에서 사용자가 어떻게 이동하는지를 나타냅니다.다시 한번 건물을 예로 들면, 우리가 “현관문을 열고 들어와 신발을 벗고, 부엌에 열쇠를 내려놓고, 옷방으로 들어가 외투를 벗고, 거실로 나와 소파에 앉는 것”처럼 어떤 순서로, 어디에서, 어떤 기능을 사용하.. 2025. 2. 6.
[AI탐방] 블로그 내용에 맞게 일러스트 만들어주는 챗GPT 여러분은 블로그 포스팅할 때 필요한 이미지를 어떻게 찾으시나요?일상 포스팅이라면 직접 찍은 사진을 사용할 수 있겠지만, 전문적이고 기술적인 내용의 글을 쓸 때는 마땅한 이미지를 찾기 어려울 때가 많습니다.제 블로그를 보시면, 이렇게 글마다 깔끔한 일러스트를 사용하고 있습니다. 그런데, 이런 이미지를 누구나 3초만에 만들 수 있다면 믿으시겠습니까? 어떻게? GPT앱으로요! 아래는 제가 만든 블로그용 일러스트 생성 GPT입니다.이 GPT앱을 통해 누구나 자신의 블로그 내용에 맞는 일러스트를 다양한 스타일로 알잘딱깔센 생성할 수 있습니다. ChatGPT - Blog Content IllustratorAnalyzes blogs and creates themed illustrations in various st.. 2025. 1. 13.
제품 성과 판단 기준이 되는 지표엔 무엇이 있을까? 열심히 기획하고 개발한 우리의 제품, 과연 고객에게 제대로 전달되고 있을까? 우리가 세상에 내놓은 제품(Product)이 과연 고객에게 제대로 전달되고 있는지, 이대로도 괜찮은 건지 궁금하지 않으신가요?이 궁금증을 해결하기 위해, 오늘은 제품 성과를 판단하는데 사용되는 다양한 지표들을 정리해보도록 하겠습니다. 🚀 1️⃣ 사용자가 만족하고 있는가?첫 번째로 살펴볼 지표는 사용자 만족도입니다.이는 앱 리뷰와 같은 고객 피드백을 모니터링하거나 설문 조사 등을 통해 측정할 수 있습니다.긍정적인 피드백 비율이 높을수록 성공적이라고 볼 수 있겠죠? 📊 측정 지표NPS (Net Promoter Score): 사용자가 제품을 다른 사람에게 추천할 의향을 0~10점 척도로 측정CSAT (Customer Satisfa.. 2025. 1. 7.
글로벌 명상 앱 '헤드스페이스'의 UX 특징을 알아보자 세계 최고 부자 빌 게이츠가 사용하는 명상 앱으로 유명해진 헤드스페이스, 저도 유료 버전을 구독하며 애용하고 있습니다. 이 앱을 사용하다 보니 일반적인 앱들과는 색다른 경험을 제공하고 있다는 것을 느꼈어요.그래서 오늘은 ‘몸과 마음의 평안’을 목표로 하는 앱의 UX에는 어떤 다른 점이 있을까 살펴보는 시간을 마련했습니다.헤드스페이스란?정신 건강, 마음챙김, 명상 가이드로서, 전문가가 지도하는 명상, 정신 건강 코칭, 마음챙김 운동 등의 콘텐츠를 제공합니다.이러한 명상 세션과 호흡 가이드를 통해 스트레스를 줄이고, 숙면을 돕고, 정신 건강을 개선하는 데 도움을 주는 서비스입니다.※ 설치 링크 : 구글 / 애플 정보 구조화면을 살펴보기에 앞서, 헤드스페이스 앱의 정보가 어떤 구조를 이루고 있는지 살펴보겠습니.. 2025. 1. 1.
[UX 스터디] 모바일앱 '페이지'와 '팝업' 차이점이 뭘까? 모바일앱의 기본 요소인 “페이지”와 “팝업”그 차이점이 무엇인지, 언제 어떻게 사용해야 하는지 알고 계신가요?오늘은 이 두가지의 아리송한 개념을 파헤쳐 보겠습니다. 페이지란? 쉽게 말해 ‘바탕 화면’이라고 보시면 됩니다. 콘텐츠들을 모아서 보여주는 바탕이 되는 것이죠.모바일앱의 아주 기본적인 단위로서 독립적인 콘텐츠와 작업 영역을 제공합니다.주요 플로우에서 사용: 가입, 구매, 등록 등 여러 단계를 포함한 주요 기능을 페이지로 제공하는 것이 일반적입니다.내비게이션 : 페이지 상단 헤더에 타이틀과 ‘뒤로가기’ 버튼을 제공하여, 사용자가 현재 위치를 인식하고 다른 화면으로 돌아갈 수 있는 명확한 네비게이션을 제공합니다. 여러 단계가 있는 페이지인 경우 ‘다음’으로 이동할 수 있는 버튼이 하단에 배치되기도 합.. 2024. 12. 5.
728x90
반응형

티스토리툴바