[스파르타코딩클럽] UX UI 8기 23

[아티클 스터디] 목록에서 상세 정보를 얼마나 보여주는게 좋을까?

https://brunch.co.kr/@yonniek/15 목록에서 상세 정보를 얼마나 보여주는 게 좋을까?커머스 목록 UX의 유용성과 혼란 사이 균형 잡기 | 기획을 고민하다 보면 무엇도 더하지 않고 단순함을 추구할지, 복잡함의 길로 갈 것인지 두 갈래 선택 앞에 서서 갈등하게 되는 순간이 반드시brunch.co.kr  [주제]커머스 서비스를 기획할 때에 보여지는 좋은 목록 UX에 대하여(*모바일 커머스 사례를 중심으로)[아티클 요약]혼란스럽지 않은 것이 중요!: 단순함과 복잡함은 옵션이지, 더 나쁘거나 좋은 것이 아니다.복잡함을 다루는 방법서비스 특성을 고려목적형: 필요 정보, 설명 목적 지향 (예시: 검색을 통해 물품을 구매하는 쿠팡)검색, 필터, 정렬 기능 활용상품 상세 확인 시에 상세 페이지로 ..

[TIL] 1010 학습일지

[강의]체계적으로 배우는 피그마 기초 완전 정복 3주차1-5강 파운데이션- 색상(Color)- 서체(Font, Typography)- 간격, 여백(Spacing, Gap)- 곡률(Radius)- 그리드(Grid)- 고도(Elevation)- 아이콘(Icon)1.컬러컬러 스타일 만들기1) 기본 2~3컬러 지정2) 해당 색상을 HSL값을 조정하여 총 10단계로 나눔3) 이후, 기본 컬러(White & Black)을 만들고, 회색 색상을 골라 10단계 설정 피그마 내 Foundation(Coolors, Styler) 참고*Plug-in으로 Cooler, Styler 사용함 컬러 비율 1:3:6법칙- Primary / Secondary / Background의 비율을 1:3:6으로2.폰트 스타일[!]여러가지 폰..

[개인 퀘스트] 웹/앱 서비스 조사 및 나의 관심 분야 찾아보기

1. 내가 자주 사용하는 웹/앱- 라이프: 호갱노노, 당근마켓, 네이버 지도, 카카오톡- AI: Chat GPT- 콘텐츠: 네이버웹툰, 넷플릭스 2. 관심 있는 웹/앱- AI: Chat GPT, 네이버 클로버, 삼성 빅스비- 모빌리티/맵: 42dot, Tmap- 라이프스타일 큐레이팅/럭셔리- 콘텐츠: OTT, 웹툰(네이버, 카카오, 레진) 3. 내가 가고 싶은 기업에서 운영하고 있는 서비스 종류 현재 가고 싶은 기업 없음

[개인퀘스트] 내가 생각하는 BX 디자이너의 핵심 역량

1. 요구사항쿠팡 (BX Designer)커뮤니케이션 디자인, 그래픽 디자인, 관련 디자인 분야 학사 학위 또는 이와 동등한 경험브랜드 디자인이 포함된 7년 이상의 디자인 경력온/오프라인 브랜드 접점을 위한 브랜딩 구축, 브랜드 디자인 경험을 입증하는 포트폴리오Adobe Creative Suite, Figma 등 디자인 툴에 대한 뛰어난 활용 능력로고, 타이포그래피, 사진, 아이콘, 일러스트레이션 등 여러 브랜드 요소를 제작하며 새로운 브랜딩를 구축하거나 리브랜딩한 경험브랜드 경험을 완성하는 여러 브랜드 요소가 어떻게 상호 작용하는지에 대한 전문적 이해브랜드 및 스타일 가이드라인 작성 능력일러스트레이션 및 기타 브랜드 요소의 실무 제작 능력온/오프라인 브랜드 접점에 필요한 디자인 능력브랜드 구축에 대한 ..

[개인 퀘스트] 비슷한 직무 JD 분석

프로덕트 디자이너와 유사한 직무로 보이는 JD를 분석해서 직무 별 차이점을 이해하고, 협업 시 어떤 능력을 키워야 할지 정확하게 알아보았다. UX Resercher (토스/듀오톤/리디)더보기 토스(비바리퍼블리카) 주요업무제품의 문제를 발굴해서 메이커들이 놓칠 수 있는 사용자의 목소리를 전달해요.사용자의 목소리를 바탕으로 제품이 어떻게 바뀌어야 할지 방향성을 제안하고, 개선 지점을 발굴해요.다양한 제품만큼이나 다양한 금융 맥락의 리서치를 경험하며 그 안에서 리서치의 처음과 끝을 주도해요.사용성 테스트 (UT: Usability Testing), 심층 인터뷰 (In-depth Interview), 집단 심층 인터뷰 (FGI: Focus Group Interview), 설문조사 등 제품의 적절한 리서치 방법론..

[TIL] 1008 학습일지

