[매력일자리 3주차 복습노트 및 솔직 후기] 피그마 실습부터 미드저니 활용, HTML/CSS 기초까지

안녕하세요! 매력일자리 3주차 강의를 듣고 공부한 내용과 느낀점을 생생하게 정리해 공유합니다. 이번 주차에는 피그마를 활용한 웹 UI/UX 실습부터 미드저니(Midjourney) AI 이미지 생성, 그리고 HTML/CSS 웹퍼블리싱 기초를 다지는 수업이 진행되었습니다. 

1. 피그마 실습: GNB 메뉴, 헤더, 프로그레스바 목업 제작 방법은 무엇일까?

실습에서는 오토 레이아웃, 컴포넌트, 베리언트를 활용해 실제 웹사이트의 상단 헤더 영역과 프로그레스바 UI를 구조적으로 설계하는 방법을 배웠습니다.

1-1) 컴포넌트와 베리언트 주의점

• 반복되는 UI 요소는 처음부터 깔끔하게 컴포넌트로 구조화해야 재사용과 수정이 쉽습니다.
• 만약 인스턴스 내부가 바로 수정되지 않는다면, 인스턴스가 아니라 원본 컴포넌트를 직접 수정해야 전체에 반영됩니다.

1-2) 간격, 타이포그래피 가이드 및 버튼 제작

• 레이아웃 간격: 오토 레이아웃 메뉴 묶음의 내부 간격은 약 8px로 잡고, 배경이나 버튼 사이 간격은 필요에 따라 20px, 40px 등으로 넓게 조절합니다. 요소가 늘어날 때는 깨짐 방지를 위해 max-width / min-width 개념처럼 제한을 고려하고 넘치면 아래 줄로 떨어지게 설계합니다.
• 타이포그래피 예시: 큰 타이틀은 56px, Semi Bold, 하위 텍스트는 28px를 기준으로 디바이스별(모바일, 태블릿, PC)로 크기와 굵기를 다르게 설정합니다.
• 상태 변화 버튼 제작: 텍스트 입력 후 오토 레이아웃으로 감싸고 좌우 패딩을 20px로 설정합니다. 이를 컴포넌트로 등록한 뒤 베리언트(Variants)를 추가해 색상 톤을 조금 더 진하게 조정하면 상태 변화(Hover, Press 등) 버튼 세트를 효율적으로 관리할 수 있습니다.

2. 미드저니로 원하는 UI 디자인 이미지를 얻는 프롬프트와 파라미터 활용법은?

AI를 활용해 디자인 소스나 배경을 제작할 때 사용하는 미드저니의 핵심 개념과 옵션, 그리고 실전 워크플로우를 정리한 가이드입니다.

1) 미드저니 핵심 개념 및 기능 요약

항목	설명
프롬프트	이미지 생성 입력 텍스트. 한글도 가능하나 영어가 더 인식률이 높고 정밀함.
image to image	기존 이미지 URL 입력 또는 드래그 앤 드롭 후 텍스트를 이어 작성하여 변형 요청.
버전 (--v)	--v 6, --v 7 등. 최신 버전일수록 디테일과 스타일이 발전함.
스타일 강도 (--s)	1–1000 사이 값. 높을수록 예술적 스타일 변형이 증가함.
품질 (--q)	--q .25, --q .5, --q 1, --q 2. 값이 높고 시간이 오래 걸릴수록 품질 상승.
시드 (--seed)	같은 시드 번호를 입력하면 일관된 결과를 재현 가능.
카오스 (--chaos)	0–100 사이 값. 높은 값일수록 예측 불가능한 변형 이미지가 생성됨.
No (--no)	특정 요소를 제거할 때 사용 (예: --no text로 텍스트 제외).
Replace (--replace)	특정 배경이나 요소를 교체할 때 사용.
Variations / Repeats	--variation으로 변형 범위 조정, --repeat로 비슷한 이미지 복수 생성.
Image Weight (--iw)	이미지와 텍스트의 영향도 조절 (1 이하 값 설정, 예: --iw 0.8은 이미지 가중치 80%).
Style Options	cinematic, studio, silhouette, dark, light, colorful, textured 등 제공.

