디자이너 노트

7/15 - 7/19  7/17 퍼블리싱글쓰기 블로그 퍼블리싱을 하고 있다 이건 집에 와서 개인적으로 진행한 건데, chatgpt한테 물어보니 다 알려주었다.python을 설치했고Jinja2Jinja2는 파이썬용 템플릿 엔진으로, HTML, XML 등의 마크업 언어를 동적으로 생성할 수 있게 한다. Jinja2는 템플릿 내에서 변수와 제어 구조를 사용하여 데이터를 동적으로 삽입하거나 조작할 수 있다. {% if user %} Welcome, {{ user.username }}!{% else %} Welcome, Guest!{% endif %}{% for item in items %} {{ item }}{% endfor %}   FlaskFlask는 경량의 파이썬 웹 프레임워크로, 빠르고 ..

3주차 - 7/10  7/10 타이포그래피 타이포 그래피타이포그래피는 활자를 의미하는 'Type'과 기술을 의미하는 'Graphy'의 합성어 활자의 서체나 글자 배치 다위를 구성하고 표현하는 것을 말한다Type: 글자 하나하나의 모양(셰리프, 산셰리프 등)Font: 완성된 한 벌의 글자(가, 나, 다, -파..)Typephograh: 글자의 글자가 위치한 공간, 레이아웃 된 모양 등 완성된 한벌의 글자인 font들의 조합으로 이루어지는 그래픽 과정 기본 용어Baseline - 수평 기준선Leading - 문자 행의 수직 간격Serif - 돌기(삐침) - 폰트들이 디바이스별로 보이는 것이 다르다Kerning - 낱문자 사이의 간격   Universe헬베티가와 더불어 제목 또는 본문에 많이 사용하는 폰트  ..

3주차 - 7/9  7/9 피그마 디스코드 UI 개선스레드 페이지둘러보기 페이지

3주차 - 7/8   7/8 UX / UI 핵심 이론 고객 서비스 이용 프로세스BX - 접근(유입 동기 부여)UI - 기능(페이지, 버튼, 메뉴 등)UX - 핵심 가치 이용(서비스, 배송, 제품 등)Goal(구매, 목표 등) 휴리스틱고민하지 않고 버튼을 누르게 하는 것확률로 휴리스틱이 사용미적 유용성(The Aesthetic Usability Effect)디자인 및 구도에 대한 매력에 대한 강한 임팩트로 더 값진 서비스 또는 제품을 받을 것이라는 착가을 불러일을키는 심리적 효과분위기 좋은 커피숍쓰임이 분명한 디자인 이성과 감성 웹사이트 이성은 정량적인 단서를 많이 씀감성은 사진을 많이 씀 인지부하(Cognitive Load)과도한 상품을 나열해서 선택하라는 등의 여러가지 고민을 한 번에 제공하는 실수를 ..

2주차 - 7/57/5 Material Design 안드로이드 가이드앱바: 브랜딩, 탐색, 컴색 및 작업에 사용되는 도구들이 위치탭바: 안드로이드의 탭바는 화면 상단에 위치바텀네비케이션바: 화면 하단에 고정식으로 위치네비게이션 드로어: 햄버거 메뉴를 이용한 네비게이션 드로어시스템 글꼴한국어는 영문보다 1px 더 크게 사용한다아이콘 터치 사이즈아이콘은 24*24dp, 둘러싸는 패딩은 48 * 48dp 디자인시 주의 사항긍정적인 액션버튼은 우측 배치시각적 단서 제공 - 마이리얼트립 카테고리버튼의 위계 - 한 화면 내에 버튼이 2개 이상이라면 시각적 위계를 준다. 어떤 버튼을 먼저 누르게 할 것인가?사용자에게 한 화면에서 한 가지 행동만 유도사용자가 콘텐츠에 집중하도록 유도콘텐츠가 많을 경우 시각적인 계층구조..

2주차 - 7/47/4 UX Strategy 가치Think different 포지셔닝 재설정포지셔닝을 왜 할까? 데이터를 시각적으로 표현하기 위해  User Flow사용자가 서비스를 이용하는 흐름외부탐색: 서비스 접근 전에 외부에서 이루어지는 탐색과 이를 통해 서비스에 접근하기 전까지의 과정접근: 서비스를 들어와서 탐색을 시작하기 전까지의 과정탐색: 콘텐츠, 메뉴, 검색, 추천 탐색조회: 정보 조회, 큐레이션 정보, 통계 정보, 사용자 리뷰주활동: 구매나 예약, 거래와 같이 사용자가 서비스의 핵심 기능 실행이탈: 앱 종료 DeliverIA: 디자인을 위한 정보 구조도 설계User Flow: 특정 작업을 위해 움직이는 경로 설계와이어 프레임: 화면 단위의 레이아웃 설계UI/GUI 디자인 상세 설계 Info..

