본문 바로가기
Javascript 프로젝트/GitHub 웹 페이지

[GitHub 웹페이지] 5. 블로그 페이지 - 와이어프레임

by cogito21_js 2024. 6. 9.
반응형

블로그 페이지의 와이어 프레임을 설명해드리겠습니다. 블로그 페이지는 여러 블로그 포스트를 표시하고, 각 포스트를 클릭하면 해당 포스트의 상세 내용을 볼 수 있도록 설계할 수 있습니다.

블로그 페이지 와이어 프레임

-----------------------------------------
|                 Header                |
-----------------------------------------
|               Navigation              |
|  Home | Profile | Blog | Contact      |
-----------------------------------------
|              Blog Section             |
|   [Blog Title]                        |
|   [Post 1 Title]                      |
|   [Post 1 Summary]                    |
|   [Read More Button]                  |
|   ----------------------------------- |
|   [Post 2 Title]                      |
|   [Post 2 Summary]                    |
|   [Read More Button]                  |
|   ----------------------------------- |
|   ...                                 |
-----------------------------------------
|               Footer                  |
|   [Links] [Social Media Icons]        |
-----------------------------------------

블로그 페이지 와이어 프레임을 이미지로 생성

이제 이 와이어 프레임을 시각적으로 표현한 이미지를 생성하겠습니다.

{
  "prompt": "A wireframe for a blog page. The layout includes a header at the top, followed by a navigation bar with links for Home, Profile, Blog, and Contact. Below the navigation is a blog section with a title 'Blog'. Each blog post includes a post title, a summary, and a 'Read More' button. There are multiple posts listed vertically. At the bottom is a footer with links and social media icons.",
  "size": "1792x1024"
}

반응형