Today하연

오늘 공부할 내용다양한 환경에 대한 UI 차이 이해UI는 사용자의 환경에 따라 다양한 형태로 사용할 수 있다.어떤 환경들이 있는지 살피고, 각 환경마다 UI들이 어떻게 달라지는 알아보기반응형과 적응형의 차이 이해화면의 크기에 따라 유연하게 변하는 디자인을 만드는 방법 알아보기반응형과 적응형의 개념과, 만들기 위한 기준들인 분기점과 그리드 살피기디자인을 구체화하고 시각화 하는 과정디자이너가 관여할 수 있는 문서 대표적인 3가지: 정보 구조도, 화면 흐름도, 와이어 프레임(실제 디자인의 첫 단계라)이 있다.아이디어를 구체화하고 아면 각자 아는 바를 동일하게 맞추고 빠르게 디자인 하기 위해 문서를 작성한다..1. 다양한 환경에 대한 UI 차이 이해1) 웹과 앱의 특성웹과 앱의 차이점을 살피고 적합한 UI를 설..

안녕하세요!하연입니다~ 오늘은 피그마 기초 UI 화면 디자인 실습을 진행해 볼게요!로그인 화면 만들기1. 상세 화면 옆에 같은 사이즈의 프레임을 새로 만들고 프레임 이름을 로그인 화면으로 변경해준다.2. 스테이터스바와 앱 바 컴포넌트를 삽입하고, 상단 모서리에 맞춰준다.3. 텍스트필드 컴포넌트의 인스턴스를 하나 불러오고 하나 더 복사한 다음 적절히 배치한다.4. 두 텍스트필드를 모두 선택한 후, 너비를 적당한 크기로 늘려준다 - 좌우 가장자리로 부터 20씩 마진을 준다.5. 위쪽 텍스트필드의 라벨은 아이디로 아래쪽 텍스트필드의 라벨은 비밀번호로 변경한다.6. 체크박스 컴포넌트의 인스턴스를 불러오고 옆에 '자동 로그인' 텍스트를 작성하고 체크박스와 묶어서 오토레이아웃을 걸어준다. - 프레임 이름을 ..

안녕하세요!하연입니다~ 오늘은 피그마 컴포넌트 마지막과 UI 화면 디자인 실습을 진행해 볼게요!컴포넌트 합치고 분리하기컴포넌트 합치기별개의 컴포넌트들을 하나로 합치는 방법 알아보기 1) 컴포넌트 3개를 만들고 각각 컴포넌트로 변경한다. 2) 컴포넌트 3개를 모두 선택하고 우측 컴포넌트 패널에 Combine as variants를 선택한다. - Combine as variants은 선택한 컴포넌트들을 새로운 컴포넌트의 배리언츠로 묶는 기능이다. => 결과별개 컴포넌트들을 하나로 결합하면 새로운 컴포넌트가 되고, 합쳐진 컴포넌트들은 새 컴포넌트의 배리언츠로 변경된다. 3) 새로운 컴포넌트를 만들고 새로운 컴포넌트를 드래그해서 컴포넌트 안으로 옮겨 넣으면 파란색으로 하이라이트 되면서, 컴포넌트 안으로..

안녕하세요!하연입니다~ 오늘은 피그마 기초 완전 정복 4주차 강의 컴포넌트 프로퍼티에 대해서 정리해 볼게요!2) Instance swap(인스턴스 스왑)기능: 인스턴스를 다른 인스턴스로 교체하는 기능, 인스턴스를 인스턴스가 아닌 것으로 바꿀 수 없다.컴포넌트 안에 다른 컴포넌트의 인스턴스가 있는 경우 또 다른 인스턴스로 교체할 수 있고 주로 버튼 안의 아이콘, 팝업 안의 버튼 등을 교체할 때 사용한다.예시) 버튼 안에 있는 아이콘에 인스턴스 스왑을 적용하면 다른 아이콘으로 변경하기 쉽다.=> 반드시 인스턴스를 인스턴스로만 변경 할 수 있다. 3) Text(텍스트)- 컴포넌트 안에 있는 텍스트를 수정하기 쉽도록 컴포넌트 속성으로 만들어준다.- 텍스트에 텍스트 프로퍼티를 적용하면, 텍스트 편집을 좀 더 ..

안녕하세요!하연입니다~ 오늘도 오후 2시부터 오후 6시까지 사전 캠프를 진행했어요!그럼 어제에 이어서 피그마 강의 3주차 내용 유효성 검사를 하는 이유 부터 정리해 볼게요! 유효성 검사를 하는 이유사용자는 앱을 사용하면서 달성해야하는 목적을 가지고있는데 커머스라면 구매를 해야 하고, 커뮤니티라면 소통을 해야 하는 것을 의미한다.이때 구매나 소통의 과정을 방해하는 요소가 많다면, 사용자는 점점 줄어들 것이다.따라서 구매나 소통 과정을 방해하는 순간이 없는 것도 중요하지만, 방해가 발생했을 때 자연스럽게 피하거나 해결할 수 있도록 도와주는 것 역시 중요하다.유효성 검증은 그 적절한 문구와 안내를 담당하는 중요한 부분이다.유효성 검사 시 주의 사항오류는 부정적인 인식을 주는 요소기 때문에. 오류가 발생하더라도..

