@web's Tutorial by.yuna

웹&앱 디자인 시 사용하는 강추 플러그인

WEB'sYN — Fri, 21 Nov 2025 13:38:39 +0900

* 피그마 플러그인 및 위젯 실행 및 검색방법

* 피그마 자주 사용하는 플러그인 저장방법

원하는 플러그인 검색 (플러그인 및 위젯 탭에서)
원하는 플러그인 목록을 선택

저장을 누르면 앞으로 검색 없이 플러그인 탭에서 바로 볼 수 있습니다.

자주 사용하는 Git 명령어 모음

WEB'sYN — Sun, 23 Feb 2025 13:17:02 +0900

로컬 저장소 만들기	git init
	git init 경로명
깃 상태 확인(작업 디렉터리 상태)	git status
깃 저장소 복제	git clone 원격저장소URL
파일 등록과 커밋	git add 파일명
	커밋 git commit -m 메세지
로그 확인	git log
로그 확인 - 한줄 조회	git log --oneline
로그 확인 - 변경사항 목록 조회하기	git log --patch git log -p
로그 확인 - 그래프로 조회하기	git log --graph
로그 확인 - 커밋 목록 조회하기	git log --branches

커밋 비교	git diff
원격 저장소 별칭 확인	git remote
원격 저장소 별칭 확인 & URL 확인	git remote -v
원격 저장소 연결	git remote add 원격저장소 URL
원격 서버 삭제	git remote rm 원격저장소별칭
커밋 가져오기	git pull 또는 git fetch
커밋 전송하기	git push 원격저장소별칭 브랜치명
현재 브랜치 확인	git branch
브랜치 생성	git branch 브랜치명
브랜치 이동	git checkout 브랜치명
스테이지 저장	git stash
스테이지 읽기	git stash pop
브랜치 병합	git merge 브랜치명
리베이스 병합	git rebase 브랜치명
리셋	git reset 옵션 커밋ID
리버트 취소 커밋	git revert 커밋위치
태그 관리	git tag
태그 관리 - 조회	git tag --list git tag -l
태그 관리 - 삭제	git tag --delete 태그 git tag -d 태그
태그 전송	git push 원격저장소별칭 태그명
서브 모듈 연결	git submodule add 원격저장소URL 폴더명

figma & figzam UI 살펴보기

WEB'sYN — Thu, 7 Nov 2024 11:23:05 +0900

figma UI 살펴보기

Design file → UI 웹앱애플리케이션 제작 하기 위한 생성버튼
FigJam board → 카드소팅, 브레인라이팅 등 UI 아이디어 설계 등
진행 시에 사용하는 피그잼 생성버튼
Recents → 최근 작업 파일 보기
Teams → 동일 피그마 파일을 놓고 협업하는 프로젝트가 있을 경우(유료)
Drafts → 피그마, 피그잼 생성 파일을 저장하는 초안 저장소(유/무료 사용자)
Favorite files → 피그마, 피그잼 즐겨찾기 리스트 보기

피그잼 figjam UI 살펴보기-1

Marker(M) → 연필, 형광펜, 장식테이프, 지우개, 크기, 색상 선택 제공
도형 → 사각형, 원, 마름모, 삼각형, 그 외 다양한 형태를 색상과 함께 제공
Sticky Note → 메모지 기능 제공(드래그 또는 화면 클릭해서 사용)

Figma 프로젝트(&초안) 목록 우클릭 메뉴

Open → 파일 열기 (더블클릭과 동일)
Open in new Tab → 새 탭에서 파일 열기
Add to your favorites → 즐겨찾기 등록하기
(우측 상단 별 클릭도 가능)
Copy link → 클립보드 링크 주소 복사
Share → 링크 주소 복사(권한 설정 및 세부 설정 가능)
Duplicate → 복제하기(파일명 (copy) 자동생성)
Rename → 이름 변경하기
Move file → 위치 이동하기(유료)
Delete → 삭제하기

Figma Design 생성 UI 살펴보기

피그마 메뉴 열기 - 저장, 편집, 열기, 플러그인 등 기본 메뉴
선택(V), 크기(K) - 오브젝트 선택과 크기 조정
프레임(F), 섹션(Shift+S), 자르기(S)
다양한 도형 그리기, 이미지(Ctrl+Shift+K) 삽입
펜툴(p), 연필(Shift+p) 기능
문자 작성(T)
컴포넌트, 플러그인, 위젯 기능(Shift+i)
화면 이동(H)
의견(feedback) 작성(본인 또는 타인 작성 가능)(C)
저장위치/파일명(파일명 클릭해서 이름 변경)
현재 피그마 화면을 보고 있는 사용자(스포트라이트 기능 협업 시 유용)
외부 주소 퍼가기(권한, 대상 설정 가능)
디자인 모드 / 개발자 모드 변경(shift+D)
프로토타입 미리보기(Ctrl + Alt + Enter)
화면 비율 조정(실제크기보기100% == Ctrl + 0)

