분류 전체보기

피그마는 쉬운 툴이다. 라고들 많이 한다. 근데 그건 잘 모를때의 이야기인것 같다. 하하 왜냐하면 나는 3주동안 피그마를 처음 접하며 메뉴구성이 자꾸 바뀔때마다 혼란을 겪었기 때문이다. 0. 기본적으로 알아야하는 요소의 위계 1. 자꾸 변하는 메뉴구성 2. 의사소통시 알아야할 용어들 이걸 "fill"로 바꿔주세요. 이건 "hug"로 바꿔주세요. 등의 내용을 강의에서 듣는다. 사실, 이게 편하고 다들 알아듣는다. 그런데 왜인지 이런, 이걸, 저걸의 용어를 많이 사용하신 사장님 때문에 인턴시절 나는 엄청난 고역을 겪었다. 이렇게, 저렇게, 잘... 아무튼 편하게 사용하는 용어들이 어떤 요소의 무엇인지 알아야하니, 명확하게 의사전달이 가능하도록 용어를 정리해보자. Toolbar(툴바), Left sidebar..

정신 좀 차렸다. 하하 1/1에는 프론트엔드 코딩공부를 했다. 근데, 그것 아나? 나는 도대체 무얼 위해 코딩공부를 할까? 딱히 뚜렷한 목표가 없는데. 그럼 UIUX공부는 왜하나? 코딩보다 좋았고, 이건 확실히 하고싶다. 도대체 왜? 예쁜 웹사이트를 만들고 싶었다. UIUX가 예쁜걸 만드는게 아닌걸 알았는데도 계속 하고싶나? 이젠 그냥 의무감에 하고 있다. 새로운걸 만드는 사람이 되고 싶었다. 20대 초반만 해도 인정받고, 관심을 받기위해 온갖 기행을 했다. 예를 들면 아무도 예상하지 못한 결과물을 내곤 했다. 남들 다 하는건 안하고, 하고싶은거 하는 예술병에 걸렸고, 어쨌든 오랜 기간 디자인을 동경만 해왔다. 뽐내기에 좋은 분야이니까, 막연히 두드린게 불과 3주전이다. 여전히 예쁘고, 독선적인 것을 만..

확실히 부트캠프라는 체제에서 배우다보니 적재적소에 필요한걸 압축적으로 배운다. 나중에 보면 당연한 것 들이겠지만, 지금은 솔직히 배우기가 좀 귀찮은 마음도 든다. 습관으로 9to9이 익숙해지고, 할당량 계획을 짜고, 성취했을 때 스스로에게 보상을 주자. 오늘 배운 것: 피그마 활용 강의 4주차 수업으로, 디자인 스타일의 개념과 내가 직접 팀원, 조직내에 결정한 디자인 체계를 전달하는 방법을 배웠고, 컴포넌트와 베리언츠의 개념을 배우고 버튼을 제작하며 실습을 했다. 공부 내용 컴포넌트, 버튼 컴포넌트, 텍스트필드 컴포넌트 컴포넌트는 재료, 구성푼이라는 뜻이 있다. 요소요소 할때 그런 느낌이다. 피그마에서는 자식을 수없이 낳는 표준같은 느낌이다. 컴포넌트를 버튼으로 설명해보자. 나는 생김새를 기준으로 버튼이..

uiux 개인 미팅 ui 디자인을 직접 할때 어려움. 막막함 -> 레퍼런스를 하루에 5~6개씩 디자인과 코딩 -> 퍼블리셔 왜에 대한 고민 -> 결과가 안나온다고 생각한다면? -> 머뭇거릴 시간에 닥치고 달려가라. 무엇을 배웠는지를 넘어서서 어떻게 배우고 있는지에 관한 대화였다. 디자이너는 글을 잘 써야한다. 문제를 해결하는 사람이기 때문에 논리적으로 해결책을 세운다. 이 방안을 떠올리고, 주장하는 이유를 말해 동료들을 설득한다. 이력서와 포트폴리오에 나를 알릴 수 있기 때문이다. 이력서 + 포트폴리오 + 글 문제해결을 이뤄가는 논리 설득력을 키우는 훈련이 될 수 있다. 말오 하기전에 공부하고, 글로 쓰기 때문 남들은 두개 자랑할때 나는 이 좋은 것까지! 오늘의 주제 : til 일일학습일지를 어떻게 쓸까..

