처음 웹디자인 시작할 때, 이거 하나만 따라 해보세요. 복잡한 이론 없이 실전으로 배우는 초간단 실습 가이드!
웹디자인에 관심은 많은데 어디서부터 시작해야 할지 모르겠는 분들 많으시죠? 처음엔 HTML, CSS라는 단어만 들어도 머리가 아픕니다. 근데 진짜 중요한 건, 책 몇 권보다 작은 실습 하나라는 걸 깨달았죠. 오늘은 복잡한 코드 없이도, Figma 같은 툴 하나만으로도 충분히 가능한 웹디자인 기초 실습을 안내해드릴게요. 실제로 따라 하면서 배워볼 수 있게 준비했으니, 손가락만 움직이면 됩니다!
웹디자인 실습, 왜 필요한가?
웹디자인은 머리로만 배우는 게 아니에요. 눈으로 보고, 손으로 클릭하고, 직접 움직이면서 익혀야 내 것이 됩니다. 실습은 디자인 감각을 키우는 최고의 트레이닝이에요. 이론은 이해했는데 막상 만들려면 막막한 이유? 실습이 부족해서입니다. 연습을 통해 감각도, 속도도, 퀄리티도 함께 올라가요.
Figma 설치 없이 시작하기
Figma는 웹 기반이라 설치 없이 바로 실습이 가능해요. 아래 기본 정보를 참고해서 계정만 만들면 지금 바로 시작할 수 있습니다.
| 구분 | 내용 |
|---|---|
| 접속 링크 | https://www.figma.com |
| 가입 방법 | 이메일 또는 구글 계정으로 1분 안에 완료 |
| 설치 필요 여부 | X (브라우저에서 바로 사용) |
로그인 화면 만들기 실습
가장 기본적인 실습은 로그인 화면이에요. 사용자가 가장 먼저 마주하는 화면이자, 기능과 미감을 동시에 테스트할 수 있는 훈련장이죠.
- Frame(화면) 생성 – 390x844 사이즈 추천
- 로고 및 안내 텍스트 배치
- 이메일/비밀번호 입력 필드 생성
- 로그인 버튼 만들고 컬러 스타일 적용
- 회원가입, 비밀번호 찾기 링크 추가
그리드 기반 레이아웃 구성
디자인의 기본은 ‘정렬’입니다. 아무리 좋은 색, 폰트를 써도 정렬이 안 되어 있으면 완성도가 떨어져 보여요. Figma에서 Grids와 Auto Layout을 활용해서 정돈된 화면을 만드는 실습을 해볼게요.
| 기능 | 역할 |
|---|---|
| Grid 설정 | 정렬 기준선을 통해 배치 정렬을 시각화 |
| Auto Layout | 컨텐츠가 늘어나도 자동 정렬 유지 |
완성한 디자인 저장하고 공유하기
디자인이 끝났다면 이제 다른 사람들과 공유할 차례! Figma는 저장, 링크 공유, PNG/PDF/코드 추출까지 다양하게 지원돼요.
- 링크 공유: 상단 공유 버튼 클릭 → 보기/편집 권한 선택 후 링크 복사
- 이미지 저장: 우클릭 → Export as PNG
- 개발자 전달: Inspect 탭에서 코드 정보 확인 가능
다음 단계로 이어지는 학습법
첫 실습을 마쳤다면, 이제 다양한 화면 구성으로 확장해보세요. 홈 화면, 마이페이지, 상품 리스트 등 페이지 별로 하나씩 디자인을 늘려가는 게 가장 좋아요. 그리고 꼭! 다른 사람 디자인을 많이 보고, 따라 해보고, 비교하면서 실력을 키워가세요.
- Figma 커뮤니티 템플릿 탐색
- Notion으로 프로젝트 정리 및 포트폴리오화
- 디자인 리소스 사이트(Dribbble, Behance) 주기적 참고
꼭 그렇진 않아요! XD, Canva 등도 있지만 Figma는 무료, 웹 기반, 협업 지원 면에서 가장 초보자 친화적이에요.
홈페이지 메인, 마이페이지, 프로필 편집 화면 등이 대표적이에요. 구성요소가 적당하고 활용도가 높거든요.
박스를 그룹 지은 뒤 Auto Layout을 적용하면 내부 요소가 자동 정렬돼요. 위아래 간격, 정렬 방향 등을 조절해보세요.
Figma 계정 안에 자동 저장돼요. 실수로 닫아도 걱정 없고, 버전 히스토리도 남기 때문에 안전하게 보관됩니다.
Figma는 링크 권한 설정이 가능해요. '보기만 허용', '편집 가능' 등으로 공유 범위를 세분화할 수 있어요.
정말로 그래요! 눈에 보이는 변화는 느리지만, 어느 순간 “어? 나 이 정도는 쉽게 하네?” 하는 날이 와요.
지금 이 순간, 당신이 만든 첫 로그인 화면이 바로 디자인의 시작입니다. 잘 만들었든 아니든 상관없어요. 실습을 하면서 배우는 것만큼 확실한 학습은 없거든요. 오늘 한 걸 내일 한 번 더 해보고, 이번 주에 한 번 더 리디자인해보세요. 반복은 언제나 최고의 선생님입니다. “나도 할 수 있다”는 자신감을 얻었다면, 이미 절반은 성공한 거예요. 다음 실습도 함께 해봐요!