정렬(왼쪽, 가운데, 오른쪽, 위, 중앙, 아래)
프레임 가로 세로 방향 설정
X, Y 좌표
W, H 가로세로 크기(비율 고정 유무)
회전 각도, 모서리 둥글기
정해진 컨텐츠 크기 안에서만 요소 보기 체크

Layer 레이어 정보(블렌딩 모드/투명도0~100)
Fill 면 색상/투명도/보기 유무
Stroke 선 색상/투명도/선방향/선두께/선유무
Selection Colors 선택 대상 색상정보 보기
Effects 그림자, 흐림 효과 설정
Export PNG, JPG, PDF, SVG 파일 내보내기

Visual Studio Code 터미널 gitBash 기본값 설정하기

WEB'sYN — Wed, 21 Aug 2024 14:27:20 +0900

프로그래밍 언어를 조금이라도 다뤄봤다면

VS code에서 한번 쯤 터미널을 실행할 때

powershell에서 gitBash로 번거롭게 설정하는 경험 한번 쯤 있으셨을 겁니다!

아래 방법을 따라하면서 gitBash 기본값으로 터미널이 실행되도록 해보세요!

git 설치가 먼저 되있어야 합니다! git 설치바로가기

Git - Downloading Package

Download for Windows Click here to download the latest (2.46.0) 32-bit version of Git for Windows. This is the most recent maintained build. It was released 22 days ago, on 2024-07-29. Other Git for Windows downloads Standalone Installer 32-bit Git for Win

git-scm.com

1. Vs code에서 아래 단축키를 이용하여 설정 창을 실행하세요.

Ctrl + ,

2. 설정창 입력 창에 아래와 같이 입력하세요(복붙)

terminal.integrated.defaultprofile

3. 검색 화면 중 아래 스샷과 같은 Windows의 기본 터미널 설정 위치에 null을 Git Bash로 변경하세요.

4. VsCode를 종료 후 재실행 후 Ctrl + j 를 눌러 터미널을 실행하여 GitBash로 변경된 부분을 확인하세요!

리액트 React란?

WEB'sYN — Mon, 1 Jan 2024 20:55:39 +0900

공식 리액트 웹사이트

https://ko.legacy.reactjs.org/

React – 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리

A JavaScript library for building user interfaces

ko.legacy.reactjs.org

리액트란?

웹과 네이티브 사용자 인터페이스를 위한 자바스크립트 UI 라이브러리입니다.

자바스크립트 UI 라이브러리는 리액트 외에도 다양한 라이브러리가 존재합니다.

대표적으로 리액트 포함 앵귤러, 뷰, 제이쿼리가 있습니다.

Angular → Google의 Angular팀이 개발 후 2016년에 공식출시한 프레임워크
Vue → AngularJS 프로젝트에서 기반하여 Evan You가 2014년 출시한 프레임워크
React → Facebook에서 2013년 출시한 프레임워크.
Jquery → John Resig에 의해 2006년 개발되어 공식 발표된 DOM 이벤트처리를 간편하게 해주는 프레임워크

웹 개발에 사용되는 접근 방식

SSR(Server Side Rendering) : 전통적인 방식으로 서버에서 HTML을 요청하여 브라우저로 전송한다.
CSR(Client Side Rendering) : 초기 HTML만 서버에서 전송 후 이후 필요한 콘텐츠만 자바스크립트로 렌더링된다.
SPA(Single Page Application) : 모든 동적 리소스를 불러온 후 필요한 부분만 비동기적으로 처리한다.(리액트, 뷰, 앵귤러 해당)

리액트 설치하기

1. vs code 작업 폴더를 연결하세요.

2. 터미널(Ctrl+J) 입력 칸에 다음과 같이 입력하세요. app 뒤에 (.) 이란 현재 폴더에 생성하란 뜻입니다.

npx create-react-app .

리액트 실행하기

터미널에 아래와 같이 입력하면 http://localhost:3000/ 기본 주소로 실시간 실행결과가 나타납니다.

