2024/03 32

[UXUI 내일배움캠프] TIL #21

💭 2024. 3. 20 오늘의 일기 오늘 한 일 - 디자인아티클 - 앱디자인 완성 - 프로토타입 1차 앱 디자인을 완성했다! 심화 과제와 동시에 진행하려니 어제 제작한 컴포넌트를 조금 손 볼 수밖에 없었다. 스타일 가이드 제작할 때부터 심화 과제를 고려했어야했는데 그땐 시간이 좀 남을 줄 몰라서ㅜㅜ 심화과제는 총 4가지다. 이 중 1,2,4번은 어렵지 않게 추가했는데, 3번을 진행하려니 너무 뜯어고쳐야 하는 부분이 많아져서 고민이다. 내일은 하루종일 프로토타입을 더 추가할 예정이다. 숙제 외에도 내가 구현할 수 있는 부분은 다 구현해보고 싶은데 가능할지 모르겠다. 내일은 꼭 강사님께 찾아가야지..ㅠ 1차 프로토타입은 이렇게 간단하게 마무리! 블루 스파게티는 아니고 아직 퍼런 면가닥정도.?

[UXUI 내일배움캠프] TIL #20

💭 2024. 3. 19 오늘의 일기 오늘 한 일 - 아티클 스터디 - 컴포넌트 정리 - 홈 화면 제작 - 상품 목록 화면 제작 어제 제작한 와이어프레임과 오늘 제작한 홈&상품목록 페이지. 언스플래시에서 상업적 이용 가능한 이미지만 쓰다보니 퀄리티가 떨어져보일까 걱정했는데 생각보다 깔끔하고 정돈되어 보이게 제작했다! 이미지 사용이 잦은 이커머스 플랫폼인걸 고려해 색 사용을 최대한 자제했는데 너무 단조로운 것 같기도 하다. 간만에 내가 하고싶은 걸 자유롭게 디자인하니 너무너무 행복하게 진행할 수 있었다. 와이어프레임을 기반으로 컴포넌트도 제작했다. 진행과정은 레퍼런스 수집 -> 컬러&타이포 선정 -> 와이어프레임 -> 컴포넌트 제작 -> 앱 페이지 디자인 이 순으로 진행했고, 순서대로 차근차근 진행하..

[UXUI 내일배움캠프] TIL #19

💭 2024. 3. 18 오늘의 일기 오늘 한 일 - 9시 개인 과제 설명 듣기 - 조 변경 - 레퍼런스 찾기 - 톤앤매너 정의 - 와이어프레임 제작 - 컴포넌트 제작 한 주간 진행할 새로운 미니프로젝트가 시작됐고 새로운 조가 편성됐다. 이번 조는 8조! 지금껏 만난 조원분들이 모두 좋은 분들이라 너무 다행이다. 다들 열정적이시고 활기차셔서 분위기가 정말 좋다. 새로운 개인 프로젝트 주제는 생필품 이커머스 어플의 홈, 제품 리스트, 제품 상세 페이지를 제작하는 것이다. 와이어프레임이나 레퍼런스 찾는건 과제 내용은 아니었지만,,, 과제 퀄리티를 올리기 위해 필수적으로 진행할 수밖에 없었다. 결국 오늘 계획했던 컴포넌트 제작은 내일로 미뤘지만 충분히 할 수 있을거라고 생각한다!!! 한동안 토스 관련 디자..

[UXUI 내일배움캠프] TIL #18

💭 2024. 3. 15 오늘의 일기 오늘 한 일 -  읽기 - 아티클 스터디 - 자격증 공부 이번 한 주도 마무리했고 WIL도 작성했다. https://nannannan.tistory.com/22 [UXUI 내일배움캠프] WIL #week4 평일엔 강의듣고 주말엔 놀러다니고 하는 일상이 벌써 4주째다. 주말에 복습도 하구 그래야하는데ㅎㅎ... 그래서 이번 주엔 뭘 했냐면은요 1. 피그마 활용(2) 완강 3/11~3/13 저번주 강의와 이어지는 nannannan.tistory.com 이건 오늘의 아티클! https://nannannan.tistory.com/21 [📓아티클] 라프텔의 UX라이팅 가이드 오늘의 아티클 : https://brunch.co.kr/@laftelux/3 라프텔 UX Writin..

[UXUI 내일배움캠프] WIL #week4

평일엔 강의듣고 주말엔 놀러다니고 하는 일상이 벌써 4주째다. 주말에 복습도 하구 그래야하는데ㅎㅎ... 그래서 이번 주엔 뭘 했냐면은요 1. 피그마 활용(2) 완강 3/11~3/13 저번주 강의와 이어지는 피그마 활용(2)를 완강했다. 강의 후기는 따로 정리해뒀다. https://nannannan.tistory.com/13 [스파르타코딩클럽] Figma 활용법 (2) 강의 후기 1. 모달 컴포넌트와 UI 요소 (5주차) 💡 모달 : 사용자가 행동을 취하기 전까지 뒤에 가려진 화면을 조작할 수 없는것. - 일반적으로 레이어팝업에서 사용되나, 팝업=모달은 아니다. 모달은 속성이 nannannan.tistory.com 강의에서 들은 내용 중 가장 어려웠던 강의는 컴포넌트 실습.. 원리는 이해가 가고 실습을 같..