2) 파라미터 조합 및 UI/UX 프롬프트 예시

• 프롬프트 구조: <주제> <스타일> + <세부사항> 구조로 영어 작성을 권장합니다.
  • 예시: vintage street music concert, cinematic lighting, low angle, detailed background
• 고급 효과: light/dark 옵션으로 전체 톤을 조정하거나, --replace background:light 또는 --replace background:blue로 배경색을 교체할 수 있습니다. -bg transparent로 투명 배경을 시도할 수 있습니다.

* 디자인 분야별 프롬프트 실제 적용 예시

• 웹디자인: elegant landing page, minimal UI, dark theme, pastel accents
• 모바일 앱: simple mobile app interface, light mode, card UI, sleek icons
• 제품 포토: high‑resolution product photo, studio lighting, white background
• 로고: abstract geometric logo, brand name '****', vibrant colors

3. HTML 텍스트 태그와 목록 구조, CSS 속성으로 웹 UI 구현에 필요한 기초지식은?

1) 특수문자 처리를 위한 엔티티 코드(Entity Code)

HTML에서 <, > 문자는 태그 기호로 오해될 수 있으므로 브라우저가 정확히 해석할 수 있도록 엔티티 코드로 안전하게 표기해야 합니다.

• < : < (less than)
• > : > (greater than)
• © : © (copyright)

2) 구조화를 위한 HTML 텍스트 및 접기 태그

• 약어 태그 (abbr): 축약어를 표시할 때 title 속성과 함께 사용합니다. 마우스를 올리면 전체 의미가 툴팁으로 나타나 가독성과 접근성에 유용합니다.
  • 예시: <abbr title="HyperText Markup Language">HTML</abbr>
• 접기/펼치기 태그 (details / summary): 클릭 시 숨겨진 내용이 펼쳐지는 구조를 만들며 FAQ, 추가 설명, 안내문에 활용됩니다. 요약 제목은 summary에, 본문은 details 내부에 작성합니다.

3) 의미에 따른 목록(List) 태그 분류

태그	유형	설명 및 적절한 예시
ul	순서 없는 목록	나열 자체가 목적일 때 사용하며 검은 점(bullet)으로 표시됨. (예: 메뉴 항목, 기술 목록)
ol	순서 있는 목록	배치 순서나 등수가 중요할 때 숫자로 표시됨. (예: 영화/드라마 순위, 단계별 절차)
dl	정의 목록	용어와 설명을 짝지어 표시함. dt(용어)와 dd(설명)로 구성되어 사전식 정리에 적합.

* 중첩 목록: ul 구조 안에 다시 ul을 넣어 1depth, 2depth, 3depth 형태의 계층적 하위 항목을 표현할 수 있습니다. 

4) HTML 폼(Form) 기초 및 개발

• input과 label: 입력창은 input, 설명 문구는 label 태그를 쓰며, for와 id를 연결해야 텍스트를 클릭해도 입력창이 동작합니다.
• radio button: input type="radio"를 사용하며, 동일 그룹으로 묶으려면 name 값을 같게 설정하고 각 항목의 id는 다르게 부여해야 합니다.
• 프론트엔드와 백엔드: 화면 UI를 만드는 것은 프론트엔드, 데이터를 DB와 연결하는 것은 백엔드(전통적 기술: PHP, JSP, ASP)의 역할입니다. 최근에는 프론트엔드도 React, JavaScript, Firebase 등을 이용해 데이터 처리까지 담당합니다.

5) 핵심 CSS 속성 정리 및 문제 해결 가이드

• 클래스 선택자: .을 사용하여 작성합니다. (예: .box)
• 경로 지정: 현재 위치 기준은 상대 경로(./img/sample.jpg), 전체 주소는 절대 경로를 사용합니다. img src에서 주로 상대 경로를 씁니다.
• 유튜브 삽입: 영상은 공유 -> 퍼가기 기능을 통해 제공되는 iframe 코드를 복사해 삽입합니다. 외부 콘텐츠를 페이지 안에 보여주는 태그입니다.
• HTML 작성 습관: 인라인 요소는 한 줄로 이어지지만 가독성을 위해 구조(여는 태그와 닫는 태그 관계)를 유지하며 줄바꿈해도 무방합니다. src로 외부 리소스를 연결하고 style 속성으로 인라인 스타일을 줄 수 있습니다.