npm run start

2023~ 웹 과정 학생포트폴리오 모음

WEB'sYN — Fri, 19 May 2023 15:34:19 +0900

2023/5~2023/10

1	김윤배	http://entia.pe.kr/portfolio/portfolio_2023/index.html
2	우미선	http://seon0122.pe.kr/portfolio_2023/index.html
3	김유선	http://yusunnn0913.pe.kr/portfolio_2023/index.html
4	박소연95	http://sysy0313.pe.kr/portfolio_soyeon/
5	강수빈	https://portfoliosubin.netlify.app/
6	문준경	http://moon1126.pe.kr/portfolio_2023/index.html
7	김경희	https://www.notion.so/WebDesigner-056f821c2ead47acbf52969a0a988ea3?pvs=4
8	남보라	https://boraportfolio2023.netlify.app/
9	성다연	https://2023-dy.netlify.app/
10	이지윤	https://wldbs2023portfolio.netlify.app/
11	이소민	iso-design.pe.kr/portfolio_iso
12	김은하	http://eunha.pe.kr/portfolio_2023/index.html
13	박소연96	https://portfoliosoyeon.netlify.app/
14	류어진	https://2023ryueojin-portfolio.netlify.app/
15	김혜빈	https://url.kr/jnsu9x
16	최세은	http://choiseeun.pe.kr/portfolio_2023/index.html
17	김은정	https://ordinary-titanium-145.notion.site/webDesigner-3059f10b84404b07bcf7953ed4a73f01?pvs=4
18	정찬용	http://jline.pe.kr/portfolio/index.html#home
19	배복선	https://holy-number-6ac.notion.site/webDesigner-6efed47ff15a4a50b5210f30b964b564?pvs=4
20	남하늘	http://haneuln9.pe.kr/portfolio_page/index.html
21	이재광	https://vine-jumper-85b.notion.site/webDesigner-e685f6a1c4064bc2b6339773ac6b5934?pvs=4
22	백장미	https://roseportfolio2023.netlify.app/
23	임지우	https://jiwoportfolio.netlify.app/

수강후기

2023/1~2023/5

1 김규리 http://bitgyu919.com/portplio/
2 김도연 http://hitthetop-d.com
3 김민정 http://min-magazine.pe.kr/Portfolio/
5 박찬호 http://asval.dothome.co.kr/project_main/
6 신은지 http://dkdkfoo1.dothome.co.kr/portfolio/
7 윤서영 http://syyoon1117.dothome.co.kr/portfolio/portfolio/
8 이수정 http://munmu.dothome.co.kr/portfolio/
9 이용원 http://yongyaa.pe.kr/portfolio/index.html
10 이종재 http://jongjealee.dothome.co.kr/my_page/
12 조다영 http://cladayso.com/portfolio/portfoliopage/
13 최현아 http://no1choi.com/portfolio/main1.html

변수문법을 활용한 SCSS 작성 - 컴파일 - CSS연결까지

WEB'sYN — Wed, 15 Mar 2023 15:17:32 +0900

css 전처리로 사용할 style.scss 파일을 생성하세요.
scss의 기본문법 중 변수 선언을 이용한 방법으로 primary-color 작성하세요.
body 선택자에서 원하는 속성으로 변수를 호출하세요.

$primary-color: #eee;

body {
    background-color: $primary-color
}

터미널을 실행하세요.
sass <컴파일할 scss파일명> <컴파일후 css파일명> 문법에 맞게 작성하세요.
컴파일된 css 결과 파일을 확인하세요.

sass style.scss style.css

html 외부 스타일시트로 컴파일한 css 연결하세요.
적용한 웹 결과를 확인하세요.

<link rel="stylesheet" href="./styles/style.css">

(선택) 실시간 컴파일하기

실시간 컴파일을 위해 vs code 플러그인 “Live Sass Compiler” 설치하세요.

컴파일을 1번 이상 진행 후 vs code 하단 Watch Sass로 실시간 컴파일 진행세요.

실시간 추적중인 플러그인 상태

실시간 추적 해제된 플러그인 상태

SCSS 문법 이해하기

WEB'sYN — Wed, 15 Mar 2023 15:10:02 +0900

1. 변수(Variables)

$ 이용 변수 선언, 자주 사용하는 색상, 글꼴등을 변수에 등록하여 변수명 호출로 이용할 수 있습니다.

같은 값을 반복해서 적지 않아도 되므로 코드를 간결하게 만들 수 있습니다.

