본문 바로가기

반응형

디자인

(50)
[디자이너 모니터 추천] LG전자 모니터 27UP850N (내돈내산 / 4K UHD / 68.4cm / 45만 원대 / 피벗가능 / 캘리브레이션) 안녕하세요. 오늘은 최근에 구입한 LG전자 모니터 27UP850N 포스팅할게요. 내돈내산리뷰입니다. 회사에서 와이드 모니터 쓰다가 퇴사하고 집에서 노트북으로 작업하려니 눈이 간질간질하더라고요. 듀얼 모니터가 필요하다고 판단해 알아보다가 큰맘 먹고 구매했습니다. 사실 처음에는 10~30만 원 선에서 저렴이를 사자 생각했어요. 나름 열심히 알아봤는데 저렴한 제품 군에서는 지지대가 불안하거나, 화질이 떨어지거나, 디자인이 너무 투박해 영 마음에 들지 않더라고요. 그래서 안 되겠다 예산을 조금 더 올렸습니다. 40~50만원 대로....이왕살 거 눈에 차는 걸 사자 싶어서요. 원래는 하루라도 빨리 받아보고 싶은 마음에 쿠팡에서 구매하려고 했거든요? 할인가 적용했을 때 공식 홈페이지와 쿠팡 금액은 비슷한데, 쿠팡에..
기억에 남는 개발자의 피드백 신입 UI디자이너로 일하면서 개발자로부터 피드백을 받을 때마다 그때그때 기록해 뒀다. 정답이 아닌 것도 있지만 신입으로서는 알아두면 좋은 내용이라 포스팅으로 남긴다. 1. 웹접근성에 맞게 컬러를 사용해주세요 (플러그인 : contrast 활용) 2. 파비콘 만들 때 W/H 둘 중 하나는 100% 사이즈로 작업 (64x64) 2-1. 백그라운드 컬러는 되도록 입히지 말 것, 입힌다면 동그라미 형태로 >>> 개발자 개인취향 3. 반응형 페이지 디자인할 경우 모바일/태블릿과 유사하게 작업해 주세요 4. 다양한 경우의 수를 고려해 디자인해주세요 (예) 게시판일 경우 게시물이 없는 상황까지 어떤 문구가 나와야 할지 고려 5. (웹페이지) 회원가입 플로우는 되도록 모달이 아닌 페이지로 작업해주세요 5-1. 단계가 ..
[신입 UIUX디자이너 일기] 반응형 디자인할 때 주의사항 얼마전 개발자님으로부터 반응형 웹페이지를 디자인할 때 '태블릿'과 '모바일'을 유사하게 디자인해달라는 요청을 받았다. 기존에는 디자이너 사수와 알려준대로 웹과 태블릿의 결을 더 맞추려고 했는데 (여기에서 결을 맞춘다는 건 폰트 사이즈나, 버튼 존재의 유무 , 레이아웃 등) 개발자님의 이야기는 또 달랐다. 더 설득력있었고. 1. 태블릿과 모바일 터치방식을 고려해 최대한 유사하게 디자인하기 웹과 태블릿/모바일 사용에서는 기기의 터치 방식에 차이가 있다. 웹은 마우스라는 도구를 이용해 원하는 경로로 이동하지만 태블릿과 모바일은 손으로 바로 스크린을 터치하기 때문에 터치 방식의 차이에서 발생하는 미묘한 차이가 발생한다. 이 점을 고려한다면 정말 태블릿과 모바일을 디자인 요소를 유사하게 가는 게 맞겠구나 싶었다...
[컴포넌트] 하단앱바 (Bottom app bar / M3.0 버전) Over view - 중요한 액션 버튼이 있을 때 하단 앱바를 사용해보세요 - 최대 4개의 아이콘 버튼과 FAB(Floating Action Button)를 포함할 수 있습니다 - 하단 앱바 레이아웃과 콘텐츠는 앱의 여러 화면에서 변경 가능합니다 - 모바일 기기에서 쉽게 접근 가능합니다 M2와 M3 차이 (M2) 하단 앱바의 엘리베이션은 8dp였고, FAB를 포함하지 않았습니다 (M3) 더 큰 콘테이너 영역, 그림자가 없으며 FAB를 포함합니다 Specs (사이즈) https://m3.material.io/components/bottom-app-bar/specs#0c22e04d-f72f-4fb8-8ab8-567163789da2 Bottom app bar – Material Design 3 A bottom..
[신입 UIUX디자이너 일기] 다양한 경우의 수를 생각하기 신입 UIUX디자이너가 개발자로부터 들은 피드백 기획자가 그려준 와이어프레임을 토대로 디자인에 착수한다. 디테일보다 속도가 중요한(시간싸움) 스타트업이다 보니 다양한 경우의 수를 생각하지 못하고 디자인하게 되는데, 기획자도 상황은 마찬가지 인듯하다. 와이어프레임에서 놓치는 페이지가 종종 생기는 편인데, 문제는 기획자가 놓치고 디자이너도 놓쳐 개발자가 발견해서 역으로 피드백을 받는다. 다행인 건 개발자라도 발견했다는 점이다. 만약 개발자도 놓친다면? 끔찍하다. 이번 여행사 반응형 페이지 제작 과정에서도 어김없이 놓치는 페이지가 등장했다. 와이어프레임을 토대로 1:1 문의 게시판을 디자인했는데, 개발자로부터 "게시물에 없는 경우도 생각해서 만들어주세요"라는 피드백을 받았다. 기획자가 와이어프레임을 놓쳤더라도..
[무료 아이콘 사이트 추천] 신입 UIUX 디자이너를 위한 무료 아이콘 사이트(icones) 안녕하세요. 회사에서 알게 된 무료 아이콘 사이트 하나 알려드릴게요. (퇴사하면 찾기 힘들까 봐 틈틈이 기록하는 중) 현재 저는 지방 스타트업에서 UIUX디자이너로 일하고 있는데요. 지금 다니고 있는 회사에서는 개발자 분들이 이 사이트(icones)에서 아이콘을 찾아 쓰라고 권하더라고요. 이유는 모르겠어요. 만들지도 말고(슬프죠?), 되도록 여기서 찾아 쓴 후 이름만 잘 복사 붙여 넣기 해달라고 하는 걸 보면................................... 귀찮지 않게 플러그인을 하나 만든 것 같기도 하네요. 이 사이트에는 구글, material design 아이콘 외에도 다양한 아이콘 세트가 있어요. 무궁무진! 저희 회사는 google만 쓰긴 하는데 종종 필요한 아이콘을 찾지 못할 때는 ..
UXUI디자인, 웹접근성이란? (웹접근성 플러그인 'Contrast') 회사에서 폰트 컬러에 대한 피드백을 받을 때면 '웹접근성' 이야기가 자연스럽게 나오는데요. 도대체 웹접근성이 무엇일까요? 네이버에 검색했습니다. 덤으로 피그마에서 관련 플러그인 추천도 해드릴게요. 폰트들끼리 위계를 부여하기 위해 컬러를 조정하는 일이 잦은데요. 그럴 때면 저도 모르게 연한 그레이 색을 쓰게 될 때가 종종 있어요. 시각적으로는 예쁠지 몰라도, 이렇게 작업했을 때 '장애인이나 고령자'가 웹사이트 또는 모바일앱을 이용할 때 불편함을 야기할 수 있기에 누구나 접근할 수 있는 환경을 만들어야 한다는 개념으로 '웹접근성'이라는 키워드가 등장했습니다. 종종 유튜브에서 마디아님(UIUX디자이너)의 영상을 보는데요. 영상에서도 '웹접근성'이라는 말이 자주 등장한다는 사실을 알 수 있어요. 알고 있지만 방..
패딩값을 정해야 하는데 (feat. Safe area가 뭔데) 사수와 함께 반응형 기기별 패딩값을 문서화로 기록하고 있던 중에(디자인 시스템 잡는 중), 이사님이 뒤에서 가만히 지켜보더니 툭하고 한마디를 던졌다. "패딩값 어떻게 정하는 거예요?" 나와 나의 사수는 "음........보통 잡던 대로 일단 기록해두려고요." 답했다. 그러자 뼈아픈 한 마디가 돌아왔다. "그런 것 같았어요. Safe area에 대해 제대로 공부하고 잡으세요." 차가운 말투에 잠시 심통이 났지만, 공부하면 되지라는 생각으로 관련 자료를 모으는 중. 여기에 쌓아서 주말에 공부해야지. https://wit.nts-corp.com/2019/10/24/5731 아이폰X 안전영역(Safe Area) 대응 사례 | WIT블로그 Safe Area는 원래 TV에서 처음 도입된 개념입니다. TV 해상도 비..
탈퇴, 삭제 버튼은 꼭 강렬한 빨간색이어야 할까? 오늘 디자인 시스템 회의를 하다가 개발자 동료가 이런 질문을 했다. "탈퇴, 삭제 버튼은 꼭 빨간색이어야 할까요? 프라이머리 컬러 사용하면 안돼요?" 곱씹을 만한 질문이다. error, danger 를 상징하는 레드 계열의 컬러는 너무 강렬한 나머지 자칫 사용자에게 시각적 피로감 또는 부담감을 남긴다. 동료는 제안했다. 하나는 프라이머리 컬러 필 버튼(filed btn) 로 하고, 나머지 하나는 텍스트 버튼(text btn)으로 놔두자고. 그런데 쉽게 대답하지 못했다. 어떤 상황이냐에 따라 다르기 때문에 이 부분은 주말에 조금 더 관련 자료들을 찾아본 다음에 답하기로 했다. (추후 이 포스팅에 버튼 컬러 관련해 찾은 레퍼런스 붙일 예정) 신입 UIUX디자이너 과로사할 예정...🥲 버튼 관련해 이런 피드백..
피그마 배웠지만 안 배웠다. 처음 웹페이지를 맡아 작업했는데, 이렇게 작업하면 나중에 개발할 때 힘들다고 혼났다. 어떤 곳은 fix, 어떤 곳은 hug, 일관적이지 않은 수치, 웹페이지가 제대로 분할되어 있지 않았다. 곳곳에 나도 모르는 앱솔루트 기능도 들어가 있는 경우는 다반사고. 부트캠프에서 배운 피그마는 말 그대로 아주 기초였다. 그래서 피그마 배웠지만 안 배웠다고 할 수 있다. 회사에서 천덕꾸러기,,,,,,,,,,,,,,,,엉엉. 요즘 매일 듣는 이야기는 반응형을 항상 생각하며 디자인해야 한다는 말이다. 머리로는 충분히 알겠는데, 신입이다 보니 변수 예측하는 수준이 낮다 보니 비슷한 결의 피드백을 받고 있다. (자괴감 모먼트) 모든 컴포넌트는 hug, fill로 이루어져야 하며 되도록 fix는 사용하지 않아야 개발자들이 힘들..

반응형