안녕하세요, 주-주스 입니다! 🍹
!!!³✺!~ 캠프 46일차 ~!✺!!!
*⁂((✪⥎✪))⁂*
오늘은
디자이너를 위한 개발 지식디자이너가 알아야하는 개발 지식과, HTML/CSS에 기초에 에 대하여 포스팅하겠습니다!
디자이너를 위한 개발 지식 웹(Web)이란?
개발 지식
웹 Web 이란?
웹은 World Wide Web(Www)의 줄임말로, 전 세계적으로 분산된 수많은 문서와 기타 리소스들이 서로 연결되어 있는 거대한 정보의 네트 워크를 의미합니다. 일반적으로 웹 페이지라고 불리는 문서 형식으로 제공 되며, HTML이라는 마크업 언어 로 작성됩니다. 우리가 흔히 사용 하는 웹 브라우저(Chrome, Safar, Firefox, Edge 등)를 통해 이러한 웹 페이지를 열어 볼 수 있습니다.
초창기 웹 브라우저(1990년, 팀 버너스 리)는 HTML(1991년) 리더기였습니다. 약 20개의 태그만 지원하는 단순한 형태였습니다. 이미지조 차도 별도의 링크를 통해 보여주었죠. 그러나 웹은 빠르게 발전하였습니다.
그 다음 나온 언어가 CSS(1996년) 입니다. CSS는 HTML을 꾸 며주는 역할을 합니다. 그리고 JavaScript(1996년, 브렌던 아이크)는 모카라는 이름으로 처음 넷스케이프 네비게이터2에 탑재되었습니다.
이후 모카는 라이브스크립트로 이름이 바뀌었고, 현재의 자바스크립트로 발전하게 되었습니다.
이렇게 HTML, CSS, JavaScript가 웹을 이루는 가장 기초적인 구성 요소로, 웹 콘텐츠의 의미와 구조를 정의하는 HTML, 웹페이지의 모양/ 표현을 담당하는 CSS, 웹페이지의 기능/동작을 담당하는 JavaScript가 웹을 이루는 가장 기초적인 구성 요소입니다
코드의 종류
웹의 동작
우리는 웹 브라우저로 웹 페이지를 열어 볼 수 있습니다. 웹 브라우저는 사용자가 입력한 주소(URL)를 웹 서버에 요청하고, 서버는 요청받은 웹 페이지 중에 데이터를 조회할 것이 생기면 데이터를 조회하여 사용자에게 전달합니다. 이때 사용자가 보는 웹 페이지는 HTML, CSS, JavaScript와 이미지, 비디오, 오디오 등 다양한 리소스들로 이루어져 있습니다.
프론트엔드와 백엔드
프론트엔드는 사용자 인터페이스(U)를 다루며, 백엔드는 서버와 데이터 처리를 다릅니다. 보통 프론트엔드 개발자는 HTML, css,
JavaScript를 사용하여 사용자가 웹 애플리케이션과 상호작용하고 정보를 볼 때 필요한 모든 것을 다릅니다. 백엔드 개발자는 선호하는 언 어를 선택하여 서버와 데이터 처리를 다룹니다
HTML은 HyperText Markup Language 의 줄임말입니다.
- HTML은 "HyperText Markup Language"의 줄임말로,
- 웹페이지의 구조를 만드는 뼈대 역할을 해요.
- 우리가 보는 웹사이트의 글, 사진, 버튼, 링크 등을
- 어떻게 배치할지 알려주는 언어예요.
- 하이퍼텍스트는 정해진 순서 없이, 참조를 통해 한 문서에서 다른 문서로 접근할 수 있는 텍스트를 의미합니다.
- 여기서 hyper는 "과도한•초월한•최고의"라는 뜻으로, 종이에 인쇄된 텍스트 기술의 한계를 초월한 고차원적인 기술을 나타냅니다.
- HTML은 프로그래밍 언어가 아닌 콘텐츠의 구조를 정의하는 마크업 언어입니다.
HTML은 태그를 사용하여 문서의 구조를 정의합니다. 확장자는. html 이며 이 파일 안에는 HTML, CSS, JS를 모두 작성할 수 있습니다.
• 웹을 이루는 가장 기초적인 구성 요소로, 웹 콘텐츠의 의미와 구조를 정의합니다.
CSS
• CSS는 Cascading Style Sheets 의 줄임말로, 웹페이지의 모양/표현을 담당하는 스타일 시트 언어입니다. HTML이 웹페이지의 구조를 정의한 다면, cSS는 이 구조를 꾸며주는 역할을 합니다.
JS(JavaScript)
• Javascript는 웹페이지의 기능/동작을 담당하는 프로그래밍 언어입니다. HTML과 CSS로는 웹페이지의 모양과 구조를 정의할 수 있지만, 사용 자와 상호장요하거나 도적이 기능을 추가하기 위해서는 JavaScriot가 필요합니다.
개발환경 셋팅
- 크롬 브라우저 설치
- Visual Studio code 설치
- 실습할 프로젝트 폴더 생성
- Vs code 확장 프로그램 설치
비쥬얼 스튜디오 코드
https://code.visualstudio.com/
Visual Studio Code - The open source AI code editor
Visual Studio Code redefines AI-powered coding with GitHub Copilot for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows.
code.visualstudio.com
오늘의 실습 !
⭐️[과제 01]
html 태그내용 복습해보기 <올려보기!>
http://127.0.0.1:5500/class.html
⭐️[과제 02] (선택)
배지(Badge) UI Design
- 배지는 사용자가 플랫폼에서 활동한 연수, 달성한 업적 등 다양한 기준으로 부여될 수 있습니다.
- 배지는 재미 요소가 될 수도 있고, 유용한 정보를 제공할 수도 있습니다.
NIGHT OFF' 뱃지 시스템 기획안
1. 뱃지 시스템의 핵심 목표 (기획 의도)
'NIGHT OFF'의 뱃지 시스템은 경쟁과 점수(Score)를 위한 것이 아닙니다. 이는 사용자의 작은 성공을 '기념(Commemorate)'하고, 수집의 즐거움을 통해 '긍정적인 감정(Lovable)'을 강화하며, '자기돌봄'의 여정을 시각적으로 보여주는 '수집형 보상(Collectible Rewards)' 시스템입니다.
- 핵심 콘셉트: "사용자가 모아가는 부드러운 달빛 조각"
- 디자인 톤앤매너: 앱의 메인 컬러(인디고, 퍼플)를 기반으로, 은은하게 빛나는 '달빛(연노랑)'을 포인트로 사용합니다. 미니멀하고 부드러운 플랫/글래스모피즘 스타일을 따릅니다.
| 카테고리 | 뱃지 이름 | 획득 조건 | 기획 의도 (Why?) |
AI 시각화 디자인 (How?)
|
| A. 환영 (Onboarding) |
첫 번째 밤 🌙 | 앱 설치 후, 첫 번째 '수면 목표 시간' 설정을 완료했을 때. | 사용자가 앱을 시작하는 '결심'의 순간을 축하하고 첫 번째 긍정적 경험을 제공합니다. |
"심플하고 부드러운 초승달 아이콘. 은은한 노란색 '달빛' 빛(glow) 효과가 더해진 디자인."
|
| 셀프케어 파트너 🤝 | AI 캐릭터의 첫 번째 '수면 유도' 제안에 '휴식하기'로 긍정적으로 응답했을 때. | 사용자와 AI 캐릭터 간의 '관계 형성'을 기념합니다. '개입'이 '잔소리'가 아닌 '도움'으로 수용된 첫 순간입니다. |
"앱의 마스코트(졸린 고양이)가 사용자에게 손을 내미는(혹은 하이파이브하는) 아이콘. '신뢰'와 '연결'을 상징."
|
|
| B. 연속 달성 (Streaks) |
반짝이는 3일의 달빛 ✨ | 수면 목표 시간(±15분 허용)을 3일 연속으로 달성했을 때. | 습관 형성의 가장 초기 허들을 넘은 것을 축하합니다. '달빛'이 모이기 시작했음을 시각화합니다. |
"작은 별 3개(✨)와 함께 빛나는 반달 아이콘. 3일의 노력을 직관적으로 보여줌."
|
| 한 주의 달빛 | 수면 목표 시간을 7일(일주일) 연속으로 달성했을 때. | 일주일'이라는 의미 있는 단위를 완수했음을 기념하며, 사용자가 자신의 패턴을 인지하게 합니다. |
"환하게 빛나는 보름달(Full Moon) 아이콘. 하나의 완전한 사이클이 완성되었음을 상징."
|
|
| 고요한 밤의 수호자 | 수면 목표 시간을 한 달(30일) 연속으로 달성했을 때. | 장기적인 꾸준함을 달성한 사용자를 위한 가장 명예로운 뱃지입니다. |
"빛나는 보름달을 부드러운 월계수 잎(또는 구름)이 감싸고 있는 디자인. '명예'와 '꾸준함'을 상징."
|
|
| C. 사회적 (Social) |
함께 모은 달빛 🌟 | 친구와 함께 자기' 퀘스트를 설정하고, 친구와 함께 처음으로 동시 목표 달성에 성공했을 때. | 승부욕' 인사이트를 '경쟁'이 아닌 '협동'의 즐거움으로 풀어냅니다. 사회적 동기부여를 강화합니다. |
"두 개의 구름 캐릭터(나와 친구)가 만나서 하나의 빛나는 별(🌟)을 함께 들고 있는 디자인."
|
| 따뜻한 응원 💌 | 친구 응원하기' 기능을 사용하여 친구에게 처음으로 긍정적인 메시지를 보냈을 때. | 사용자의 이타적인 행동(응원) 자체를 보상하여, 선순환되는 커뮤니티 문화를 유도합니다. |
"달빛이 봉인 씰(seal)처럼 찍힌 편지봉투에서 하트(❤️)가 나오는 디자인."
|
|
| D. 특별 업적 (Achievements) |
골든 아워 🌙 | 처음으로 '밤 12시(자정)' 이전에 수면 목표 달성에 성공했을 때. | 일찍 자기'라는 핵심 목표 달성을 위한 강력한 동기부여를 제공하는 히든 뱃지입니다. |
"다른 뱃지와 달리, 특별한 성취임을 나타내는 '골드' 컬러로 빛나는 초승달 아이콘."
|
| 휴식의 달인 | 휴식 모드'를 10회 성공적으로 완료했을 때. (약속한 시간 지키기) | 잠'뿐만 아니라 '잘 쉬는 것'의 가치도 중요함을 강조합니다. ('생산 모드' 외 '휴식 모드'의 가치 부여) |
"AI 캐릭터(고양이)가 구름 모양 해먹에서 평온하게 잠들어 있는 모습의 아이콘."
|
|
| 현명한 쉼표 | 늦은 밤 스마트폰 사용 중, AI 캐릭터의 '개입' 제안을 수락하여 처음으로 '휴식'을 선택했을 때. | 사용자의 '실패(늦게까지 폰 보기)'를 '성공(현명한 멈춤)'으로 바꾼 가장 의미 있는 순간을 기념합니다. |
"은은하게 빛나는 보라색 쉼표(,) 아이콘. '멈춤'의 가치를 상징하며, 실패가 아님을 강조."
|
[과제 03] (선택)
- 프로젝트 시작 전 ui-tips 내용 정리 및 공부하기
- https://www.uidesign.tips/ui-tips
[46일차 소감💚]
- 갑자기 개발자가 된.. 느낌이 났던 수업!! 덕분에 어떻게 코드를 넣어서 진행하는지 이해할 수 있었으며 다음에 혼자서도 응용가능할 것 같습니다! 새로워서 더 즐거웠다고 생각합니다 히히 다음 주면 프로젝트를 시작한다고 말씀해주셨는데.. 이미 프로젝트 2개를 진행하고 있어서 긴장보다는 또 다른걸 만들 수 있다는것에 의미를 두고 긍정적으로 생각하고 있습니다!! 포트폴리오도 잘 만들어야 한다는 것을 강조하셔서 노트폴리오 열심히 봐야겠습니다! 내일도 파이팅!!
= 오늘의 한 마디 =
- 뭐가 됐든 시작이 반이니 열심히 하기!
'프로덕트 디자이너 6기' 카테고리의 다른 글
| DAY+48 [목록 태그, 시멘틱 태그, 폼 태그] (0) | 2025.11.20 |
|---|---|
| DAY+47 [아카이빙 / VS 코드 실습 ] (1) | 2025.11.19 |
| DAY+45 [ AI와 함께 디자인 프로세스 과정] (0) | 2025.11.17 |
| DAY+44 [ 더블 다이아몬드, Khizer Abbas 프롬포트 ] (1) | 2025.11.13 |
| DAY+43 [ EDA / CRISP-DM ] (0) | 2025.11.12 |
