티스토리

힝구쓰터디(UI/UX)

검색하기

블로그 홈

힝구쓰터디(UI/UX)

hihx.tistory.com/m

UI/UX디자인 - 스터디/아티클/리뷰

구독자: 1

방명록 방문하기

728x90

SMALL

주요 글 목록

[UX/UI 3기 내배캠] 10주차 웹 개발 기초 강의 2(제이쿼리 활용) ✴️ 자바스크립트 문법 연습 1자바스크립트 활용해보기(변수형 / 리스트형 / 딕셔너리) 자바스크립트 문법 연습하기! 1. 함수 결과 확인하기! 2. 리스트 3. 딕셔너리 4. 리스트 딕셔너리 ✴️ 자바스크립트 문법 연습 2자바스크립트 활용해보기(과일 리스트에서 모두 지우고 원하는 번호의 과일을 붙이는 방법) 자바스크립트 문법 연습하기! 1. 함수 결과 확인하기! 2. 붙이기 .. 공감수 0 댓글수 1 2024. 4. 25.
[UX/UI 3기 내배캠] 10주차 웹 개발 기초 강의 2(자바스크립트 활용) ✴️ 스파르타플릭스 만들어보기 자바스크립트 활용해보기(변수형 / 리스트형 / 딕셔너리 / 조건문 / 반복문) 스파르타플릭스 @import url('https://fonts.googleapis.com/css2?family=Hahmlet:wght@300&display=swap'); * { font-family: 'Hahmlet', serif; } /* 구글 폰트 가져오기 : 별은 모든태그를 해당함 */ .main { color: white; /* 이미지를 넣을 때 자주 사용하는 3가지 */ .. 공감수 0 댓글수 0 2024. 4. 24.
[UX/UI 3기 내배캠] 10주차 웹 개발 기초 강의 1 ✴️ 로그인 페이지 뼈대 만들어보기 - 1 Document .mytitle { color: red; font-size: 40px; } .mybtn { font-size: 12px; color: white; background-color: green; } .mytxt { color: red; } 로그인 페이지 ID: PW: 로그인하기 ✴️ 이미지 배경이 들어간 로그인 페이지 만들어보기 - 2구글폰트를 .. 공감수 0 댓글수 0 2024. 4. 24.
[UX/UI]2024.04.19(금) WIL 주간 스터디 회고 WIL(Weekly I learned) 이번 주 경험한 모든 일 1. UX 기반 팀 프로젝트 - 이번 팀원들과 함께하는 프로젝트가 시작되었다. 나름 잘 진행되는 것 같아서 다행스럽다. 프로젝트가 디자인보다는 기획, 분석을 위주로 솔루션의 근거를 제시하는 부분이 큰데 작업하는 과정들이 재밌었다. 특히 왜 이렇게 하면 좋은지, 왜 이렇게 나온건지, 왜 이런게 많은지 등등 꼬리에 꼬리를 무는 질문을 진짜 많이 날린것 같다. ㅎ.ㅎㅎㅎㅎㅎ아마 팀원들이 엄청 싫어했을 것 같다 ㅋㅋㅋㅋㅋ 2. 다이제 팀 프로젝트 개선 - 너무너무 바빠서 진행을 보류했다. 다음주부터는 빡시게 진행해야지! 이번 주 아쉬웠던 점 / 깨달은 점 / 나의 감정 - 아쉬웠던 점 : 없음 - 깨달은 점 : 근거를 찾는 과정이나 문제를 정의하는.. 공감수 0 댓글수 0 2024. 4. 19.
[UX/UI] 8주차 수준별 학습(챌린지반) 1주차 과제 ✅ 실현 가능한 목표 설정 및 직업적 성향 탐색 이름 : 이희수 백그라운드 : 시각디자인 / 웹 기획 및 디자이너 내배캠에서 흥미로웠던 과제 : UI 분석 기반 클론디자인, 서비스 선정 후 서비스에 대한 분석과 페르소나 정의 등 문제를 도출하고 완벽한 검증은 아니지만 그것을 개선하는 과정 자체가 재밌었다. 가장 도전적이었던 작업과 해결 과정 : 팀소개페이지 만들기, 처음이라 눈에 뵈는거 없이 이것저것 유튜브 및 인터넷을 보며 도전했던 기억이 있다. 특히 프로토타입에서 하고 싶은 기능을 하기 위해 엄청난 서치와 연습이 필요했고 완벽하지는 않지만 어느정도 구현하고 심화과정을 거쳐보며 내 것으로 만들었다. 상대적으로 쉽게 느껴졌던 작업과 그 이유 : 클론디자인, 피그마에서 작업은 처음이지만 자주 해봤던 작업이.. 공감수 0 댓글수 0 2024. 4. 13.
[UX/UI]2024.04.12(금) WIL 주간 스터디 회고 WIL(Weekly I learned) 이번 주 경험한 모든 일 1. UX 강의 - 갑자기 과제도 숙제도 강의도 등등등 휘몰아치는 느낌이 든다. 너무 바빠졌다. 강의를 제때 듣지 못했고 주말에라도 듣자는 나와의 약속이 깨지면서 일정에 문제가 생겼다.. 2. 다이제 팀 프로젝트 개선 - 개선 프로젝트를 실행시키고 2번째 페르소나를 다시 정의해보려고 한다. 다들 너무너무 정신이 없어서 이번주말까지 페르소나를 각자 3개를 만들어보고 월요일에 만나기로 했다! 다이제 팀으로도 개선프로젝트를 진행하고 최종팀으로도 최종 프로젝트를 진행하게 되서 신기하고 너무 좋다 3. 개인 과제 진행 - 인터뷰를 진행하고 결과를 정리해 인사이트를 도출했다. 아직 할일이 태산이지만 주말에도 열심히 작업해야겠다. 4. 수준별 학습 진.. 공감수 1 댓글수 1 2024. 4. 12.
[UX/UI] UX 기획 및 리서치 5주차 강의 요약 - 사용성 테스트, 휴리스틱평가 2 2024.04.11 - [UXUI 스터디・강의・기록] - [UX/UI] UX 기획 및 리서치 5주차 강의 요약 - 사용성 테스트 1 [UX/UI] UX 기획 및 리서치 5주차 강의 요약 - 사용성 테스트 1 1. 사용성 테스트의 개념과 중요성 1) 사용성 테스트의 개념 사용성 테스트(Usability Test; UT)는 프로토타입이 있다면 제품 개발 단계 중 언제든 활용할 수 있음 유저가 제품이나 서비스를 실제 사용 hihx.tistory.com 4. 사용성 테스트 결과 정리 1) 사용성 테스트 결과 정리하기 문제점 도출 → 원인 도출 → 개선 방향 도출을 통해 결과를 정리 문제점 도출 참가자의 생각과 행동에 대한 기록을 종합하여 문제점을 파악. 진행자와 관찰자의 기록을 종합하여 문제점을 파악. 원인 도.. 공감수 0 댓글수 1 2024. 4. 11.
[UX/UI] UX 기획 및 리서치 5주차 강의 요약 - 사용성 테스트 1 1. 사용성 테스트의 개념과 중요성 1) 사용성 테스트의 개념 사용성 테스트(Usability Test; UT)는 프로토타입이 있다면 제품 개발 단계 중 언제든 활용할 수 있음 유저가 제품이나 서비스를 실제 사용할 때 의도한 시나리오에 따라 테스크를 수행하는 지, 문제점은 없는지 관찰하기 위해 진행. 유저가 제품이나 서비스를 사용할 때 어떤 생각을 가지고 어떤 혼란을 겪는지 파악. 제품 개선 전에 진행하면 유저가 불편하게 생각하는 부분, 제품 개선 후에 진행하면 유저가 실제 어떻게 사용하는지를 파악 2) 사용성 테스트의 중요성 사용성 테스트를 하는 이유는 우리가 사용자가 아니기 때문, 프로젝트에 대해 너무 많이 알기 때문에 편향을 가지고 있음. 유저가 화면을 직접 조작하면서 마주치는 문제를 식별할 수 있.. 공감수 0 댓글수 0 2024. 4. 11.
[UX/UI] UX 기획 및 리서치 5주차 숙제 - 사용성 테스트 시나리오 작성하기 커머스 서비스 회원가입 과정에서 "신규 가입 유저가 로그인/회원가입을 할 때 겪는 문제점을 찾아내고자 함." 참여자는 주 2회 이상 커머스 서비스를 사용하지만, 자사 서비스를 사용해본 경험은 없는 유저 공감수 0 댓글수 0 2024. 4. 9.
[UX/UI] UX 기획 및 리서치 4주차 숙제 - 고객 여정 지도 그려보기(카카오선물하기) 카카오톡 선물하기 서비스를 통해 친구에게 생일 선물을 보내는 30대 직장인 유저의 고객 여정 지도 그려보기 [유저 페르소나] - 주요 인적 사항 : 스타트업 데이터 분석가 (32세) - 니즈 : 추천 상품을 구매하고 싶은 니즈가 있어요. - 페인 포인트 : 복잡하게 이것저것 찾아보는 걸 귀찮아해요. - 기술 친숙도 : 주 2회 이상 커머스를 잘 활용해요. - 관심있는 브랜드 : 무신사, 하이버 [유저 시나리오] - 유저 : 30대 직장인 유저 - 목표 : 카카오톡 선물하기 서비스를 통해 친구에게 생일 선물을 보내려고 해요. - 동기 : 추천 상품 중 인기가 많은 5만원 이상 가격대에 있는 선물 중에 골라서 성의 있는 선물을 전하고 싶어졌어요. - 외부 요소 : 야근을 하느라 단톡방을 보지 못해서 친구가 .. 공감수 0 댓글수 0 2024. 4. 9.
[UX/UI] UX 기획 및 리서치 4주차 강의 요약 - 2 3. UX 기획 구체화 : 논리적인 흐름 설계 1) 유저 플로우 (User Flow) 유저가 제품이나 서비스를 이용하는 과정을 유저의 행동 및 화면 간의 이동에 초점을 맞추어 시각화하는 단계 * 해피 패스(Happy Path)란? : 유저가 제품이나 서비스에서 원하는 목적지까지 아무런 문제를 겪지 않고 도달했을 때의 경로 유저가 최종 목표에 도달하기 위해 서비스 내에서 어떤 경로로 이동하며, 어떤 행동을 하는지 구체화하는 도구로 활용할 수 있음. ‘해피 패스’에 매몰되지 않고 다양한 경로를 고려해볼 수 있다는 장점이 있음 유저 플로우와 와이어프레임은 상호보완적인 도구로 활용할 수 있으며, 작업에 정해진 순서가 있는 것은 아님. 유저 플로우 구성 요소 원형 : 시작/끝 → 프로세스의 시작이나 끝을 표현하기.. 공감수 0 댓글수 0 2024. 4. 8.
[UX/UI] UX 기획 및 리서치 4주차 강의 요약 - 1 1. UX 기획 첫 단추 : 문제 정의 및 가설 수립 1) 문제 정의 유저 리서치를 통해 도출한 제품의 현재 문제점을 특정하는 단계 해결해야 할 문제가 무엇인지를 정의 문제의 크기를 정량화된 수치로 파악 왜 문제로 정의했는지 충분한 근거가 있어야 함. 문제 발생 원인에 대한 근거 데이터를 파악 ✅ 문제 정의 예시 → 회원가입 화면에서의 문제 정의 과정 🔍 문제 - 유저의 40%가 회원가입을 완료하지 않고 중도에 이탈하는 문제가 있어요. 🔍 문제로 정의한 이유 (유저 경험 관점과 비즈니스 관점을 함께 생각해보는 것을 추천) 1) 유저 경험 관점 - 회원가입은 제품의 초기 진입점 중 하나로, 유저가 제품을 처음 경험하는 단계. 여기에서 유저가 얼마나 수월하게 진입하느냐가 전반적인 유저 경험에 큰 영향을 미칠.. 공감수 0 댓글수 0 2024. 4. 8.
[UX/UI] UX 기획 및 리서치 3주차 숙제 (페르소나 정의 : 런드리고) ✳️ 서비스를 선정하여 유저 페르소나를 작성해보기 서비스 선정 → 런드리고 대부분 3~40대 여성 소비자가 많고, 직장인인 경우. 페르소나 정의 (템플릿) 📌 참고 사이트 사용자를 생각한다면 지금 당장 시작해야 할, 페르소나 기법 사용자를 생각한다면 지금 당장 시작해야 할, 페르소나 기법 오늘날 많은 개발자들과 디자이너들은 첨단 기술과 트렌디한 디자인 기법을 사용하여, 제품과 서비스를 구... blog.naver.com 타겟 유저 정하기 사이드프로젝트 유저 페르소나 :: 타겟 유저 정하기 사이드프로젝트 유저 페르소나 :: 타겟 유저 정하기 👩💻 기록하는 서비스 기획자 writing.pm - 사이드... blog.naver.com 사용자 페르소나가 무엇이고 UX 디자인에서 중요한 이유 사용자 페르소나(pe.. 공감수 0 댓글수 0 2024. 4. 8.
[UX/UI]2024.04.05(금) WIL 주간 스터디 회고 WIL(Weekly I learned) 이번 주 경험한 모든 일 1. UX 강의 - 내가 원하던 리서치, 기획, 분석에 대한 상세 강의가 시작되었다. 깊게 파고들어 제대로 분석해봐야겠다. 2. 다이제 팀 프로젝트 개선 - 같은 조였던 다이제 팀프로젝트를 다시 개선하기로 했다. 다같이 모여서 튜텨님들에게 피드백받고 피드백을 정리하고 개선해 포트폴리오 한 세션에 넣어야겠다! 이번 주 아쉬웠던 점 / 깨달은 점 / 나의 감정 - 아쉬웠던 점 : 중간중간 집중을 하지 못한 점 - 깨달은 점 : 드디어 페르소나 작성방법, 리서치 결과 정리에 대해 알게되었다 - 잘한 점 : 열심히 강의 듣고 필기하고 블로그 올린 점 - 나의 감정 : 뿌듯함 / 설렘 / 재미있음 / 피곤함 다음 주 만들고 싶은 장면 - 완강하기 -.. 공감수 0 댓글수 0 2024. 4. 6.
[UX/UI] UX 기획 및 리서치 3주차 강의 요약 - 2 2. 어피니티 다이어그램 1) 어피니티 다이어그램 이해하기 일본의 인류학자 카와카타 지로가 방대한 데이터 사이에서 의미있는 결론을 이끌어 내기 위해 개발한 사회과학 방법론 데이터를 밑에서부터 점진적으로 그룹핑해서 구조화해나가는 방식 연관성에 따라 그룹핑하고 헤더를 붙이는 과정에서 데이터 사이에 숨어 있던 새로운 의미가 나타남. 어피니티 다이어그램의 장점은 무엇인가요? 방대한 데이터 사이의 규칙과 연관성을 발견하고, 발견한 내용을 토대로 인사이트를 도출할 수 있음. 문제를 전체적으로 시각화하여 조망할 수 있음. 제품의 핵심 문제를 찾고 유저를 정의하는 단계에서 활용. 어피니티 다이어그램, 무엇을 준비해야 하나요? 1. 오프라인에서 준비하기 (방대한 리서치일 경우 내용을 프린트해서 활용하는 것도 추천) 2... 공감수 0 댓글수 0 2024. 4. 5.
[UX/UI] UX 기획 및 리서치 3주차 강의 요약 - 1 1. 리서치 결과 정리 1) 리서치 결과, 어떻게 정리할까? 모든 리서치 결과가 꼭 이 관점으로 정리되어야 하는 것을 의미하는 건 아님 2) 사용 맥락 관점에서 정리 사용 상황, 사용 장소, 사용 시간이 사용자 경험에 미친 영향을 리서치 결과로부터 정리 [사용 상황] 어떤 상황에서 유저들이 제품을 사용했나요? → 예시) 생필품이 떨어지면 커머스 서비스로 주문해요. 모든 제품 사용 경험은 특정 상황과 관련 있음. 사용 상황은 잠재적인 내적 동기로 이어질 수 있음. 유저가 사용 상황을 어떻게 인지하는지가 중요. [사용 장소] 어떤 장소에서 유저들이 제품을 사용했나요? → 예시) 한강 공원에서 나이키 런 클럽을 이용해요. 모든 제품은 장소에 따라 어느 정도 영향을 받. 장소에 대한 유저의 태도가 제품 사용.. 공감수 0 댓글수 0 2024. 4. 5.
[UX/UI]UX 기획 및 리서치 2주차 숙제 - 심층인터뷰 질문지 작성(구인구직 사이트) 심층인터뷰 서비스 선정 → 구인구직 사이트 구직 서비스 사용 취업준비생을 대상으로 문제 파악을 위한 심층인터뷰 질문지 작성 아이스브레이킹 질문 오시는 길은 힘드시지 않았나요? 오늘 날씨가 정말 춥지 않나요/덥지 않나요? 주로 어떤 경로를 통해 구직활동을 하시나요? (ex. 구인구직사이트, 기업사이트, 네이버 검색, 카페 등) 답을 바로 떠올릴 수 있는 질문 보통 언제 구인구직 사이트를 이용하시는 편인가요? 구인구직 사이트는 주 몇 회 정도 이용하시는 편인가요? 구인구직 사이트에서 보통 어떤 기능/콘텐츠를 이용하시나요? 구인구직 사이트는 어떤 기기에서 이용하시고 계신가요? 고민이 필요한 질문 구직활동 시 가장 중요하게 고려하는 요소는 무엇인가요? 구직활동 시 이력서에 어떤 내용을 기입하시나요? 구인구직 사.. 공감수 0 댓글수 0 2024. 4. 5.
[UX/UI] UX 기획 및 리서치 2주차 강의 요약 1. 유저 리서치 유저 리서치란? 비즈니스의 모든 단계에서 이루어질 수 있다. 유저의 행동과 동기를 특정 맥락에서 조사하여 제품 혹은 서비스 개선에 유용한 인사이트를 얻는 활동 유저 리서치의 중요성 : 조직 내의 유저 이해도를 높이고 효율적인 커뮤니케이션을 도움 유저에 대한 이해도 강화 유저의 행동과 동기를 파악할 수 있다. 해결해야 할 새로운 문제를 발견할 수 있다. 효율적인 커뮤니케이션 도구 의사 결정의 근거를 마련할 수 있다. 사전에 문제를 미리 발견하고 수정 비용을 절감할 수 있다. 2. 유저 리서치 종류와 목적 유저 리서치 종류 더불어 비즈니스 관점에서 자사 서비스의 포지셔닝 전략을 수립하기 위한 데스크 리서치로 마켓 리서치, 경쟁사 분석이 주로 이루어짐 유저 리서치 목적 상호보완적이기 때문에 .. 공감수 0 댓글수 0 2024. 4. 4.
[UX/UI] UX 기획 및 리서치 1주차 강의 요약 UX/UI 개념 이해 1) UX (User experience, 사용자 경험) : 유저가 제품이나 서비스와 상호작용하는 과정에서 얻는 모든 경험 - UX는 디지털 뿐만 아니라 오프라인에서의 경험 또한 포괄하는 개념으로, 모든 감각을 활용하는 다양한 경험을 고려 2) UI (User Interface, 사용자 인터페이스) : 유저가 최종적으로 제품이나 서비스를 사용할 때 맞닿는 시각적 구성 요소 UX vs UI UX/UI 디자인 프로세스 ✴️ 더블 다이아몬드 모형 - 문제 정의와 문제 해결에 초점을 둔 디자인 프로세스 모형이에요. 아이디어의 발산과 수렴 과정을 나타내는 4단계로 구성 ✴️ 더블 다이아몬드 모형 - 해결해야 할 문제 찾기 1) 발견(Discover) 단계 무엇이 문제인지를 발견하고 이해하는 .. 공감수 0 댓글수 1 2024. 4. 3.
[UX/UI] UX 기획 및 리서치 1주차 - 데이터 기반 UX 개선 사례 3가지 조사(라프텔, 당근, 토스) 데이터 기반 UX 개선 사례 3가지 조사에 대한 숙제를 하기 위해 다양한 기업의 테크 블로그를 둘러보면서 라프텔, 당근마켓, 토스를 선택하고 진행했다. 테크 블로그를 찾아보면서 좋은 링크를 발견했다. → 기술 블로그 모음 기술 블로그 모음 - TechBlogPosts IT 기술 블로그들의 최신 포스트를 한곳에서 보세요. techblogposts.com 데이터 기반 UX 개선 사례 조사 템플릿으로는 "문제 정의 - 가설 수립 - 해결 방법 - 검증 과정 - 결과"로 나타난다. - 문제 정의 : 문제를 어떻게 발견했고, 원인은 무엇이었나요? - 가설 수립 : 어떤 가설을 세웠나요? - 해결 방법 : 문제를 어떻게 해결했나요? - 검증 과정 : 가설을 검증하기 위해 어떤 방법을 활용했고, 어떤 지표를 모니터링.. 공감수 0 댓글수 0 2024. 4. 3.
[UX/UI] UX 기획 및 리서치 1주차 강의 공감수 0 댓글수 0 2024. 4. 2.
[UX/UI]2024.03.29(금) WIL 주간 스터디 회고 WIL(Weekly I learned) 이번 주 경험한 모든 일 1. 팀 프로젝트 발제/진행 - 분위기도 사람도 너무 좋은 팀원들과 함께 프로젝트를 진행했고 앱선정부터 삐그덕 거림 하나 없이 서로의 의견도 잘 듣고 이야기를 하는 부분에 행복하고 편하게 작업할 수 있었다. - 페르소나 설정에 제일 어려움을 느꼈다. 뭔가 내가 경험하지 않은 것에 대한 어려움이라고 할까? 어떠한 상황, 사용자의 성격, 행동을 상상하며 가상의 내용으로 설정하는 것 자체가 너무 어려운데 우리 팀원들은 진짜 뚝딱뚝딱 작성하는 것을 보고 너무 신기했다. 한 분은 극 N에 해당한다며 상황 시나리오를 거의 드라마 대본처럼 쓰는 것을 보고 감탄했었던 기억이 있다. 이번 주 아쉬웠던 점 / 깨달은 점 / 나의 감정 - 아쉬웠던 점 : 분석.. 공감수 0 댓글수 1 2024. 3. 29.
[UX/UI]2024.03.08 WIL 주간 스터디 회고 WIL(Weekly I learned) 이번 주 경험한 모든 일 팀 편성 또 새로운 팀이 생성되었다. 하루이틀만에 잘 맞을 것 같은 느낌이 들었고 편하게 이야기도 하고 유튜브 광고때문에 음악을 듣기 힘들다고 했더니 직접 음악방송까지 열어주셔서 너무 좋았다. 팀 아티클 스터디 진행 이번 팀에서도 아티클 스터디를 진행했는데 팀마다 분위기도 다르고 하는 방법도 달라서 너무 신기하고 재밌었다. 개인 프로젝트 과제 조금 더 난이도가 들어간 두번째 개인 과제가 시작되었다. 처음에는 뭣도 모르고 하다보니 쉬운 느낌이였는데 강의를 듣고 이론을 알게되니 쉬운 작업이 아니였구나 하는 생각이 들었다. 기본과 정석대로 한다는 것이 어쩌면 쉽지만 엄청 어려운 일이다. 블로그 옮기기 현재 사용하고 있는 블로그에 오류가 잦은 것 .. 공감수 0 댓글수 0 2024. 3. 25.
[UXUI]2024.03.15(금) - WIL 주간 스터디 회고 WIL(Weekly I learned) 이번 주 경험한 모든 일 강의(Figma 활용법 2) 팝업과 모달의 차이, 다양한 컴포넌트의 규칙/가이드라인을 자세히 알게 되었다. 다양한 환경에 따른 UI 차이를 생각해보고 기획을 시각화하는 방법들을 알게 되었다. 프로토타입을 어떻게 활용하면 좋은지 자세히 알게 되었다. 팀 아티클 스터디 진행 사전캠프때 매일 하던 아티클 스터디를 본캠프때는 못했는데 다시 팀으로 시작하다보니 초반에 어려움이 있었다. 그리고 하다보니 다시 익숙해졌다. 이번 주 아쉬웠던 점 / 깨달은 점 / 나의 감정 아쉬웠던 점 : 강의 복습을 하지 못했던 점 깨달은 점 : 디자인 가이드 라인을 만드는 방법에 대해 배우고 직접 만들어 본 점 잘한 점 : 꾸준히 하고 있는 점 나의 감정 : 뿌듯함 /.. 공감수 0 댓글수 0 2024. 3. 25.
[UX/UI]프로토타입 기능 활용 - 7주차 숙제 1. 이미지 슬라이드 만들기 스크롤 컨테이너를 활용한 이미지 슬라이드=캐러셀(Carousel) 만들기 2. 어코디언 만들기 스마트 애니메이트를 활용한 어코디언=폴더블(foldable)=콜랩서블(collapsible) 만들기 3. 심화) 당근 앱의 글쓰기 버튼 스마트 애니메이트를 활용한 어코디언=폴더블(foldable)=콜랩서블(collapsible) 만들기 🔗 실제작업파일보기 공감수 0 댓글수 0 2024. 3. 25.
[UX/UI] Figma 활용법 7 ✳️ 프로토타입 1. 프로토타입의 개념 디지털 제품에선 실제 제품을 만들지 않고 아이디어를 테스트해볼 수 있는 것으로 프로토타입을 만들거나 프로토타입을 사용해 테스트하는 것을 프로토타이핑이라고 함 Lo-fi(Low fidelity) : 전체적인 흐름을 빠르게 맞춰볼 수 있는 낮은 단계 Hi-fi(High fidelity) : 실제 제품과 거의 같거나 유사한 수준의 높은 단계 2. 프로토타입을 만드는 이유 1) 실제 제품을 만들지 않고 아이디어를 검증해 볼 수 있음 2) 팀 구성원들과 시각적인 결과물로 소통할 수 있음 3) 부족하거나 놓친 부분을 확인할 수 있음 ✳️ 피그마 프로토타입 소개 1. 피그마 프로토타입 피그마에서 디자인한 화면들을 바로 실제 작동하는 형태로 테스트해 볼 수 있는 유용한 기능 2... 공감수 0 댓글수 0 2024. 3. 25.
[UX/UI]UI 차이점과 와이어프레임 그려보기 - 6주차 숙제 1. UI 차이점 찾아보기 1-1) OS 별로 차이가 있는 부분을 찾아보고, 왜인지 나름의 이유를 적어 보세요. 동일한 앱의 UI가 안드로이드 기기와 아이폰에서 다르게 보이는 부분을 찾고 왜 다른지 다양한 이유를 논의해보기 배달의민족 앱 "메인화면" 폰트적용 : 아이폰의 경우 이미지, 로고 제외한 폰트가 아이폰 기본 폰트로 적용되고 갤럭시의 경우 배민폰트가 적용됨 애플의 디자인 철학이 사용자 경험과 시각적 일관성을 중시하기 때문인 것 같다. 하단고정탭 : 기본 운영체제의 하단 고정 탭 방식의 차이로 아이폰은 드래그와 드래그 후 잠시 멈춰있으면 홈화면과 사용중인 페이지들을 볼 수 있다. 갤럭시는 버튼형식으로 아이폰의 2가지 기능과 뒤로가기 버튼이 추가되어 있다. 배달의민족 앱 "검색창" 폰트적용 : 아이폰.. 공감수 0 댓글수 0 2024. 3. 25.
[UX/UI] Figma 활용법 6 ✳️ 다양한 환경에서의 UI 차이 1. 웹과 앱의 특성 차이점들을 잘 알고 적합한 UI를 설계하는 것이 중요 웹과 앱의 특성 비교 2. 대표적인 웹과 앱의 UI 차이 1) 페이지 이동 : 웹은 주소를 입력해서 어디든 접근이 가능하지만 앱은 이동 불가 2) 뒤로가기 : 앱은 상단 아이콘 등 버튼을 눌러 이동하지만 웹은 브라우저 자체 기능을 통해 이전 화면으로 돌아가는 것이 자유로움 3) 주요 메뉴 이동 : 모바일 웹은 상단에 주요메뉴 UI 배치, 앱은 하단 고정탭으로 배치 4) 바텀 시트(Bottom Sheet) : 바텀 시트는 하단에 고정되어 있는데 앱에서는 다양한 용도로 활용, 모바일 웹에서는 사용이 까다로움 3. OS(Operating System:운영체제)별 차이 OS에 따라 UI를 다르게 사용하는.. 공감수 0 댓글수 0 2024. 3. 25.
[UX/UI] Figma 활용법 5 ✳️ 모달 1. 합성 컴포넌트와 컨테이너 컴포넌트 컴포넌트를 모아 또 컴포넌트를 만드는 경우를 합성 컴포넌트(Compound Component)라고 함. 대부분 버튼 컴포넌트에 파운데이션 또는 컴포넌트가 여러개 합쳐진 형태 컨테이너 컴포넌트에는 바텀시트, 다이얼로그, 리스트, 카드 등 복잡한 구조의 컴포넌트들이 있다. 2. 모달 1. 팝업의 개념 화면 위에 새로운 화면을 띄우는 걸 일반적으로 팝업이라고 함. 2. 팝업의 유형 1) 윈도우 팝업 : 새로운 윈도우(브라우저 창)을 띄워주는 방식 2) 레이어 팝업 : 현재 화면에서 코드로 만든 컴포넌트를 보여주는 방식 3. 모달의 개념 사용자가 행동을 취하기 전까지 뒤에 가려진 화면을 조작할 수 없는 것으로 UI를 분류하는 기준 중 하나 4. 모달의 종류 팝업.. 공감수 0 댓글수 0 2024. 3. 25.
[UX/UI] Figma 활용법 4 ✳️ 컴포넌트 1. 컴포넌트의 개념 컴포넌트는 파운데이션의 조합을 쌓고 쌓아 만들어지는 구성품 2. 컴포넌트의 모양이 아니라 기능이 중요한 이유 우리는 버튼의 생김새가 아니라 버튼이 하는 일을 기준으로 생각하기 때문 따라서 UI의 목적, UI의 기능에 초점을 두고 공부해야 한다. 3. 컴포넌트의 종류 액션 : 사용자가 중요한 행동을 수행할 때 사용해요. 인풋 : 사용자의 입력을 받을 때 사용해요. 인포메이션 : 사용자에게 서비스의 상태나 안내 사항을 전달할 때 사용해요. 컨테이너 : 컴포넌트 여러개가 결합되어 하나의 덩어리를 이루는 컴포넌트에요. 내비게이션 : 사용자가 페이지를 이동할 때 사용해요. 컨트롤 : 사용자가 설정이나 값을 수정할 때 사용해요. ✳️ 의사 상태(Pseudo-state) 1. 의사.. 공감수 0 댓글수 0 2024. 3. 25.

728x90

반응형

SMALL

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.