본문 바로가기

활동/내일배움캠프 UXUI 1기65

[240103]Figma 활용법1_3주차 그리드, 디자인 시스템 1/3 *3주차 강의에서 가져갈 것* 권장 1배수(원본) 디자인: 아이폰의 경우 375 * 812, 안드로이드의 경우 360 * 800 [구현 과정] 1) 1배수 사이즈로 디자인을 한다. 2) 기기는 코드를 읽고 자기 배율에 맞게 확대 또는 축소를 한다. = 랜더링, 아이폰 15프로 기기의 경우, 375 * 812의 디자인을 3배 확대해서 1125 * 2436으로 만듦. 3) 기기 실제 해상도에 맞게 미세 조정 후 화면에 띄운다.(업, 다운스케일) [분기점] 웹, 테블릿, 앱 픽셀값을 나눠서 디자인하기 테블릿은 사용자가 적으니 필요한지 판단을 해볼 것 가로가 1024px 이상이라면 데스크탑 화면입니다. 가로가 768px 이상, 1024px 미만이라면 태블릿 화면입니다. 가로가 768px 미만이라면 모바일.. 2024. 1. 3.
[240103]Figma 활용법 1_2주차(프레임/그룹의 차이, 오토레이아웃/컨스트레이트) 1/3 *강의를 통해 가져갈 것* [프레임vs그룹의 차이] 프레임은 코드 블록을 만드는 기능과 동시에 코드 블록 그 자체이다. 그룹은 여러 개체를 하나로 묶을뿐 [레이어와 정렬] 레이어의 앞 뒤: z축, 모니터랑 어느 게 더 가까운지 여러 객체를 누르고 정렬을 하면 기준과 가장 가까이 있는 객체를 기준으로 삼는다. [오토레이아웃] 오토레이아웃 내에 있는 순서는 단순 레이어랑 반대의 위계를 가짐 [컨스트레인트 Constraints] 부모 컨테이너의 왼쪽, 상단을 기준으로 자식 컨테이너가 움직인다. 오토레이아웃보다 이게 더 헷갈리는 것 같다. *2주차 HW* 주어진 영상과 동일하게 만들어 보기 1~6번 숙제인데 헷갈렸던 건 3번 문제이다. 오토레이아웃 적용이 아닌 부모 컨테이너를 기준으로 어떻게 움직일 건지.. 2024. 1. 3.
[240103]Figma 활용법1_1주차 1/3 *강의 들으며 배운 점* [ UXUI 디자이너의 가장 중요한 점] 사용자 문제를 끈기있게 해결하는 것 논리적인 사고 또한 중요, 왜 이렇게 디자인을 해야하는지 설득할 수 있어야 함 서비스를 사용하는 사용자들에 대한 애정 [기본 기능] 도형에 이미지 삽입 기능-Fill, Fit, Crop, Tile Tile 기능 %줄이면 사진 반복!! [이미지로 추출] 오른쪽 패널 Export [자동저장 되기 전 파일 저장하기] 왜냐면 뒤로가기가 좀 힘들 수 있음. 백업해놓기 자동저장 시점을 불러올 수 있음(Save to version history)->실무에서 자주 사용된다. 2024. 1. 3.
[240102]UXUI 웹 디자인 개인학습 1/2 오후 시간에 유튜브 강의 들으면서 기본 간격 잡는 걸 연습했다. 왜인지 모르게 마음이 편해지는 그런 느낌... 2024. 1. 2.
[240102]개인과제 회고 및 선택과제 1/2 2024년이 되었다. . . . 2024년 화이팅입니다... 오늘은 개인과제를 발전시키면서 선택 과제를 해보는 시간을 가졌다. 먼저 과제 해설을 보고 느낀 점?이라고 하면 일단 사용자 분석을 하지 않았단 점을 반성한다. 단순히 인터넷 쇼핑을 하는 사람들이겠지 라고 생각하는 게 아니라 구체적으로 나이, 직업, 이 서비스를 왜 사용하는지 분석을 하고 그것을 적용했어야 한다. 요 코멘트를 보고 내가 놓쳤던 부분을 알 수 있었다. 하단의 네비게이션 각 탭들의 타이틀을 붙이는 것도 고려해봐야 하는 사항 선택된 탭과 선택되지 않은 탭의 차이를 주는 것!!! 근거: 인지부하 2) 하단 네비게이션 바가 결제창에도 있음->근거: 사용자 관점에서 도움이 되나? 레퍼런스 참고 다양한 할인 버튼을 한 곳에 그룹화 하여.. 2024. 1. 2.
[231229]개인과제_11번가 app 화면 분석하고 솔루션 내보기 12/29 오.. 벌써 29일이라니... 아 오늘 금요일이니까 WIL스타일로 편하게 써야겠다. 먼저 이번 주의 개인과제부터 설명하자면 *11번가 APP의 화면을 분석하고 문제를 찾아서 솔루션까지 내보는 것*이었다. 빨리 끝낼 수 있을 거라고 생각했는데 생각보다 시간이 많이 들었다. 문제점은 쏙쏙 잘 보였는데 이게 왜! 문제인지 설명하는 부분에서 힘들었기 때문이다. (이건 TMI. 11번가 어플 원래 사용하고 있었는데 진짜 대기업에서 어떻게 이런 요상한 UXUI를 만들었지...?라는 생각을 수도 없이 했음. 쓸 때마다 너어무 뭐가 많아서 어지러웠다고 해야하나...) 아무리 디자인 이론이 있다고 하더라도 사용자나 클라이언트가 별로 거슬리지 않는 것 같은데?라고 생각하면 그만인 거 아닌가.. 뭐 그런 생각이 .. 2023. 12. 29.
[231228]UXUI디자인 입문 6주차 강의정리/HW_레퍼런스 분석 12/28 *강의정리* 레퍼런스 분석 : 여러가지 사례를 상세히 분류해 도움이 될 만한 부분 찾아보는 과정 세부요소를 관찰하면서 좋은 점 나쁜 점, 그 이유 찾고 생각해보기 - 왜 하나? : 분석 과정에서 디자인에 대한 영감을 얻고 좋은 디자인을 구분하는 지식 쌓을 수 있음 - 하는 방법? : 페이지(홈, 마이페이지, 장바구니 등)>모듈(리스트, 네비게이션 등)>엘리먼트(버튼, 뱃지, 탭 등)>파운데이션(색상, 폰트, 아이콘 등) 으로 나누기 BUT, UI요소->화면으로 나누어보자!!! UI요소들을 디자인 원칙에 대입하여 사용성이 높은지, 심미적으로 아름다운지 등 다양한 관점에서 디자인 평가해보기 핵심은 주장과 그에 맞는 논리적 근거를 찾는 것!(다양한 이론 사용) 분석 후 도움이 될 것 들을 그룹화하여.. 2023. 12. 28.
[231227]UXUI 디자인 입문 강의 5주차 강의정리/HW_디자인 원칙 실제 적용 사례 찾아보기 12/27 *강의 정리* 디자인 원칙 인지심리학의 관점에서 디자인할 때 지켜야 할 규칙을 정해놓은 것 많은 사람들이 비슷하게 느끼고, 행동하는 방식에 기조해 디자인하는 방법을 제시 사람들이 편안하게 느끼고 자연스럽게 행동하도로 유도할 수 있고, 사용성이 높은 제품을 만들 수 있도록 도와줌 게슈탈트 심리학 : 사람이 이미지를 인식할 때 주변에 있는 요소 간의 관계와 맥락에 영향을 받는 다는 이론 *착시현상_사람의 의식이 기본적으로 통일성, 연속성, 유사성을 요구하기 때문에 생김 사람의 뇌는 필요없는 것은 지우고 기억하기 쉬운 상태로 정리해 받아들이기 때문! 1) 유사성의 원리 -모양, 크기, 색, 방향: 차이가 있다면 차이가 있는 이유가 있겠지?라고 생각함 색상 유사성(가장 강력함)>모양의 유사성 정보의 .. 2023. 12. 27.
[231227]UXUI 디자인 입문 4주차 강의정리/HW_프로토타입 적용해보기 12/27 *강의 정리* 디자인툴 : 디지털로 이미지를 만들거나 편집할 수 있는 컴퓨터 프로그램 1) 인터페이스 디자인 툴: 피그마, 스케치, XD 2) 그래픽 디자인 툴: 포토샵, 일러스트레이 3) 3D: 시네마(유료), 블렌더(무료) 4) 모션 그래픽: 프리미어, 애프터이펙트 비트맵vs백터: 백터 파일 확장자 .svg, .eps, .ai 개발환경에서 사용가능한지 먼저 체크할 것 피그마, 스케치, XD -모두 벡터 기반 그래픽 편집(좌표를 기반으로 함)->왜? 반응형으로 디자인해야하기 때문에 -간단한 Lo-fi 프로토타이핑 -dev mode를 통한 그래픽->코드 변환 이용 용이 (피그마) 클라우드 기반, 멀티 플랫폼 지원 (스케치) 피그마 이전 가장 인기 있던 툴, 로컬 컴퓨터 기반이라 안정적, mac.. 2023. 12. 27.

티스토리툴바