디자이너 노트

PC 1920 저해상도 1320 브레이크 포인트 설정시 주의점 1. 내가 의도한 디자인에서 많이 벗어나지 않게 하는 것 2. 엘리먼트 간에 서로 충돌이 일어나지 않게 하는 것  홈페이지 마진: 36 테블릿 마진: 24 모바일: 16

디자인 시스템- 재사용 가능한 UI 구성 요소의 모음- 파운데이션: 색상, 아이콘의 모양 등- 컴포넌트: 파운데이션의 조합 사용 이유 - 일관성 보장(브랜딩으로 이어짐) - 디자인과 개발이 용이해짐  아토믹 디자인 시스템- UI를 더 작은 단위로 분해하여 재사용성과 일관성을 높이고, 효율적인 협업을 가능하게 하는 것- 계층적 구조 차용: 원자 - 분자 - 조직체 - 템플릿 - 페이지UI 컴포넌트 - 버튼, 폼, 카드 등의 재사용이 가능한 디자인 요소 스타일 가이드 - 타이포 그래피, 컬러 팔레트, 아이콘, 여백 등의 시각적 요소 규칙 정의 디자인 패턴 - 로그인 양식, 검색창 등의 기능에 대한 패턴 정의디자인 원칙 - 사용자 경험 제공을 위한 철학이나 기본 규칙 피그마 토큰을 이용하는 이유?- 다크 모드..

1028 : 카달로그 작업 오늘은 첫 출근이었다. 이제는 업무 일지를 꾸준히 써서 내가 어떤 사람인지 쌓아온 기록으로 설명하고 싶었다. 그래서 오랜만에 티스토리를 방문했다. 오늘은 첫날이라 크게 어려운 일은 없었는데, 일러스트레이터로 카달로그 만드는 작업을 했다. 기존 작업들은 상세페이지로 psd로 완성이 되어있었기에, 일러스트레이터로 옮기는 작업을 했으나 마음처럼 되지 않았다. psd에서 복사한 것들이 일러스트레이터에서 붙여넣기 되지 않았기 때문이다.(도대체 왜?) 그래서 psd를 일러스트레이터로 변환하는 방법을 생각해냈고, 이건 내일 적용해보기로. 또 새로 알게된 것인데 카달로그는 한 페이지를 반으로 접어 앞뒤로 4페이지를 제공하기 때문에, 4의 배수 페이지만 가능하다. 아트보드의 순서가 왼쪽 -> ..

2주차 - 7/22 ~ 7/267/22 애니마피그마에서 작업파일을 만들어 개발자님께 전달 드리면, 애니마라는 플러그인을 통해 html로 변환시킨다이 과정에서 모든 코드가 div로 출력되어, 디자인 동료님이 각각의 태그명을 댓글로 남겨주었다불필요한 과정을 없애기 위해 챗지피티에게 물어봤고, 로컬 스타일즈로 h1, h2같은 텍스트를 지정하라는 답변을 받았다.결론적으로 div 대신 h1 태그를 적용시키는데 성공했고, 개발자님께서도 만족해주셔 기분이 좋았다. 콘텐츠 작성- 아무래도 업무 특성상 여행 콘텐츠 작성하는 일이 많다. 호텔 소개글을 주로 쓰고있다. 그 안에 광고를 자연스럽게 녹여내는 일이다. - 퍼포먼스 마케팅과도 유사하다. - 다른 블로그는 어떤 소구점을 발굴하는지 찾아볼 필요가 있다 소프트웨어- 적..

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/12  7/12 프로젝트 결과 발표프로젝트 결과 발표날이었다. 첫번째 발표라 스무스하게 발표했고, 마음 편안하게 다른 팀원분들이 했던 작업을 확인할 수 있었다.UX UI에 대해 배우고 싶었는데, 앉아 있기만 해도 여기저기서 들리는 전문 용어 덕분에 많이 배울 수 있었다. 실무 가면 더 많이 배울 수 있겠다는 마음이 들었다.

3주차 - 7/11  7/11 디자인 시스템variable만들 때 그룹화하여 색을 설정하면 관리하기 편하다  토큰토큰(별명) : Hex 컬러값을 이해하기 쉬우려고 이름을 정해주는 것 회고내일 발표라 오늘은 pt 마지막으로 정리하고, 대본 썼다.팀별로 프로젝트를 진행하며, 역시 집밖에 나가면 뭐라도 배워온다는 것을 느꼈다. 어깨너머 배우는 것만큼 좋은게 있냐구.

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)과도한 상품을 나열해서 선택하라는 등의 여러가지 고민을 한 번에 제공하는 실수를 ..