변수명은 의미적으로 작성합니다. ex) font_size, primary_color
변수명은 $으로 시작합니다.
변수명은 소문자로 작성하며 여러단어가 합쳐진 경우 -, _를 사용합니다.

$primary-color:#ff0
nav {background-color:$primary-color}
nav a {color:$primary-color}

2. 중첩 규칙(nesting)

부모 요소의 선택자를 반복적으로 적을 필요 없이 태그 관계처럼 구성이 가능합니다.

코드의 가독성을 높이고 들여쓰기를 통해 쉽게 파악할 수 있게 합니다.

nav {
	ul {
		margin:0; padding:0;
	}
}

3. 믹스인(Mixins)

CSS 규칙 재사용 가능한 스타일 규칙을 정의하여 이용할 수 있습니다.

mixin키워드 이용 정의 후 include 키워드로 호출합니다.

코드의 중복을 줄이고 유지보수를 용이하게 만듭니다.

@mixin text-truncate {
	overflow:hidde;
	text-overflow:ellipsis;
	whitep-space:nowrap;
}

.title { @include text-truncate; }

4. 상속(Extend)

extend 키워드 이용, 공통스타일을 부모 선택자에 정의하고 자식에게 상속 시킵니다.

button {
	border:none;
	border-radius:5px;
	padding:10px;
}

.submit-button { @extend button; }

Scss(Sass) 설치 - PATH설정

WEB'sYN — Wed, 15 Mar 2023 14:11:15 +0900

https://rubyinstaller.org/downloads/

Downloads

Which version to download? If you don’t know what version to install and you’re getting started with Ruby, we recommend that you use the Ruby+Devkit 3.1.X (x64) installer. It provides the biggest number of compatible gems and installs the MSYS2 Devkit

rubyinstaller.org

1. 운영체제 버전에 맞는 Ruby를 받고 설치합니다.

* WITH DEVKIT 버전이 써있는 걸로 받으세요. 64비트의 경우 => x64

2. 설치 완료 후 터미널을 실행하고 루비 설치 버전을 확인합니다.

ruby -v

3. sass를 설치합니다. *1~2분 걸릴 수 있습니다.

gem install sass

4. sass 버전을 확인합니다.

sass -v

5. PATH 설정을 하기 위해 sass 설치 경로를 확인합니다. (결과 복사)

gem which sass

6. 5번에서 복사한 주소를 다음 명령어 뒤로 붙여넣기 합니다(마우스 우클릭)

export PATH=$PATH:

7. 같은 방식으로 ruby 설치 경로를 확인합니다 (결과 복사)

which ruby

8. 7번에서 복사한 주소를 다음 명령어 뒤로 붙여넣기 합니다(마우스 우클릭)

export PATH=$PATH:

9. 사용하는 에디터(vs code)를 실행시키고

작업폴더를 연결 후 터미널을 이용하여 ruby, sass의 버전을 인식하는지 확인합니다.

ruby -v
sass -v

10. 모든 준비가 완료되었습니다!! 축하합니다

강력한 CSS 전처리기 = SASS & SCSS

WEB'sYN — Wed, 15 Mar 2023 14:03:54 +0900

강력한 CSS 전처리기 = SASS & SCSS

css 전처리기인 sass, scss는 웹페이지 제작에 있어 강력한 효율을 자랑하지만 2개의 언어의 문법이 다르기 때문에 그 점을 잘 구분하며 이용해야 합니다.

https://opensenselabs.com/blog/tech/nine-ways-write-best-sass-code

SASS는 중괄호와 세미콜론을 생략하고 들여쓰기로 문법을 작성합니다.
SCSS는 중괄호와 세미콜론을 기존 CSS와 동일하게 사용하며 동시에 전처리기 기능으로써의 역할도 수행하기 때문에 SASS보다 쉽게 이용할 수 있습니다.
CSS는 일반적인 CSS화면으로 SASS, SCSS 작성 후 컴파일 하여 CSS로 변환하여 사용할 수 있습니다.
SASS, SCSS는 Ruby를 설치해야 이용할 수 있습니다.

https://www.mugo.ca/Blog/7-benefits-of-using-SASS-over-conventional-CSS

SCSS는 곧바로 HTML로 적용한 결과를 볼 수 없습니다.
SCSS는 컴파일을 통해 CSS로 변환하여 HTML로 연결할 수 있습니다.

SCSS, SASS를 실시간 컴파일 하고 싶다면 VS code에서 위 플러그인을 설치하여 이용할 수 있습니다.