퍼블리싱 하면서 좋은 UI 디자인

퍼블리싱

퍼블리싱(Publishing)은 웹사이트나 애플리케이션을 사용자에게 제공할 수 있도록 콘텐츠를 준비하고 배포하는 작업을 의미합니다. 웹 퍼블리싱은 주로 웹페이지를 만들고, 디자인을 적용하며, 웹 서버에 이를 올려 실제로 인터넷에서 접근 가능하게 만드는 과정을 포함합니다. 이 과정에서 다음과 같은 주요 작업이 포함됩니다:

 

퍼블리싱 작업하면서 좋은 디자인을 공유하려고 합니다. 오랜만에 글을 작성하네요.

첫 번째 리스트식

 

깔끔하면서도 리스트식으로 뭐 설명이나 나열할 것 을 작성하면 깔끔하고 이쁜 디자인이지 않나 싶습니다.

밑에 코드는 체크표시를 다른 이모티콘으로 바꿔도 괜찮지 않을까 생각합니다. 폰트사이즈는 각 홈페이지 맞게 적절히 사용하시면 될 것 같습니다.

// content: "✔"; 다른이모티콘으로 바꿔도 괜찮지않을까 싶습니다.

.service__box__item ul li::before {
    content: "✔";
    position: absolute;
    left: 0;
    color: #10b981;
    font-size: 0.9rem;
}

 

두 번째 flowchart 

flowchart 명칭이 정확하진 않은데 약간 순서도 설계 방법 뭐 이런 느낌으로 보시면 될 것 같습니다.

 

홈페이지 화살표가 넘어가는걸 원하시는 분은 홈페이지에 맞게 width를 넓히면 3번째 아이템 옆 화살표가 다음으로 넘어갑니다. 

// width 홈페이지에 맞게 늘린다
.step {
    background-color: #f3f4f6;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    padding: 20px;
    width: 324px;
    text-align: center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

 

두 가지를 소개해드렸는데 각자 홈페이지에 맞게 색이나 폰트사이즈 폰트를 바꾸시면 좀 더 괜찮은 디자인이 되지 않을까 생각이 듭니다. 이상 퍼블리싱 디자인 소개글을 마칩니다