오토레이아웃의 내부에는 컨스트레인트가 안걸린다는걸 발견했다. 위 사진에는 부모요소라 할 수 있는 오토레이아웃을 선택했을 때 constraint가 잘 살아있지만 이것이 무엇에 대한 컨스트레인트인지 모르는 상태다. 원래 아래처럼 자신이 속해있는 프레임에 대해서 어느 선분 기준으로 constraint가 걸려있는지 알아야 한다. 위 사진은 사각형 안에 사각형을 선택했을때 나오는 정보로, 어느 면에 어떤 기준으로 컨스트레인트가 되어있나 확인할 수 있다. 확인을 할 수 없으니 추론을 해보면 된다. 맨 아래에 사진으로 문제 3번 오토레이아웃은 어디에 걸려있나 알아낸 사진이 있다. 어쨌든, 오늘 포스트의 목적은 오토레이아웃 내부에서 왜 오토레이아웃 프레임에 대해 컨스트레인트가 안걸리는지, 어떻게해야 걸 수 있는지 알아..

Figma 활용법 - 2주차 프레임과 그룹의 차이 프레임을 정리하고 정렬하는 법 오토레이아웃과 컨스트레인트를 활용해 레이아웃을 만들고 조정하는 방법 뭐가 다른건데? 코드는 디자인을 박스처럼 쌓는다.(div) 프레임은 컨테이너라고도 불린다. 그룹은 코드블록으로 인식이 되질 않는다. 숙련도가 올라갈수록 그룹을 다루는 경우가 줄어든다. 프레임은 코드블록으로 바뀌어서 개발에 필요한 속성이 적용된다. 프레임: 개별적인 객체로서 존재 그룹: 객체들의 모음으로 개별적인 존재로 취급받지 않음. 모든 변경, 행동은 그룹내 요소에 공통적으로 적용됨. 프레임을 레이어 상에서 정리를 해야한다고? 피그마의 객체들은 점점 위로 쌓이지만, 왼쪽 레이어 창에서는 위에서 아래 방향으로 새 레이어가 추가된다. 정렬은 정렬하려는 근처 가..

보통 도형을 한 번 클릭하면 아래와 같은 화면이다. 그런데, 여기서 한번 더 클릭하면 왠지 누르면 안될거같은 화면이 뜬다. 여기서 한 번 더 누르면 아래와 같은 화면이 뜬다. 강의를 열심히 들어서 이게 뭔지 알아내고 사람들에게 알려줘야지! 하얀 동그라미를 선택하고 늘리면 타원이 된다. 사실, 코딩을 배울때는 각 물체, 오브젝트, 변수, 데이터 등의 실체가 어떻게 변했다는 "상태"를 나타내는 용어를 배우는게 상당히 중요했다. (주변의 독학러들은 이를 간과하고 아리송한 일상어로 자신의 문제상황을 어떻게든 표현하려고 애썼다) 이 상태를 나타내는 용어를 통해 검색을 하거나 문제상황을 표현해 글로벌 프로그래밍 필드에서 도움을 얻을 수도 있었다.

지금 내가 마주한 문제다. 컴포넌트를 복제하여 생성한 인스턴스에서 Ctrl + D 를 누르면 아래로 목록이 자동으로 간격을 벌려 추가가 되어야 하는 상황이다. 문제는 아래처럼 원래 위치 위에 Ctrl+D를 한 것처럼 물체가 겹쳐진다.WTF.. 아래로 예쁘게 간격을 벌리며 복제가 되지 않고 바로 위에 겹쳐버린다.

대박 난감한 상황이 펼쳐졌다. 위와 같이 ppt를 작성하고 있었다. ppt라고? 생각하지 말고 그냥 ui 디자인하다가 위와 같은 문제가 생겼다고 해보자. 사용자 인터뷰 마스터 컴포넌트에 소제목을 추가하려고 한다(사용자 B. 20대 학생(남자). 아래 부분은 사실 컴포넌트 부분과 컴포넌트에 포함되지 않은 소제목이 그럴싸하게 보이는 상황이다. 이런 페이지가 3개가 더 있는데, 컴포넌트에 소제목 부분을 추가하면 나머지 인스턴스들을 다시 다 수정해야하는 상황이다. 어라, 레이어 상에서 추가했더니 별 문제없이 오토 레이아웃이 잘 작동했다. 허허허

1. 아침부터 일이 손에 잡히지 않았다. 이유는 무슨 일을 해야할지 못골랐기 때문. The One Thing : 기획과 의사소통, 전달 실력을 키울것. 디자인 실력도 키울 것. 다시 One Thing : ux 디자인 과정 전달(마치 회사에서 보고한 것 처럼) 그보다 One Thing : 안드로이드 ui 개선작업 진짜 One Thing : 스피커 조작계 디자인 원 씽 : 경험과 욕망 기반 디자인, 그 첫번째 작품은 11번가 결국 11번가 과제를 후다닥 끝내고 하고싶은걸 하기로 했다. 2. 피그마로 디자인 과정 PPT 제작 첫 회사에서 요구했던 것처럼 '왜 이런 생각을 했고, 그 과정에서 어떤 정보를 들었고, 어떻게 해석을 했으며, 무슨 개선을 해야겠다고 가설을 세웠고, 그 가설을 어떤 디자인 원칙에 근거해..