안녕하세요!하연입니다~ 오늘도 오후 2시부터 오후 6시까지 사전 캠프를 진행했어요!그럼 어제에 이어서 피그마 강의 3주차 내용을 정리해 볼게요! 컴포넌트의 개념 컴포넌트는 구성품이라는 뜻을 가지고있다.UI디자인에서 컴포넌트는 파운데이션을 조합해 만들어지는 구성품을 이야기한다.컴포넌트라는 표현은 디자인과 개발에서 모두 쓰이는 매우 넓은 개념의 표현이다.디자이너에게 컴포넌트란 '피그마로 만든 UI블록'과 같은 말로 쓰이며 UI디자인에서 컴포넌트는 파운데이션을 조합해 만든 디자인 단위의 개념이다.하지만 개발에서는 맥락에 따라 개념이 조금씩 달라지고 따라서 컴포넌트라는 표현을 쓸 때는 서로 같은 걸 의미하는지 확인하고 사용해야 한다.마스터 컴포넌트(Master Component)마스터 컴포넌트는 피그마에서 쓸 ..

안녕하세요!하연입니다~ 오늘도 오후 2시부터 오후 6시까지 사전 캠프를 진행했어요!그럼 지금부터 피그마 강의 3주차 내용을 정리해 볼게요!오늘의 수업 목표!UI 디자인 환경을 이해하고 적합한 디자인 원칙을 수립할 수 있다.피그마에서 스타일을 생성하고 관리할 수 있다.컴포넌트의 개념을 이해하고 기능 및 형태에 따라 분류할 수 있다.파운데이션 파운데이션 뜻UI를 구성하는 가장 작은 알갱이자 기초 재료인 파운데이션을 의미한다. UI는 버튼, 체크박스나 라디오, 탭 등 우리가 화면에서 볼 수 있는 모든 요소를 뜻한다.UI는 기초 재료인 파운데이션과, 파운데이션을 조합해 만든 컴포넌트로 나눌 수 있다.버튼이라는 컴포넌트를 만들기 위해서는 파운데이션을 우선 만들어야 한다.모든 컴포넌트들은 이 파운데이션 요소를 조합..

안녕하세요!하연입니다~ 오늘도 오후 2시부터 오후 6시까지 사전 캠프를 진행했어요!이번 주는 사전 캠프 마지막주에요! 저는 늦게 신청해서 처음부터 수업에 참여하진 못했지만 정규 수업 전 사전캠프 마지막주인 만큼 더 열심히 강의를 들어볼게요! 오늘은 2주 차 강의를 완강으로 목표를 잡고 강의 듣기를 시작했고강의를 들으며 공부한 내용을 정리해 볼게요!   디자인이 코드로 변하는 과정1) 디자인을 코드로 변환한다.  2) 코드는 디자인을 레고처럼 쌓는다.   - 코드는 기본적으로 네모난 박스 영역을 만들어서 박스 모델이라고 한다. 3) 웹과 앱은 코드를 읽고, 디자인으로 다시 바꿔서 화면을 보여준다.==> 따라서 UI를 설계할 때는 코드로 변환할 수 있는 구조로 만들어야 한다. 프레임과 그룹프레임(Frame)..

안녕하세요!하연입니다~ 오늘도 오후 2시부터 오후 6시까지 사전 캠프를 진행했어요!이제는 스파르타 코딩 클럽에서 제공해주는 피그마 강의를 수강하기 시작했어요!오늘은 1주차 강의를 듣고 과제도 제출했답니다 :) 이제부터는 오늘 공부한 내용을 정리해 볼게요! 피그마란 무엇인가?피그마는 제품을 만드는 모든 사람을 위한 협업 도구입니다피그마는 다들 너무 잘 알고 있는 디자인 툴이자 협업 도구로 디자이너를 중심으로 개발자와 기획자, 마케터 등 모든 직군들이 같은 화면을 보며 작업을 할 수 있게 만들어진 툴이에요! 피그마의 특징은 언제 어디서나 웹에서도 사용이 가능해서 접근성이 좋고, 맥과 윈도우 모두 사용이 가능해요~또한 디자인 툴로 시작했지만, 지금은 개발자까지 아우르는 종합 협어 툴로 이용되고있어요심지어 절반..

안녕하세요~ 하연입니다! 취준 생활을 하다가 협업 프로젝트 경험을 하고 싶어서어제 내일배움캠프라는 곳에 지원하고 바로 서류합격을 해서오늘부터 11일까지 매일 오후 2시부터 오후 6시까지 팀을 이루어서 각자 또 같이 협업을 하면서 프로젝트를 준비하는 과정인데 11일까지는 정규 수업이 아닌 사전 캠프로 정규 수업에 들어가기 전에 미리 팀원들과 친해지고 공부하는 습관을 가지기 위한 사전 캠프랍니다~! 오늘 너무 떨리는 마음으로 메타버스에 접속해서 첨음 팀원들을 만났는데좋은 팀원들을 만나서 앞으로 프로젝트를 이어가는데 서로 많은 도움을 줄 수 있을 거 같아서마음이 편했답니다 :) 아직은 어색하지만 앞으로 더 소통하고 같이 협업하면 더 친해지고 서로들에게 좋은 시너지를 줄수있을거같아요! 첫날인 오늘은 간단하게 이..