사이트 활용해서 말풍선 만들기

저번 채팅 기능 관련 글에 이어서 채팅 기능을 구현하기 위해서 말풍선을 만들어보려고 한다. 처음에는 막막했지만 검색을 해보니 유용한 사이트를 하나 찾아서 활용해보려고 한다.

말풍선 만들어주는 사이트

위의 사이트를 이용해서 간단하게 내가 원하는 말풍선을 만들 수 있었다.

사용 코드

...
const SendBox = styled.div`
 position: relative;
 min-height: 32px;
 margin: 0 20px 18px 26px;
 padding: 6px 16px;
 border-radius: 4px;
 background: #00aabb;
 ::after {
   content: "";
   position: absolute;
   right: 0;
   top: 35%;
   width: 0;
   height: 0;
   border: 8px solid transparent;
   border-left-color: #00aabb;
   border-right: 0;
   border-top: 0;
   margin-top: -2.5px;
   margin-right: -5px;
 }
 span {
   ${Body_400_14}
 }
`;
...

CSS 코드를 받기 때문에 조금만 만져보면 금방 커스터마이징 할 수 있는 것 같다. styled-components를 사용하기 때문에 위와 같이 코드를 작성해주었다. 말풍선 꼬리를 작게 하고 싶어서 ::after내의 border, margin-top, margin-right 3개의 속성을 이용해서 크기와 위치를 지정해주었고, top을 이용해서 말풍선의 위치를 조정해주었다.

사용 예시

아직 추가적인 작업이 필요하지만 말풍선 꼬리를 쉽게 만들 수 있어서 유용한 것 같다.

디자이너님의 와이어프레임을 봤을 때, 채팅을 보내고 바로 보내는 것에는 말풍선 꼬리를 없애야 한다..ㅎ 아직 채팅을 console.log로만 찍어봐서 감이 안오긴 하지만 아마 받고 2번째 메세지부터는 조건부로 말풍선을 없애면 되지 않을까 생각한다.