[UIUX] 3-1

포토샵
- 레이어스타일
레이어스타일이란 레이어에 다양한 효과를 적용하는 기능으로 주로 아래 3가지가 많이 쓰인다. 도형뿐 아니라 도형, 문자, 사진 등 모든 레이어에 적용가능하다.

• stroke : 도형의 테두리를 만드는 효과로 선, 그라데이션, 패턴으로 스트로크를 그릴 수 있다.
• color overlay : 선택하는 색상을 한 겹 깔아주는 효과
• drop shadow : 그림자효과

코딩

- HTML

HTML 이란 Hyper Text / Mark up / Language 의 약자로
tag 여러 개가 모인 하나의 문서라고 볼 수 있다.

- tag

<요소(tag의 이름)>내용</요소>
<>부분은 보여지지않고, 내용부분만 브라우저내에서 보여진다.
내용부분에 또 다른 <>도 가능
/ : 문장의 마침표

• 일반태그 : 태그 이름은 앞뒤 항상 동일하게 기재해야한다.
  앞 요소는 열린 태그, 뒤에 /요소는 닫힌 태그라고 부른다.
• 단독태그 : 혼자서 기능을 하는 태그로 < /br > 이런식으로 기재한다.

- tag 의 성격

• inline 속성 : 보통 상자 안에 글 컨텐츠 역할 / 가로방향으로출력되며 너비 높이값이 없다.
• block 속성 : 큰 상자 틀 역할 / 세로방향으로 출력되며 너비 높이값을 가질 수 있다.
  (글자여도 제목과 같은 글씨들은 block 속성 이기도 함)
• inline-block 속성 : 대표적으로 이미지태그 / 가로방향으로 출력되지만, 너비 높이값을 가질 수 있다.

실무용어

- FTP : 로컬에서 작업한 내역을 서버로 간편하게 올려주는 프로그램이다.
- PL / PM : Project Leader (해당 직군의 총 책임자) / Project Manager (해당 프로젝트의 총 책임자)
- SVN : '소스버전관리'를 통칭하는 단어
- Update : 다른 사람이 수정, 배포한 소스를 내 로컬에 덮어씌우는 작업
- Commit : 내가 생성한 소스를 배포할 때 사용하는 작업

피그마
- Clip content
이 기능이 체크되어있으면 프레임을 벗어나는 영역은 알아서 감춰준다. 디자인툴의 클리핑마스크처럼 사용할 수 있다. 이 때, 아래의 프레임부분이 액자 즉 사진틀이기 때문에 꼭 여기에 체크가 되어있어야 한다.
(사진들에 체크되어있으면 작용x)

-Constaints
피그마의 포지션 패널에 있는 기능으로, 프레임안의 도형이 어디를 기준으로 이 길이를 유지하겠다 하는 기능이다. 예를들어, 프레임안의 도형의 constraints를 전부 center로 두면 프레임을 늘리거나 줄여도 도형은 항상 가운데에 위치한다. 이는 반응형 UI를 만들때도 적용할 수 있다.

- Outline stroke (Ctrl+Alt+O)
외곽선을 추출하는 기능으로, 선으로 그려진 아이콘을 면으로 변경하거나, 텍스트 형태 그대로 오브젝트화시킬 때 사용한다. Corner radius가 설정되어 있는 경우 둥근 모양을 패스와 커브로 변경한다.

- Flatten (Ctrl + E)
여러 레이어를 하나의 레이어로 통합시키며, 동시에 벡터정보를 초기화하는 역할을 한다.
(각도 및 Corner radius를 현재 적용된 모습 그대로 유지하면서 수치만 0으로 초기화시킨다.)
Pathfinder가 적용된 레이어를 정리하거나 다른 레이어에 있는 패스를 하나로 연결하기 위하여 사용한다.