2021년 4월 21일 코드스테이츠 DAY-17(Twittler 목업 만들기) + CSS

 

2021년 4월 20일 코드스테이츠 DAY-16(객체 코플릿) + twittler mock-up 계획(wireframe) + figma 사용법 숙지(인

 

CSS 중급(Chapter)

웹 앱 화면 설계하기(Chapter)

Twittler 목업 만들기

Sprint Review(Zoom)

 

 

Twittler 목업 만들기

 

위 어제 일자로 된 발행글을 보면 알겠지만, 블로그를 작성하고 끝날때 즈음 해서 오늘의 일정을 확인하고 급하게 Figma 인강을 들었다. 

 

근데 본론까지의 길이가 너무 길어서 중간에 끊고 검색을 하기로 했다. 

 

단축기를 검색하여 필요한 기능을 알아보고 있었는데, 살펴보니 Figma로는 할 수 있는것이 정말 많았다!

 

무료이니 포토샵 수준만큼 되겠어 했지만, 오히려 더 많은 기능이 있었던 것이었다. 

 

심지어 만든 것의 CSS 또한 확인할 수 있으니 만약 Figma를 더 자세히 배운다면

 

얼마나 개발에 도움이 될지 상상이 안된다. 

 

라는 생각이 들어서 다시 인강을 들었다. ㅎㅎ

(뭔가 하고싶은 일이 생기면 안절부절 못하는 나의 성미가 인강을 끄고 켜게만들었다.) 

 

내가 하고싶은 것은 코드스테이츠에서 요구하는 것 그 이상이기에 어제 저녁에 wireframe까지 작성을 하고싶은 마음이 굴뚝같았다.

 

하지만 그것은 pair에 대한 배려가 아니고 비겁한 것이기에 그러지 않기로 하였다. (코플릿을 미리 풀지않는 것과 비슷한 것이랄까)

 

오늘 아침이 밝았고 트위터 페이지를 열고 시간이 닿는대로 wireframe에 옮기려고 노력했다. 

 

아래 내가 만든 wireframe과 대상이 된 트위터 홈페이지를 보자.

 

솔직히 시간이 부족하였기에, 그리고 main-right부분에 What's happening을 어떻게 구현할까라는 생각에 엄두를 못내고 가운데 까지만 작성했다.

 

figma를 어떻게 사용하는지 방법을 알아두는 것과 실제로 쓰는 것은 역시 달랐다. 

 

아아... 더듬더듬 거리면서 꼼꼼히 오른쪽 화면 전체를 넣으려고 했으나

 

8시부터 2시까지 시간을 쏟았음에도 오른쪽에 있는 화면을 다 못 담았다.

(툴이란 많이 써봐야한다. 6시간 만지니까 단축기가 조금 손에 익고 적응이 되는 것을 느낀다. 하지만 오늘로 그만두지 말고 계속 관심을 가지고 공부하자! 디자인과 디자인의 툴, 개발을 함께 할 줄 안다면 이 얼마나 쓸모있는 인간이 되겠는가!)

 

wireframe을 하기위해 twitter의 개발자 도구를 켰는데 복잡하고 해독하기 힘들었지만 보면서 너무 많은것을 배웠다.

 

알게 된 새로운 지식은 다음과 같다. 

 

•  user-select(CSS)
•  white-space(CSS)
•  -webkit-user-modify(CSS)
• :read-write(CSS)
• contenteditable(HTML) 

---

user-select(CSS)

사용자가 텍스트를 선택할 수 있는지 없는지를 지정하는 속성이다. 

 

user-select: none이면 사용자는 text를 선택할 수 없다.

 

user-select: text이면 사용자가 텍스트를 선택할 수 있다.

 

white-space(CSS)

요소가 공백 문자를 처리하는 법을 지정하는 것이다.

 

6가지의 값이 들어올 수 있는데 글쎄... 다 기억할 필요는 없어보이지만 

 

normal, nowrap, pre-wrap(내가 볼때는 이상한데 twitter에서는 이것을 사용했다.), pre-line이 그나마 일반적으로 보인다.

 

normal이 말그대로 노말이다. ㅎㅎ

 

-webkit-user-modify(CSS)

contenteditable로 대체되어 오고있는 속성이라고한다. 

 

standard가 아니고 더이상 추천되지않는다고 엄청 MDN에서 노란 경고창과 빨간 경고창을 보여준다.

 

:read-write(CSS)

p:hover{}와 같이 p:read-write{}로 사용가능하며 사용자가 편집할 수 있는 element임을 나타낸다.

 

contenteditable(HTML)

Input을 안써도 text가 안에 들어올 수 있는 tag(p, div)안의 내용을 사용자가 바꿀수 있게하는 것

 

사용자가 바꾸게 하려는 내용이 있는 바로 그 태그에 바로 써도 되고, 그 부모의 태그에 contenteditable을 쓰면 

---

아무튼 위 CSS, HTML에 대한 추가적인 지식을 얻으면서 wireframe을 작성하였는데 wireframe이 있으니,

 

HTML을 확실히 빠르고 정확하게 작성할 수 있었다.

(처음 작성해보는 wireframe이라서 그런지 HTML을 코딩하면서 수정한 부분도 많다.)

 

하지만 CSS를 작성하며 많은 부분들이 내가 의도한 바대로 작동하지 않았고, 아쉬운 점들이 발생했다.

 

 

• wireframe을 보면 알겠지만 nav container가 왼쪽에 세로로 있어야하는데 예쁘게 정렬이 안됬다.
• 그리하여 나는 보통의 웹처럼 위로 nav container를 옮겼다.
• wireframe을 보며 알게된 contenteditable과 -webkit-user-modify: read-write를 통해 사용자 입력창을 구성하려하였지만 이는 작동하지않았다. 
• 그리하여 input tag로 글쓰는 입력창을 대신하였다. 
• 사진이나 GIF등 파일을 첨부하는 것을 구현하고 싶었으나 시간이 부족해 엄두조차 내지못했다.
• 2page는 꿈도 못꿨다.

 

워낙 짧은 시간(3시간)이라서 처음보는 내용들로 내가 원하는 기능을 구현하는 것이 힘들겠다라고 생각했지만

 

생각 이상으로 안되다 보니 힘이 많이 빠졌다.

 

그리고 일단 제출한 껍데기일 뿐인 나의 twittler를 보자.  

 

 

 

 

일단은 그럴싸하게 보이려고 알고있는 CSS지식을 다 가져다 붙였다. 

 

하지만 위에 말한 것 처럼 의도했던 것의 반정도밖에 구현을 못했고, 2page를 만들겠다던 나의 포부를 이루지 못했다.

 

물론 오늘 이루지 못했다는 말이다. 

 

나는 만들고 만다. 

 

의도한 바를 이루어서 코드스테이츠에서 Javascript로 기능을 구현하는 그 전까지 게시글을 쓰겠다. 

 

내가 만족하는 twittler를 구현해보겠다. 

 

CSS는 아는만큼 보이는데

 

많이 알려면 많이 봐야하는 것 같다. 

 

내일 부터는 저녁에 twittler를 내가 의도했던 모양으로 조금씩 고쳐나가도록 하겠다.