* CSS 배경 및 시각 효과

• background-color vs background: 전자는 배경색만 지정하고, 후자는 색상, 이미지, 반복, 위치 등을 한 번에 지정하는 축약형입니다. 배경 이미지가 반복되는 것은 기본 설정이 repeat이기 때문이며, 꽉 채우려면 cover, 고정 배경 효과를 주려면 background-attachment: fixed를 사용합니다. 위치는 top right, center center 등으로 설정합니다.
• 안쪽 여백 및 그림자: 테두리와의 간격은 padding으로 조절하며, box-shadow는 X축, Y축, blur, color 순서로 그림자를 부여합니다. 모서리는 border-radius로 둥글게 만듭니다.
• opacity, rgba(): opacity: 0.8은 글자까지 전체가 투명해지지만, 배경만 투명하게 만들고 싶다면 background: rgba(255,255,255,0.5) 형식을 사용해야 합니다. 직관적인 색상 조정을 위해 HSL/HSLA(색상, 채도, 밝기, 투명도) 방식도 쓰입니다.
• 팝업/모달 UI 예시: 흰색 배경에 라운드 처리를 하고 내부 여백 약 20px, 글자 크기는 12px 이상으로 설정합니다. 프레임 크기 예시는 315 × 315이며 외곽 스타일이나 그림자(box-shadow)를 주어 시각적으로 강조해야 눈에 띕니다.
• CSS Grid 기초: 부모 요소에 display: grid를 적용하고 grid-template-columns와 grid-template-rows로 행과 열을 직접 정의합니다. 자식 요소들은 부모의 규칙과 gap(간격) 설정에 따라 정렬됩니다. (예: 열 3개 100px auto 100px, 행 2개 50px 100px)

* 색상이나 스타일이 적용되지 않을 때 체크리스트

1. 속성명이 정확한지 확인
2. CSS 선택자가 맞는지 확인
3. 세미콜론(;) 누락 여부 확인
4. 클래스명 오타 확인 및 HTML 요소와 클래스가 제대로 연결되었는지 확인
   (예시 구조: <p class="text">내용</p> 와 .text { color: red; })

4. 자주 묻는 질문 (FAQ)

Q1. 피그마에서 복제한 메뉴(인스턴스)의 내부 속성이나 텍스트가 수정되지 않을 때는 어떻게 하나요?
A1. 반복 사용되는 복제본(인스턴스)은 상위 구조에 묶여 있기 때문에 바로 수정되지 않을 수 있습니다. 이럴 때는 인스턴스가 아니라 원본 컴포넌트를 찾아서 직접 수정해야 전체 복제본에 변경 사항이 올바르게 반영됩니다.

Q2. 미드저니로 웹 UI 배경이나 요소를 만들 때, 이미지 안의 지저분한 글자들을 없애고 싶다면 어떻게 하나요?
A2. 프롬프트 입력 시 제외 파라미터인 --no text 옵션을 추가하면 생성 결과물에서 텍스트 요소를 효과적으로 제거할 수 있습니다.

3주차를 마치며 솔직후기

피그마의 정렬 원리와 오토 레이아웃 구조를 제대로 이해하는 것이 실제 HTML/CSS 코드로 화면을 구현할 때 얼마나 중요한지 깨닫게 된 유익한 시간이었습니다. 미드저니를 활용해 실무에서 이미지를 어떻게 생산하는지 알 수 있었고 웹 퍼블리싱 기초를 배워 이전에 알고있던 내용을 복습할 수 있었던 시간이었습니다. 하지만 경력을 가지고 계신분들은 이미 다 알고 있는 내용이고 완전 처음 이쪽 분야에 접한 사람들을 대상으로 강의를하기 때문에 각자 상황에 따라 듣는 것을 추천합니다.