간단한 SNS 만들기 - (1) Mock up 및 html, css 구현

1단계: mock-up*
    - 사용 툴: Google Presentation

2단계: html, css로 실제 화면 구현
    - 사용 툴: Visual Studio Code

mock-up* : 시각적인 요소로만 구성 요소들을 배치하는 작업. 프로토타입은 동적인 움직임까지 구현하는 과정이 포함되는 반면, 목업(mock-up)의 경우 단일 페이지만을 보여줌.

 

- 1단계: Mock up으로 명료하게 페이지를 기획하는 단계

   최상단에 서비스명을 노출하고, 다음에 자신의 프로필 사진과 사용자명, 댓글을 입력하는 창과 입력이 완료된 경우 글을 업로드하도록 명령하는 tweet 버튼을 배치하였다. 그 아래에는 sns인만큼 실시간 피드가 업로드될 수 있도록 업데이트 창을 구현하였다.

구글 프레젠테이션으로 페어와 함께 공유한 화면.

 

- 2단계: html과 css로 해당 화면을 구현하는 단계

• 세 가지 영역으로 구성: 제목(#header), 메세지 입력 영역(#write-box), 피드 영역(#comment)
• 텍스트 그라데이션: linear-gradient / webkit-background-clip / webkit-text-fill-color 사용 (비표준)
• 프로필 이미지: url("./image/profile.png")로 해당 html, css파일과 동일한 폴더의 하위에 존재하는 image폴더 내에 프로필 사진 저장 경로 지정
• 아이콘: html 파일에 fontawesome 경로를 끌어와서 새, 느낌표, 좋아요, 싫어요 아이콘 사용

 

초기 구현 페이지

 

실제 SNS 화면과 비슷하게 구현해보기 위해 수정한 페이지