2주차 - 7/27/2 특강: 웹사이트의 구성 요소 버튼웹사이트는 괜찮은데, 모바일 사이즈의 경우 최소 44*44이상이어야 한다기본, 마우스 호버, 포커스(tab으로 이동했을 때), 비활성화(disable)풋터모든 페이지의 맨 아래에 위치한 영역사용자가 페이지의 품질을 측정하는 중요한 기준점 피츠의 법칙사용자는 오른손을 주로 사용하기 때문에 화면 우측에 중요한 정보를 배치하는 것이 좋다손가락이 닿기 쉬운 중간 부분에 중요한 정보를 배치(우측 중간) 드로어 메뉴햄버거 메뉴를 누르면 나온다사용자가 필요할 때만 메뉴를 열어서 사용장점: 좁은 모바일 화면에서 효율적으로 사용 가능 모달부정(왼쪽)/긍정(오른쪽) Bottom Sheet텍스트, 이미지, 액션 또는 컨텐츠를 포함한 컨테이너 영역으로 화면 하단에 고정되..

2주차 - 7/17/1 특강: 플랫폼 구축을 위한 사고와 습관 기획과 UX, UI의 개편시장에서 UI UX 기획자라 적혀있는 JD가 많음기획자와 디자이너의 차이? 디자이너는 화면의 프로토타입, 유저의 경험을 만든다면, 기획자는 정책적인 것부터 - 고객과의 커뮤니케이션, 완료보고 등을 하게 됨내가 만든 산출물을 어떻게 의사전달을 하고, 공감을 이룰 것인가?의외로 피그마, 노션 등을 사용하지 않는 경우가 많다. 클라우드 기반으로 만들어 있어서 보안상의 문제가 발생할 수 있기 때문이제는 음성보이스가 중요한 시대가 왔음 플랫폼이란?인간의 관계에서 생성되는 교류의 정류장 역할기업과 개인이 공동의 이익을 형성하는 곳'화면을 이용한다'를 넘어, '잘 이용하게' 만들 수 있어야 함플랫폼의 진화 - 관계/ 수단(정보의 ..

1주차 - 6/286/28 SWOT 분석, 포지셔닝 맵 웹의 개념월드 와이드 웹WWW, W3, 웹 웹의 특징그림, 사진, 영상, 텍스트 등의 멀티 미디어를 하이텍스트 방식으로 연결HTTP의 특저 규칙에 따라 인터넷을 통해 문서 및 기타 웹 리소스에 참조 적응형 웹특정 뷰포트 크기에 맞게끔 웹 페이지를 만들어서 별도로 제공데스크탑과 모바일을 따로 만들어서 접속하는 디바이스에 맞게 랜딩되어지도록 설계된 웹네이버데스크탑 랩탑으로 진입시 naver.com 웹페이지를 보여주고, 태블릿 모바일로 진입 시 m.naver.com 웹 페이지를 보여줌. 서로 다른 URL -> 디바이스에 따라 화면을 대응네이버는 1%일지라도 접속하는 인원이 많다보니, 제일 작은 모니터를 기준으로 만든다 반응형 웹하나의 웹 페이지가 뷰포트의..

1주차 - 6/276/27 UX 여정 조회최종 목적지까지 가는 역할캐치테이블은 별점과 리뷰 조회, 쿠켓은 사용자 후기 조회 주활동탐색, 조회를 거처 구매, 예약 등 서비스의 핵심 기능을 실행하는 단계하나 이상의 화면으로 구성복잡하지 않게 구성주의할 점사용자가 예상하는 순서를 그대로 따른다.다른 정보는 시각적 그룹핑으로 직관적으로 디자인.필요 이상의 많은 정보를 요구 X흐름에서 벗어날 경우 상황을 빠르게 이해하고 적절하게 대처할 방법 알려주기 하나의 주활동을 향한 여러 단계가 있을 경우, 시각적 그룹핑을 잘 해야한다. 프로젝트 내에서 주활동조회방 선택채팅채팅이 주기능이라 목적 도달까지 군더더기 없는 기능.  부가 활동사용자의 편의를 위한 기능을 수행하는 활동 프로젝트 내에서 부가 활동각각의 서버 위치를 우..