[📓아티클] 라프텔의 UX라이팅 가이드

오늘의 아티클 : https://brunch.co.kr/@laftelux/3 라프텔 UX Writing 가이드 도전기 글쓰기로 만드는 사용자 경험 | 안녕하세요! 애니메이션 전문 OTT 서비스 라프텔의 프로덕트 디자이너 매미입니다.✌️ 오늘은 라프텔의 UX Writing 가이드 제작 과정을 공유해보려고 합니다. 1.UX Wr brunch.co.kr 1. 아티클 첫 인상과 후기 - UX 라이팅이 정확히 뭔지 모르겠다. -> 사용자 경험을 바탕으로 사용자의 언어로 글을 작성하는 것. 제품을 팔기 위한 언어인 카피라이팅과는 차이가 있다. UX 라이팅의 4원칙으로 명확성, 간결성, 유용성, 일관성이 있고 UX에 대한 깊은 이해를 바탕으로 정확하고 사용자가 이해하기 쉽게 글을 쓰는 능력, 편집 경력 모두가 필요하..

[UXUI 내일배움캠프] TIL #17

💭 2024. 3. 14 오늘의 일기 오늘 한 일 - UX 개론 책 읽기 - UX 개론 책 후기 - 버튼 컴포넌트 실습 - 디자인 아티클 분석 오늘 한 것 : https://nannannan.tistory.com/15 [📚책 후기] UX 개론 앙투안 비조노 지음 🗓️ 읽은 날짜 : 2024. 3. 14 📚 분야 : UX 방법론과 이론 👍 별점 : ⭐️⭐️⭐️ 📋 차례 Part 1 : UX 실무를 위한 주요 방법론 1장. '디자인 씽킹'으로 디자인을 생각하라 2장. nannannan.tistory.com https://nannannan.tistory.com/19 [📓아티클] One Thing One Page 오늘의 아티클 : https://brunch.co.kr/@chulhochoiucj0/31 UX ..

[📓아티클] One Thing One Page

오늘의 아티클 : https://brunch.co.kr/@chulhochoiucj0/31 UX 원칙 - One thing per page 모바일 UI·UX 디자인 원칙 | “One thing per page”는 한 페이지에 한꺼번에 많은 정보 입력을 요청하기보다 단계를 나눠 한 가지 질문에 해당하는 입력과 선택을 요청하는 인터페이스가 더 사용성이 brunch.co.kr 1. 아티클 첫 인상과 후기 - 한 페이지에 하나의 정보만 넣자는 뜻일 것이다. → One thing은 정보만을 말하는 것은 아니다. 사용자가 대답해야하는 한 가지 질문, 사용자가 알아야 하는 정보 중 하나, 사용자가 내려야 하는 한 가지 결정이라고 정의내릴 수 있다. → 복잡한 프로세스를 여러 개의 중요 단계로 세분화하고 최적화하여 각 ..

[📓아티클] 토스 A부터 Z까지 파악하기 (3)

오늘의 아티클 : https://blog.toss.im/article/beginning-of-tps 토스 프로덕트 산스 제작기: 금융 맥락과 디지털 환경을 고려한 서체 - 금융이 알고 싶을 때, 토 현대 사회에서 모든 글자는 대부분 화면에서 이뤄져요. 하지만 일반 서체들은 화면에 적합한 토스만의 서체가 아니었어요. 토스 서비스는 금융을 다루고 있고, 모바일로 사용해요. 균형, 맥락, blog.toss.im 1. 아티클 첫 인상과 후기 - 토스에서 사용하는 서체는 많은 폰트 패밀리와 다양한 언어를 지원해 따로 서체 고민을 하지 않도록 만들어져 있을 것 같다. → 라이트, 레귤러, 미듐, 세미볼드, 볼드, 엑스트라 볼드, 헤비 총 7개의 폰트 패밀리와 한국어, 영어, 베트남어까지 지원하며 각종 특수 문자까지..

[📓아티클] 토스 A부터 Z까지 파악하기 (2)

오늘의 아티클 : https://toss.tech/article/interaction 인터랙션, 꼭 넣어야 해요? 빠른 속도를 중요시하는 토스에서 어떻게 팀원들을 인터랙션에 공감하게 하고 슬릭한 제품을 만들어나갈 수 있었는지 소개할게요. toss.tech 1. 아티클 첫 인상과 후기 - 토스에서 사용하고 있는 인터랙션 종류와 제작기에 대한 이야기가 나올 것이다. → 토스에서 사용되는 인터랙션이 어떻게 개발되었는지, 또 개발 라이브러리인 랠리에 대한 자세한 설명이 나온다. - 인터랙션이 UX를 구성하는 데 있어 어떤 기능을 할까? → 지표를 개선하고 화면 이탈율을 줄인다. → 유저에게 명확한 피드백을 줄 수 있고, 어떤 행동을 해야되는지 더 직관적으로 보여주고, 화면 안에서 어떤 일이 일어나고 있는지 쉽게..