프로덕트디자이너 Hailey 일기장📝

웹과 앱은 보기엔 크게 차이 없어 보이지만 많은 차이점이 있다.디자인 할땐 이 차이점들을 잘 알고 적합한 UI를 설계하는게 중요하다.웹과 앱의 특성 비교웹은 데스크톱 웹과 모바일 웹을 모두 포함하지만,차이를 비교하기 쉽도록 모바일 웹으로 범위를 좁혀서 생각해주자 우리가 아는 사파리, 크롬, 삼성 인터넷 등을 웹 브라우저(Web Browser)라고 부른다.  UI는 기능과 목적이 중요하다고 했다. 이런 UI에 차이가 있다는건목적에 차이가 있다는 뜻.목적에 차이가 있다면 UX에서도 차이가 생긴다. 대표적인 예로 오늘의 집이 있다.앱과 웹의 UI가 다른 대표적인 서비스중 하나다. 앱은 일반적으로 화면 상단의 아이콘 버튼을 눌러 화면 이동.웹의 경우 브라우저 자체 기능을 통해서 이전 화면으로 돌아가는게 자유롭다..

컴포넌트란?컴포넌트는 어떤 것을 만들기 위한재료, 구성품 이라는 뜻을 가지고 있다.컴포넌트의 개념ex)회로를 구성하는 부품들도 회로 구성품(컴포넌트)라고도 부른다. 컴포넌트는 원자 요소를 결합해서 만든 분자 단위의 구성 요소이다.즉, 디자인에서 컴포넌트는 파운데이션의 조합을 쌓고 쌓아 만들어지는 구성품을 이야기 한다.  컴포넌트라는 표현은 개체라고 생각하면 된다. 컴포넌트는 모양이 아니라 기능이 중요하다.모양도, 색상도 다르지만 모두 '버튼'이라고 받아들이는 이유가 무엇일까?-> 우리는 버튼의 생김새가 아니라 버튼이 하는 일을 기준으로 생각하기 때문.회사와 팀마다 디자인은 모두 다 다를 것이다. 어딘가는 끝을 둥글게, 어딘가는 끝을 각지게 하거나 또는 테두리 선을 넣는다. 이때, 만약 생김새로만 UI를 ..

디자인 시스템 관련 강의를 들으며 정리* UI디자인에 가장 중요한 디자인 시스템.디자인 시스템의 개념-> 디자인 시스템이 필요한 이유- 웹사이트나 앱을 디자인할때. 이 웹과 앱을 제품 (프로덕트)이라고 부른다.- 프로덕트를 만드는 디자이너들은 사용자들이 겪는 문제를 찾아 디자인으로 개선한다. 컬러 스타일1.디지털 환경에서 색상이 보이는 원리핸드폰에서 봤던 걸 컴퓨터로 보면 색깔이 조금 다르게 느껴졌던 경험.컴퓨터나 핸드폰에 문제가 있던게 아니라, 원래 빛이라는게 그렇다. 자연스러운 현상디지털 화면을 디자인하는 사람들이기 때문에, 이 디지털 화면의 원리를 이해하면 더 좋겠졍? RGB와 Hex Code디스플레이는 빛의 3원색으로 구현되는 화면이다.-> 즉, 빛의 농도와 명암을 조절해 여러가지 색으로 만든다...

새로운 팀으로 배정이 되었다.팀원들 모두 해바라기이름에 맞게 아바타 옷을 노란컬러톤으로 맞춰입었다 ㅎㅅㅎㅋㅋ ZEP캐릭터 다시봐도 넘 귀여운것 같다    오늘 오전에는 디자인카타를 진행하였다.디자인 카타란?매일 레퍼런스를 수집하고 분석하며 "왜?"라는 질문을 던지고이를 다른 사람들에게 전달하는 연습을 통해 디자인 사고력을 기르는 데일리 과업입니다.반복되는 연습이라는 뜻을 가진 Kata 를 통해 매일 아침 디자인을 훈련진행시간 : 매일 오전 9시 ~ 10시진행방식 : 리서치, 발표   오전에 레퍼런스 조사 후 간단하게 왜 이 레퍼런스가 좋다고 생각하는지 이유를 작성하였다.근데 찾는데 꽤나 시간이 빨리가서 좀 급하게 찾는 감이 있긴했는데 맘에들었던 이유는 명확하게 있어서 작성하기는 편했다.      피그마강..

