FAANG의 선임 프론트엔드 디자이너로써 아래 CSS 언어로 작성된 스크립트의 디자인 시스템 겸 명세서를 작성하십시오.
* {
box-sizing: border-box;
}
body {
background-color: #f5f7fa;
font-family: 'Roboto', sans-serif;
margin: 0;
}
.container {
display: flex;
}
.side {
min-width: 320px;
height: 200px;
background-color: #fff;
height: 100%;
min-height: 100vh;
border-right: 1px solid #e1e1e1;
}
.content {
width: 100%;
display: flex;
padding: 20px 0;
align-items: center;
flex-direction: column;
}
.side .header {
background: linear-gradient(262deg, #ff7854, #fd267d);
width: 100%;
height: 80px;
box-shadow: 0 1px 8px 0 rgba(0, 20, 20, 0.2);
display: flex;
align-items: center;
padding: 0 20px;
}
.side .header .avatar img {
width: 40px;
height: 40px;
border-radius: 40px;
border: 2px solid #fff;
box-shadow: 0 1px 8px 0 rgba(0, 20, 20, 0.2);
}
.side .header .title {
padding: 0 10px;
color: #fff;
font-size: 23px;
}
.side .menu ul {
display: flex;
padding: 0 20px;
}
.side .menu ul li {
list-style: none;
margin: 0 10px;
font-weight: 700;
font-size: 15px;
letter-spacing: 0.5px;
}
.side .menu .active {
border-bottom: 3px solid #fd5068;
padding-bottom: 2px;
}
.side .messages {
padding: 10px 20px;
display: flex;
align-items: center;
transition: 0.2s box-shadow;
}
.side .messages .avatar img {
width: 70px;
height: 70px;
border-radius: 70px;
}
.side .messages .user {
padding: 0 10px;
font-weight: 500;
letter-spacing: 0.5px;
font-size: 18px;
}
.side .messages .text {
width: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding: 0 10px;
font-weight: 300;
font-size: 15px;
opacity: 0.8;
}
.side .messages:hover {
box-shadow: 0 0 15px 0 rgba(43, 78, 78, 0.1);
border-right: 5px solid #fd5068;
}
.container .card {
position: relative;
height: 450px;
}
.content .card .user {
width: 380px;
height: 450px;
object-fit: cover;
border-radius: 10px;
box-shadow: 0 1px 10px 0 rgba(0, 20, 20, 0.5);
}
.content .card .user .profile {
position: absolute;
bottom: 0px;
left: 20px;
}
.content .card .user .name {
color: #fff;
font-size: 32px;
font-weight: 700;
letter-spacing: 0.5px;
text-shadow: 1px 1px 5px #444;
}
.content .card .user .name span {
font-size: 26px;
}
.content .card .local {
display: flex;
align-items: center;
padding: 0 0 20px 0;
}
.content .card .local i {
margin: 5px 0;
color: #fff;
}
.content .card .local span {
color: #fff;
padding: 0 10px;
text-shadow: 1px 1px 5px #444;
}
.content .buttons {
margin-top: 10px;
display: flex;
align-items: center;
}
.content .buttons .no i {
color: #fd2e79;
font-size: 33px;
}
.content .buttons .star i {
color: #2bb1ff;
font-size: 22px;
}
.content .buttons .heart i {
color: #11e298;
font-size: 32px;
}
.content .buttons .no,
.content .buttons .star,
.content .buttons .heart {
background-color: #fff;
width: 70px;
height: 70px;
box-shadow: 0 1px 10px 0 rgba(0, 20, 20, 0.1);
display: flex;
justify-content: center;
align-items: center;
border-radius: 70px;
margin: 4px;
transition: 0.2s transform;
}
.content .buttons .no:hover,
.content .buttons .star:hover,
.content .buttons .heart:hover {
transform: scale(1.1);
}
.content .buttons .star {
width: 60px;
height: 60px;
}
디자인 시스템 겸 명세서
공통
모든 요소는 box-sizing: border-box; 속성을 사용하여 크기 조정.
사용 폰트: Roboto.
배경 및 레이아웃
body:
배경색: #f5f7fa.
기본 폰트: 'Roboto', sans-serif.
기본 마진 제거.
.container:
유형: Flexbox.
.content:
유형: Flexbox, 세로 방향으로 중앙 정렬.
내부 패딩: 상하 20px.
사이드바 (.side)
최소 너비: 320px.
배경색: #fff.
높이: 100% 뷰포트.
우측 테두리: 1px 실선, 색상 #e1e1e1.
사이드바 헤더 (.side .header)
선형 그라디언트 배경: #ff7854에서 #fd267d.
높이: 80px.
유형: Flexbox, 수직 중앙 정렬.
내부 패딩: 좌우 20px.
그림자: 상하 1px, 좌우 8px, 퍼짐 0, 색상 rgba(0, 20, 20, 0.2).
프로필 이미지 (.side .header .avatar img)
크기: 40x40px.
원형 모서리.
테두리: 2px 실선, 색상 #fff.
그림자: 상하 1px, 좌우 8px, 퍼짐 0, 색상 rgba(0, 20, 20, 0.2).
타이틀 (.side .header .title)
폰트 크기: 23px.
색상: #fff.
내부 패딩: 좌우 10px.
사이드 메뉴 (.side .menu ul)
유형: Flexbox.
내부 패딩: 좌우 20px.
메뉴 아이템 (.side .menu ul li)
리스트 스타일 제거.
폰트 무게: 700.
폰트 크기: 15px.
간격: 0.5px.
활성 메뉴 아이템 (.side .menu .active)
밑줄: 3px 실선, 색상 #fd5068.
패딩 바닥: 2px.
메시지 (.side .messages)
내부 패딩: 좌우 20px, 상하 10px.
유형: Flexbox, 수직 중앙 정렬.
카드 (.container .card)
높이: 450px.
위치: 상대 위치.
프로필 (.content .card .user)
크기: 380x450px.
객체 적합: 커버.
모서리: 원형 10px.
그림자: 상하 1px, 좌우 10px, 퍼짐 0, 색상 rgba(0, 20, 20, 0.5).
버튼 (.content .buttons)
유형: Flexbox, 수직 중앙 정렬.
위쪽 마진: 10px.
버튼 아이콘 (.content .buttons .no i, .content .buttons .star i, .content .buttons .heart i)
각각의 색상: #fd2e79, #2bb1ff, #11e298.
각각의 폰트 크기: 33px, 22px, 32px.
버튼 백그라운드 및 모양 (.content .buttons .no, .content .buttons .star, .content .buttons .heart)
배경색: #fff.
그림자: 상하 1px, 좌우 10px, 퍼짐 0, 색상 rgba(0, 20, 20, 0.1).
원형 모서리.
크기: 70x70px (스타는 60x60px).
호버시 확대: 1.1배.
기타
그림자, 효과, 색상 및 간격은 주어진 CSS에 따라 여러 요소에 적용됩니다.
텍스트, 아이콘 및 이미지와 관련된 다양한 CSS 클래스와 속성이 있습니다.
이 명세서는 제공된 CSS의 주요 요소와 스타일링에 대한 설명을 제공합니다. 디자인이 복잡해질수록, 상세한 명세서 작성이 필요할 수 있으며, 실제 프로젝트에서는 보다 상세한 구성 요소와 주석, 또는 디자인 시스템 도구를 사용하는 것이 좋습니다.
답변에 작성된 디자인시스템 겸 명세서를 활용하여 '개발자에게 필요한 지식을 묻고 답하는 Q/A 형태의 Chatbot'의 프론트엔드를 구현하고자 합니다. 사용하고자 하는 언어는 HTML, CSS, Javascript입니다.
선임 엔지니어로써 필요한 질문을 작성하여 주시고, 필요한 내용이 기입되었다면 Code를 작성하여 스크립트를 주십시오.
물론이죠! 지금까지 주어진 디자인 시스템에 따라서 "개발자에게 필요한 지식을 묻고 답하는 Q/A 형태의 Chatbot" 프론트엔드를 구현해보겠습니다. 아래에 필요한 내용과 코드를 제공하겠습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Developer Q/A Chatbot</title>
<link href="<https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap>" rel="stylesheet">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<div class="side">
<div class="header">
<div class="avatar"><img src="avatar.png" alt="Chatbot Avatar"></div>
<div class="title">Dev Q/A Chatbot</div>
</div>
<div class="menu">
<ul>
<li class="active">Home</li>
<li>About</li>
</ul>
</div>
<div class="messages">
<div class="avatar"><img src="user.png" alt="User Avatar"></div>
<div class="user">You</div>
<div class="text">Hello, Chatbot!</div>
</div>
</div>
<div class="content">
<div class="card">
<textarea id="question" placeholder="Type your question here..."></textarea>
<button onclick="askQuestion()">Ask</button>
<div id="answer"></div>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
textarea {
width: 80%;
height: 100px;
padding: 10px;
font-size: 16px;
margin-bottom: 10px;
border-radius: 5px;
border: 1px solid #e1e1e1;
font-family: 'Roboto', sans-serif;
}
button {
background-color: #fd5068;
color: #fff;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
font-weight: 500;
font-family: 'Roboto', sans-serif;
}
button:hover {
background-color: #ff7854;
}
function askQuestion() {
const question = document.getElementById('question').value;
let answer = "";
switch (question) {
case "어떤 HTML 요소는 사용자의 입력을 받기 위해 사용됩니까?":
answer = "HTML에서 사용자의 입력을 받기 위해 <input> 태그를 사용합니다.";
break;
case "CSS의 'flex'는 무엇을 의미합니까?":
answer = "CSS의 'flex'는 Flexible Box Layout의 줄임말로, 아이템 간 공간 배분과 정렬 기능을 제공하는 모델입니다.";
break;
case "JavaScript에서 'let'과 'const'의 차이점은 무엇입니까?":
answer = "'let'은 변수 선언에 사용되며, 값이 변경될 수 있습니다. 'const'는 상수 선언에 사용되며, 한 번 할당된 값을 변경할 수 없습니다.";
break;
default:
answer = "죄송합니다, 그 질문에 대한 답변을 찾을 수 없습니다.";
}
document.getElementById('answer').textContent = answer;
}
기존 CSS 스타일의 테마 색상이 표현된 것을 확인할 수 있음.
테마는 잘 정해졌어.
자 이미지는 삭제해.
user와 assistant가 서로 대화를 주고 받는 형태가 되어야해.
화면에서 왼쪽에 user message가 표시되고, 오른쪽에서 assistant message가 표시되야해.
하단 왼쪽 + 버튼을 눌러서 이미지를 업로드할 수 있고
하단 중앙에 메시지를 user가 작성할 수 있어.
하단 오른쪽 에 보내기 버튼이 있고, 이를 통해 메시지를 전송해.
메시지가 전송되면 assistant가 답변을 해.
자 수정해보자.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Developer Q/A Chatbot</title>
<link href="<https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap>" rel="stylesheet">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<div class="side"></div> <!-- Placeholder for design consistency -->
<div class="content">
<div class="chat">
<!-- Placeholder for messages -->
</div>
<div class="message-input">
<input type="file" id="imageUpload" style="display: none;">
<button onclick="document.getElementById('imageUpload').click();">+</button>
<textarea id="userMessage" placeholder="Type your question here..."></textarea>
<button onclick="sendMessage()">Send</button>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
.chat {
flex: 1;
overflow-y: auto;
padding: 20px;
display: flex;
flex-direction: column;
}
.message-input {
display: flex;
align-items: center;
padding: 10px;
background-color: #f5f7fa;
}
.message-input textarea {
flex: 1;
height: 40px;
resize: vertical;
margin: 0 10px;
}
.message {
max-width: 60%;
padding: 10px;
margin: 5px 0;
border-radius: 10px;
position: relative;
}
.user-message {
align-self: flex-start;
background-color: #e1e1e1;
}
.assistant-message {
align-self: flex-end;
background-color: #fd5068;
color: #fff;
}
function sendMessage() {
const chat = document.querySelector('.chat');
const userMessage = document.getElementById('userMessage').value;
// Append user message to chat
const userMsgElem = document.createElement('div');
userMsgElem.className = 'message user-message';
userMsgElem.textContent = userMessage;
chat.appendChild(userMsgElem);
// Get the assistant response
const assistantMsg = getAssistantResponse(userMessage);
// Append assistant message to chat after a delay (simulate thinking time)
setTimeout(() => {
const assistantMsgElem = document.createElement('div');
assistantMsgElem.className = 'message assistant-message';
assistantMsgElem.textContent = assistantMsg;
chat.appendChild(assistantMsgElem);
chat.scrollTop = chat.scrollHeight; // Auto scroll to latest message
}, 1000);
document.getElementById('userMessage').value = ''; // Clear the input
}
function getAssistantResponse(question) {
switch (question) {
case "어떤 HTML 요소는 사용자의 입력을 받기 위해 사용됩니까?":
return "HTML에서 사용자의 입력을 받기 위해 <input> 태그를 사용합니다.";
case "CSS의 'flex'는 무엇을 의미합니까?":
return "CSS의 'flex'는 Flexible Box Layout의 줄임말로, 아이템 간 공간 배분과 정렬 기능을 제공하는 모델입니다.";
case "JavaScript에서 'let'과 'const'의 차이점은 무엇입니까?":
return "'let'은 변수 선언에 사용되며, 값이 변경될 수 있습니다. 'const'는 상수 선언에 사용되며, 한 번 할당된 값을 변경할 수 없습니다.";
default:
return "죄송합니다, 그 질문에 대한 답변을 찾을 수 없습니다.";
}
}