본문 바로가기

전체 글

 (31)
UX/UI 디자이너 포트폴리오 면접 및 발표 준비, 예상 질문 리스트 안녕하세요! 취업 준비 중인 신입 디자이너 연우입니다:)오늘은 포트폴리오 발표 및 면접 준비에 대한 글을 써보려고 해요.저도 처음 포트폴리오 발표 면접 때 생각보다 자세히 물어보셔서 되게 당황했었던 기억이 있어요😅포트폴리오를 구성할때도 해당 질문들을 참고하면 좋을 것같아서 포트폴리오 리빌딩 겸 질문 정리해보려고합니다! 제가 실제로 면접 때 들었던 질문 + 유튜브와 인터넷에서 나온 기출 질문 리스트들과 함께어떻게 준비하면 좋을지 제가 여기저기서 얻은 정보들 같이 공유해보려고합니다 ㅎㅎ 1. 포트폴리오 발표페이지별로 WHY? 를 계속 따져보기내가 말하고자하는 핵심 메세지회사의 산업군, 내 강점 고려해서 발표 내용 정하기UX 또는 UI 중 어필할수있는 강점 다르기 때문에 프로젝트 선별해서 발표포트폴리오 케..
UX/UI 디자이너 포트폴리오의 기본 구성 안녕하세요! 취준 중인 신입 디자이너 연우입니다:)최근에 여러번의 면접을 거치고, 다시 한번 제 포트폴리오를 고쳐보는 기간을 가져야겠다고 생각했어요.그래서 오늘은 포트폴리오 기본 구성을 어떻게 해야할지에 대해 다시 한번 스터디 해보는 시간을 가졌습니다. - 꽃내랑 디자이너님의 포트폴리오 구성 -간지(프로젝트 표지) - 개요 - 배경 - 문제 원인 - 가설을 찾기 위한 과정 - 가설 - 가설을 반영한 UI - 검증 - 회고1. 기본 구성1. 표지, 프로필, 목차2. 프로젝트 내용3. Thank you 페이지 2. 프로젝트 내용에 대해서기본적으로 프로젝트 2~3개한프로젝트 당 10장 내외 처음부터 끝까지 "맥락" > 설득 가능해야배경 - 원인 - 가설 - 검증제목만 읽었을때 납득이 가야 1) 간지(프로젝트..
UX/UI 디자이너, 프로덕트 디자이너 헷갈리는 개념 정리 차이점과 역할 안녕하세요! 혹시 'UX/UI'라는 말, 회사나 IT 뉴스에서 많이 들어보셨나요? 오늘은 이 두 개념이 무엇인지,그리고 디자이너들은 제품을 만들 때 어떤 일을 하는지 아주 쉽고 친절하게 설명해 드릴게요. 1. UX와 UI의 개념- UX : 사용자 경험 한 줄 요약: 사용자가 어떤 제품이나 서비스를 이용할 때 느끼는 전반적인 경험개념: 우리가 어떤 앱이나 웹사이트를 사용할 때, 처음 접속해서 원하는 정보를 얻고 나갈 때까지 느끼는 모든 감정과 과정을 말해요.- UI : 사용자 인터페이스한 줄 요약: 우리 눈에 보이는 것, 즉 버튼 색깔, 글씨체, 화면 구성처럼 사용자가 직접 마주하는 디자인 요소개념: 사용자가 제품(앱, 웹)과 직접 만나는 시각적인 접점이에요. 화면에 보이는 버튼, 아이콘, 글자 크기, 색..
19. 반응형 레이아웃 화면 가로폭 줄이거나 모바일로 접근 시 사용 불편 > 해결 방법 반응형 웹디자인 화면 해상도에 따라 가로폭/배치 변경하여 가독성 높임 1.1 viewport meta tag viewport란 웹페이지의 가시 영역 디바이스의 특성과 화면 크기 고려해 최적화된 웹페이지 제공해야 viewport meta tag는 브라우저의 화면 설정과 관련된 정보 제공 meta tag에서는 px 단위 사용, 단위 표현 생략 일반적으로 viewport meta tag는 모바일 디바이스에서만 적용됨 가로폭을 디바이스의 가로폭에 맞추고 초기화면 배율을 100으로 설정 1.2 @media 서로 다른 미디어타입(print, screen ...) 따라 각각 style 지정 가능 일반화면과 인쇄장치 별 다른 스타일 지정 @media(조건..
18. 레이아웃 layout의 핵심 - 블록 레벨 요소들을 원하는 위치에 배열 화면 크기 따라 적절히 화면 구성 변화시키는 반응형 웹디자인 > 필수사항 css 사용 시 layout을 구성할 때 자주 사용되는 핵심 기술은 float layout - 웹사이트 구성하는 요소 배치할 공간 분할, 정렬 행 구분 후 행내부 요소를 분리하는 것이 일반적 1.Header&Navigation Bar 네비게이션바 - 기본적으로 링크들의 리스트 > ul,li tag 이용하는 것이 일반적 직관적인 box model 위해 box-sizing : border-box; 사용 *box-sizing https://y5l3-1k.tistory.com/14 header header{ width:100%; height:60px; z-index: 2000;..
17. 웹디자인 타이포그래피 웹폰트 : 웹페이지를 요청한 순간 css에 기술된 필요 폰트가 서버>클라이언트 1. CDN 링크 방식 CDN링크 사용 @import rule의 url 함수 : 서버에서 지정된 url에서 파일 찾아 다운로드 @import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css); * {font-family: 'Nanum Gothic', sans-serif; } 2. 서버 폰트 로딩 방식 CDN 링크 사용하는 방법 로딩속도가 느림 단점 보완>서버폰트로딩방식 @font-face로 폰트 등록, font-family로 선택 @font-face{ font-family: myFontName; src:url("myFont.woff") } *{font-family: m..
16. 트랜스폼 css 스타일 변경을 부드럽게 표현하기 위해 duration 부여하여 속도 조절 요소의 이동(translate) 회전(rotate) 확대축소(scale) 비틀기(skew) 효과 부여 위한 함수 제공 애니메이션 효과를 위해 사용하여야 하는 것은 아니지만 애니메이션 효과를 부여할 필요가 있다면 함께 사용 1. 2D 트랜스폼 2D 트랜스폼은 프로퍼티값으로 변환함수(transform function)를 사용함. 변환함수는 다음과 같다 translate(x,y) 요소의 위치를 x축으로 x만큼, y축으로 y만큼 이동 translateX(n) x축으로 x만큼 이동시킴 translateY(n) Y축으로 y만큼 이동 scale(x,y) 요소의 크기를 X축으로 x배, Y축으로 y배 확대 또는 축소시킴 / 0과 양수 sca..
15. 애니메이션 애니메이션 - 일반적으로 css애니 > js 기반 애니 렌더링 성능 그러나 경우에 따라 js가 나을수도, jquery 등 애니메이션 기능 > css보다 간편 - 비교적 작은 효과, css만으로 충분한 효과 볼수있는 것> css - 세밀한 제어 > js 사용 ex) 바운스, 중지, 일시중지, 되감기, 감속 과같은 고급효과 애니메이션 효과에 소요되는 시간, 수고 등 고려해 js 또는 css 결정 animation-name : @keyframes 애니메이션 이름 지정 animation-duration : 소요시간 s/ms로 지정 0s animation-timing-function : 타이밍함수 ease animation-delay : 대기시간 0s animation-iteration-count : 애니메이션 ..

티스토리툴바