이번 주는 피그마 기초 강의를 통해 디자인 툴에 대한 이해를 넓히고, 미니 프로젝트에서 협업의 가치를 다시금 경험한 한 주였습니다. 팀원들이 적극적으로 참여해 주신 덕분에, 각자의 역할을 잘 수행하면서도 상호 보완적으로 기간안에 작업을 진행할 수 있었습니다.지난 일주일 동안 가장 인상 깊었던 배움피그마의 기초 강의가 매우 유익했고, 미니 프로젝트를 통해 협업이 주는 긍정적인 시너지 효과를 경험했습니다.각자 의견을 적극적으로 제시하고 역할을 분담하며 결과물을 빠르게 도출할 수 있었습니다.그 배움에 도달하기까지의 어려움초반에는 팀원들과 다소 어색함이 있었지만, 시간이 지나면서 함께 작업하고 논의하면서 점차 각자의 성향과 작업 방식을 이해할 수 있었습니다. 이를 통해 각자의 강점을 살려 역할을 나누어 진행하며..

어제 퇴실후 운동 30분 갔다가 다시 자리로 돌아와 앱디자인 제작을 하였다. 내가 원하는건 프로토타입까지 모두 완료된완성도 있는 앱을 원했다. 어제 ㅇㅎ님이 스크롤 내리는거 어떻게 했다고 영상으로 보여주셨는데... 앱제작 미친듯이 하다보니 프로토타입할때 까먹어버렸다...그래서 유튜브랑 구글서치 엄청 하면서 찾아보느라 시간이 좀 걸렸다.그리하여 결과적으로 프로토타입까지 버튼 누르면 다음페이지 넘어가게 인터렉션 완료 하였다. 어느정도 완료후 맘놓고 잠을잤다.오늘 하루 요약 - 미니플젝 미친듯이 몰입 집중 빠르게 후다다다닥 제작 후후 결과 뿌듯 !     앱디자인 제작 하는걸 내가 혼자 어쩌다 담당하게 되어 잘 할수 있을까...? 걱정반 도전반으로 진행했던 플젝.. 데드라인 2~3일 안에 그럴싸한 앱디자인을 ..

10.23(수)오늘 카메라랑 마이크랑 와이파이 잘되는지 미리 확인하려고 정시보다 미리 출석해서 테스트해봤다 다행히 잘 작동한다...근데 출석 버튼 눌렀는데 알고 보니 핸드폰 인증까지만 되었구 출석버튼 한번더 눌러야하는것이였는데 바로 ZEP들가서 캠 작동되는지 확인 할생각에 저걸 까먹을뻔했지만 다행히 매니저님이 말씀을 해주셔서 출석시간 오바하지않고 잘 출석 완료하였다~귯귯귯후후후 넘 졸리다 ㅜㅜ 어제 미니플젝으로 2틀안에  UIUX디자인을 혼자 제작하려 하다보니 강의를 들으면서 디자인 시스템을 만들어 UIUX에 적용시킬 시간이 부족해서 넘넘 아쉬운 마음에 오늘 강의는 컬러시스템 만드는 방법 3주차를 수강했다. 프라이머리=포인트컬러 입니다 프라이머리프라이머리!! 라고 강의 안의 강사님이 강조하셨다. 그래서 ..

2024.10.22(화) 4주차 강의 빠르게 듣고 5주차때가 실습 강의여서 이게 더 우선인것 같아 5주차 강의 듣고 있는데네이게이션 바 만드는 과정에서 인강에서 보여주는 Fiuxed 가 아무리 찾아도 새로 리뉴얼된 피그마 UI에는 버튼이 없었다. 그래서 해매다가 텍스트 클릭 하면 생기는저 레이아웃 구역에서 가로영역 조정 옆에 하단 화살표아이콘 클릭하면바로 위이미지처럼 리스트가 나온다... 덕분에 하나 얻었다. 피그마 화면 바뀌었으니 익숙해져야지그래서 Fill container 클릭 하면 앱바 텍스트(오토레이아웃 안해도 가능) 영역이 좌우로 확장 되면서 좌우 옆에 있던 아이콘들의 위치가 밀려나간다.진행완료했으면  크리에잇 컴포넌트로 만들어 준다. 프로포티 적용하려고 property 위치를 찾는데 강의 화면..