[강의]체계적으로 배우는 피그마 기초 완전 정복 2주차5-7강 Frame & ConstraintConstraint- 제약(조건), 제한이라는 뜻- Auto-layout을 정말 자동 레이아웃으로 만들어주는 기능으로,   오토레이아웃 '내'의 개체들이 움직이는 방식을 제한한다는 뜻(오토레이아웃 X)  (Parent Container 크기가 변할 때, Child Container는 어디를 기준으로 변할지 정함)*오토레이아웃은 그 자체로도 이미 레이아웃을 자동으로 쌓을 수 있음.*하지만 반응형 웹사이트처럼 실시간으로 같이 움직이는 레이아웃을 만들기 위해서는 오토레이아웃이 움직일 대 규칙을 만들어줘야 함.- 옵션 설명(★★★★★)-주요 기능이니 꼭 실습 여러번 할 것  1)Left/Right: 도형의 형태는 변경..

[TIL]1007 학습일지

[강의]체계적으로 배우는 피그마 기초 완전 정복 2주차1-4강 오토 레이아웃에서 레이어의 순서일반적으로는 어도비와 동일한 순서이지만,오토레이아웃에서는 제일 앞에 있는 레이어가 맨 아래로 간다.즉 순서가 반대가 된다.(왜일까?)[아티클스터디]사용자 인터뷰로 숨은 니즈 발견하기https://brunch.co.kr/@maju/42 사용자 인터뷰로 숨은 니즈 발견하기사용자 인터뷰를 계획하고, 실행하고, 분석하기 | 최근 논문 작성과 수업에서 진행하는 프로젝트 덕분에 인터뷰를 진행해야 하는 경험을 여러 차례 갖게 되었다. 생각해 보면, 대학원 진학 전에brunch.co.kr  [주제]사용자 인터뷰 방법과 팁 [아티클 요약]인터뷰의 2단계발견단계(Discover & Define): 사용자 경험 관찰로 문제 정의 단..

[개인퀘스트] 프로덕트 디자이너 JD 분석

네이버 웹툰 더보기팀 소개NAVER WEBTOON은 전 세계 웹툰 작품을 제작 및 배포하며, 독창적인 콘텐츠 경험을 제공하는 글로벌 플랫폼입니다. 우리는 다양한 장르와 주제의 이야기를 통해 사용자들에게 새로운 경험과 즐거움을 선사하고 있으며, 기술과 디자인의 융합을 통해 웹툰 산업의 혁신을 이끌어가고 있습니다. 주요 업무웹툰 플랫폼의 인터페이스 및 사용자 경험 개선콘텐츠 제작 관리 및 검수를 통한 품질 유지다양한 팀과 협업하여 효과적인 서비스 개발 및 배포사용자 데이터를 분석하여 서비스 향상을 위한 인사이트 도출신규 기능 및 서비스 아이디어 기획 및 실행 자격 요건관련 분야 학사 이상의 학위 또는 동등한 경력웹 디자인 및 개발에 대한 이해와 경험UX/UI 디자인 툴 및 프로토타입 제작 도구 숙련강력한 문..

[WIL] 사전캠프 1주차

WIL : Weekly I Learned지난 일주일을 돌아봄으로써 나의 현재 상태를 파악하고더 나은 다음 주를 만들기 위해 어떤 부분을 어떻게 채워나갈지 고민하는 것 FACTS(사실, 객관) : 이번 일주일 동안 있었던 일, 내가 한 일 - 사전캠프 OT- 내가 자주 사용하지 않던 툴(슬랙, ZEP, 노션 등)들을 사용하고 설치해보았다.- 강의 1주차(1~9강) 완강- 아티클 스터디(2개)- 멤버카드 작성. (오랫만에 자기소개하려니 쑥쓰럽다..) FEELINGS(느낌, 주관) : 나의 감정적인 반응, 느낌 아기가 울어요 잠시만요🤯아기를 돌보면서 할 수 있을까 두려웠는데 팀원들의 배려로 어찌어찌 한주가 잘 지나갔다.가끔 타이밍이 맞지 않게 아기가 엉엉 울어서 집중하기 어려운 순간들도 많았지만,어쩌겠나 어..

[TIL]1004 학습일지

[강의]체계적으로 배우는 피그마 기초 완전 정복 1주차5-9강  ■  8포인트 그리드개발자와 소통하기 용이하게 하기 위해 임의 숫자를 기준으로 하는데, 이를 8포인트 그리드 디자인이라 함.*최근에는 디바이스 해상도가 개선되어 2배수도 가능 - 8은 1,2,4,8로 나눌 수 있음.- 그만큼 디자인을 축소하더라도 픽셀이 망가지는 것을 최소화할 수 있음- 즉 해상도 업/다운스케일에 용이함 예제) 아래와 같은 버튼 3개 디자인이 있다고 할 때에 XLarge 버튼을 만든다면 폰트사이즈와 여백은?버튼S: 폰트 14pt, 여백 8px버튼M: 폰트  16pt, 여백 12px버튼L: 폰트  18pt, 여백 16px버튼XL: ?답) 폰트  20pt, 여백 20px  ■  피그마에서 지원하는 이미지의 최대 사이즈: 4,09..